From eb995ed7343c85742b481f39b4dee64e9d2e05fa Mon Sep 17 00:00:00 2001 From: infeng Date: Tue, 18 Oct 2016 17:33:20 +0800 Subject: [PATCH] add button icon --- src/Icon.tsx | 26 ++++++++++ src/ViewerCore.tsx | 10 +++- src/ViewerToolbar.tsx | 38 +++++++-------- src/style/fonts/icomoon.eot | Bin 0 -> 2008 bytes src/style/fonts/icomoon.svg | 18 +++++++ src/style/fonts/icomoon.ttf | Bin 0 -> 1844 bytes src/style/fonts/icomoon.woff | Bin 0 -> 1920 bytes src/style/index.less | 89 +++++++++++++++++++++++++++++++++-- 8 files changed, 154 insertions(+), 27 deletions(-) create mode 100644 src/Icon.tsx create mode 100644 src/style/fonts/icomoon.eot create mode 100644 src/style/fonts/icomoon.svg create mode 100644 src/style/fonts/icomoon.ttf create mode 100644 src/style/fonts/icomoon.woff diff --git a/src/Icon.tsx b/src/Icon.tsx new file mode 100644 index 0000000..25fc7c8 --- /dev/null +++ b/src/Icon.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +export enum ActionType { + zoomIn = 1, + zoomOut = 2, + prev = 3, + next = 4, + rotateLeft = 5, + rotateRight = 6, + reset = 7, + close = 8, +} + +export interface IconProps { + type: ActionType; +} + +export default class Icon extends React.Component { + render() { + let prefixCls = 'react-viewer-icon'; + + return ( + + ); + } +} diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx index 2e158a2..ebaa919 100644 --- a/src/ViewerCore.tsx +++ b/src/ViewerCore.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import './style/index.less'; import ViewerCavans from './ViewerCavans'; import ViewerNav from './ViewerNav'; -import ViewerToolbar, { ActionType } from './ViewerToolbar'; +import ViewerToolbar from './ViewerToolbar'; import ViewerProps, { ImageDecorator } from './ViewerProps'; +import Icon, { ActionType } from './Icon'; function noop() {} @@ -130,6 +131,9 @@ export default class ViewerCore extends React.Component
-
+
+ +
{ constructor() { @@ -34,24 +26,26 @@ export default class ViewerToolbar extends React.Component
    -
  • {this.handleAction(ActionType.zoomIn);}}> - +
  • {this.handleAction(ActionType.zoomIn);}}> +
    • -
  • {this.handleAction(ActionType.zoomOut);}}> - +
  • {this.handleAction(ActionType.zoomOut);}}> +
    • -
  • {this.handleAction(ActionType.prev);}}> - +
  • {this.handleAction(ActionType.prev);}}> +
    • -
  • -
  • {this.handleAction(ActionType.next);}}> - +
  • {this.handleAction(ActionType.reset);}}> +
    • -
  • {this.handleAction(ActionType.rotateLeft);}}> - +
  • {this.handleAction(ActionType.next);}}> +
    • -
  • {this.handleAction(ActionType.rotateRight);}}> - +
  • {this.handleAction(ActionType.rotateLeft);}}> + +
    • +
  • {this.handleAction(ActionType.rotateRight);}}> +
diff --git a/src/style/fonts/icomoon.eot b/src/style/fonts/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..4db0df4866345dc574f3abacbc0441b6ec06d69f GIT binary patch literal 2008 zcmb7FZ)jUp6hG(PmlxA6sco7BN3E|-O_j2&f6^q@t;R2fsiCDCrNY3bZA@G8r=%&Y zFeHe7&=o8Sa~l(i_+c>c;}}f3Fa#~AUliFFA<$2)^PA$R+l#;Z-m6VZQM`|P?>WEo zJLlea-hKDncM?U=nG`zMnATV#uZRcTq)1EPN{&u_6sBI2d)OPGT(FVKB&c`v?8*M77U%OozCxdx$)y%Ix;8!q zsSWzYOloNn^OMl8V16Q#U3v3|UtXVpzD^{%=F+Lz#^vSriPW!QkIn&b-V@(Le+0d2 zE?2q`BAz31=+Jw!g_)E(DQ2O|JRHxZE-d1O5YLf?uIE#^^wn2fe?ecx8t*L@mP*(s znzL2fNr-QFjT}VERpmP%A6Ya1N(1bYyt>BN_Q94Q+KG!wtwITb4&z?(B~O=wxtd(D z4K`~QCaaB9ngZU6YzW9q`u5!RJ3Ea#O*@gDc}V z``Py+yz5sroy>uW5u>TjibE88!6ff{{1=v}Rg_)4of|nE<}f>bF7`#+Sy6U-Lh+k7 zj53!uw?;-2$y?Xbs=-hnI<7x3ej{eBRuOpcMTiGoJQ(t@KM+!eIiMuCY?N=@jE8#W zM@P0cm2V#!01P#K?N+kL-Urtma^JOzO7K4c|BhIggPoew!@gF3pq&T$qp@L*1w10y z8CC`(!^%K^yAp`0WR%xptI6bQEIKq4wItQ0P6a2XvqKAaE{%;{y0b7idwx84SxKzz zbEM>OInF)z@`BIt6Ntl!SD1yBfCsa}r_;%#Q+YZ<0xx!VWio;ZuJiS)M88UfZi>Gr{Ap*KnvCDR`$p5LKd4caD*e=R<=y?+K8?7yu!_}iF3kU*EI!8lKg(hqvn-Y(-JmD% zyK54!>xwPwCbI$eLOY$J^Yl60r{8&j-{Oy9kF`9far3-=yfhK}?)5*$xwmb0ni!TNS2bEJ?j z>6vssT}+kIv- H{$JYPl*U!O literal 0 HcmV?d00001 diff --git a/src/style/fonts/icomoon.svg b/src/style/fonts/icomoon.svg new file mode 100644 index 0000000..2457df8 --- /dev/null +++ b/src/style/fonts/icomoon.svg @@ -0,0 +1,18 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/style/fonts/icomoon.ttf b/src/style/fonts/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..93c16b215af71aab7ca6e24d92e24dedd70dfbbd GIT binary patch literal 1844 zcmb7EZD?Cn7=GV#Zf;Dwq_$}i9JSsyHC4*8e&)uy)%d3{CA4&-Oc1I24cw@*Uc(dckWJ3rP8;q8j8sfA9$|aH-9H) zwNaD!a3aKGJ|2q&I2?(I366*qSIz468_C$f($wVL9r5i06NIT4S8t`u9K3(cW7XZL zDFpvx@bA&%9PL%T0SbQxhbezhXg0J4yGGHtBTczYr-`0T@{o@) zV2={9Bv$e1LB=q6LOFY5-ah89XJFE+ZrSyL6 z?eIxem^vD@!A|JQ+;KP<{CJEvi z*UdUEQ{A%D8g<+u+b-zXXy+p-X zqrAFQDr!UVLA>Jzm1z|QP$13_#cA+RuS3ZhBe#~%mXXvzp=*?&xUtz$f8FCgtK05v)kKhh-Dt;RpaDWRhqWx~LuZA@G8G13%Q z7!t$}bOVdRbfdx$e+&lx9D_j(`=bT*k0Sdc1nQsG`cH9GcjI$zZf&Lo@r3uB=Y8Ji zyyrdVo_q7!)Z`>Fp*btmYK;-qAJ(Q$9~&X!M-WRXYwL7AJ(o|P2e$zKqOy(tjgPYF zWySpjUul)KXLGBsg4-pM{mQ=m@#UF?OnRQk(T;djS?kKmI}0Gey#OCN>UZ9i-z?_yDJ*trc664=kw_cSl4kIzG0b%W(w(i2HZWY{kF2JFS`CXUtBI@ zzp1}<5=hD~d5s)I;;Q%>{`-xQf2L7(!EbJ?N`9y%h<4(#TCY+A_#lC0{3$ZsCir>6p zR=BdcH93_?-ny32Oon^kvA%2mLd<%-D)A!^4ra{7V<8Xw10gZN0g>Q}S-EjD9vWPn zn%vqHU)?uBm|EuAtz?P4yXy{BcfG0+<{!oU-dLD}eY(@bzAk^Dhet=Eu?da^JTll9 z7GseKF*?#C0x^xu%3ADlGI==`9UqT2kmk}-!I|0I_|lzAr%qkEvotn;ZaR2HB-Rcz z3OQVkGfzE#^id^IQr|! zJ;9NXteMxn?yB2sUUz%FZcbSar{IW$HMkEG*lTe@Bay(fBQJJ4YUd1MHS)S8vU=Tr zCfr_OSWtCVjiP>6nsS3q6FnK{VHcyr8AU_K)PwV|bDs?JKuB+6591&M`y}GJ{|WA4 zb*}p);{ND!Ji!BDmcN^u91|K#>HN^y>5{rIH_c6AVe{!8Ji9WTwFe?yEso zKJ;`pe*248+K&H5t(tP_`@xUjIvDNSsJ?A@YpjNQVZHy<(4#+ivl@ycjYz{$)8HrY zy6cK>GGSxGQnpYR_0VxTN1xI?`jwaXb^ZVmmHh~vu~*rz!kS`t9{SvlGCA!T_`Ct9 zY+eFKZL9&W*w}%80-ud_@Gsf81>f5D)K^Axf$<>HzydgHV+nl1#v1TN8#~BPhK+Ub z(>89Q2z|CVSIifS1zMyzDpDR+q{2+5w7gg>7{lQqnxPDpXc+ i { + position: relative; + top: 8px; + left: 18px; + } + &-cavans { position: absolute; top: 0; @@ -86,9 +113,13 @@ width: @toolbarHeight; height: @toolbarHeight; border-radius: @toolbarHeight; - background-color: rgba(0, 0, 0, .5); margin-right: 3px; cursor: pointer; + line-height: 29px; + } + + &-toolbar li:hover { + background-color: rgba(0, 0, 0, .8); } li.empty { @@ -98,7 +129,7 @@ &-navbar { overflow: hidden; - background-color: rgba(0, 0, 0, .5); + background-color: @btn-background-color; } @viewer-list-item-width: 30px; @@ -134,4 +165,56 @@ &-transition { transition: all .3s ease-out; } +} + +@icon-prefix-cls: react-viewer-icon; + +.@{icon-prefix-cls} { + & { + font-family: 'icomoon' !important; + display: inline-block; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + line-height: 1; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: white; + font-size: 13px; + } + + &-zoomIn:before { + content: '\ea0a'; + } + + &-zoomOut:before { + content: '\ea0b'; + } + + &-prev:before { + content: '\ea38'; + } + + &-next:before { + content: '\ea34'; + } + + &-close:before { + content: '\ea0f'; + } + + &-rotateLeft:before { + content: '\e967'; + } + + &-rotateRight:before { + content: '\e968'; + } + + &-reset:before { + content: '\e984'; + } } \ No newline at end of file