From 5b6ad09f98115d5ba57705b7df2abce6ba92f5cb Mon Sep 17 00:00:00 2001 From: Tobias Reich Date: Fri, 26 Dec 2014 01:23:56 +0100 Subject: [PATCH] Updated toolbar icons --- dist/main.css | Bin 34810 -> 34741 bytes dist/main.js | Bin 169647 -> 169569 bytes index.html | 75 ++++++++++++++++++++++++++----------- src/images/iconic.svg | 1 + src/scripts/view.js | 18 +++++---- src/styles/_header.scss | 81 ++++++++++++++++------------------------ src/styles/main.scss | 5 +++ 7 files changed, 103 insertions(+), 77 deletions(-) create mode 100755 src/images/iconic.svg diff --git a/dist/main.css b/dist/main.css index a792a6a1dc7849024d533d092cc777a13b9ff059..118f6b4f90e0c3247dc55bbc1389fb3af6ef1cd1 100644 GIT binary patch delta 483 zcmZ`#!Ab)$5QX+&y<1xlG*Se6$l9&cU9))brr@PLcq^LSWV^wVEJ@m~mg*<;kZ8Vy(W0Bx2nwro4=K9QuF`?&tYQA`F z(W$(ht!W{KA(rO#9#lh-LB;MEAD~c3LM60_`RLcTQcOq=w}9J9vspr|j08?N(%M{S z^@Bg&JxVj++j84!7EBn?335BOjYd)liBiG1rqaB0cTBmrd$Ob?IBlO0fZF OeDT=ZE-&6M_uL<$<*+OO delta 584 zcmZvZ&rZTX5XKWcz{Lw3;9>&7i_tc;7+YE&KyMlhSF*Ibbd$2vY!?I@CB%z24*Lc^ zfeG;)d<^a;CSE<+KUC3hnM`J8fAj4(ugk*MvhY$Z6$x_jC5z;OR#!Krw~O*%ECjH~ z0Ux;4G)>c%+VMd#q<7fTHF}{V!&{NjsoBUF=0Dn9>&iCpz<9Z$&ag| zp=LnKg9+w2mJo99;dnK#Z~Cf_iHL{~NLWcK7Y`M=u9V8!Sum|@tvHxT5(oKt-H^}S z$~-`>OWDxMMmkBmodhkI=JaN^y&uvcqwHj}vnc@lu#fz~c(kh){woF^2#8!720ogl ze@^(T$L{`~t){Gva!!Yyuzz%&W~%KiGYK%EA|~GHN<~Z})2|jXDNNTd RW>N)li;?6Tw*y5RlmW>Q8Danc delta 174 zcmaF3hHL#=u7(!IElgI0wkjG*%1NaqCHZ;r#U+VF3W-XZdPS+Z`DLljIf=!^8cLbT z`FXk^Dc#iEf|5!FIA2LqXS!7(ld=R@Phv_6x`ycmg-p(JxMU&5fz&8Ze^ba5&kR&J Yed2dUk?9FVOpQzmiQ69*F*PUy0ICB#NB{r; diff --git a/index.html b/index.html index 9c2e656..0473d73 100644 --- a/index.html +++ b/index.html @@ -29,39 +29,72 @@
+ + + -
diff --git a/src/images/iconic.svg b/src/images/iconic.svg new file mode 100755 index 0000000..19b6fcf --- /dev/null +++ b/src/images/iconic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/scripts/view.js b/src/scripts/view.js index 1dd6a1a..efac1e1 100644 --- a/src/scripts/view.js +++ b/src/scripts/view.js @@ -447,14 +447,14 @@ view.photo = { star: function() { - $('#button_star a').removeClass('icon-star-empty icon-star'); if (photo.json.star==1) { // Starred - $('#button_star a').addClass('icon-star'); - $('#button_star').attr('title', 'Unstar Photo'); + $('#button_star') + .addClass('active') + .attr('title', 'Unstar Photo'); } else { // Unstarred - $('#button_star a').addClass('icon-star-empty'); + $('#button_star').removeClass('active'); $('#button_star').attr('title', 'Star Photo'); } @@ -464,13 +464,15 @@ view.photo = { if (photo.json.public==1||photo.json.public==2) { // Photo public - $('#button_share a').addClass('active'); - $('#button_share').attr('title', 'Share Photo'); + $('#button_share') + .addClass('active') + .attr('title', 'Share Photo'); if (photo.json.init) $('#infobox .attr_visibility').html('Public'); } else { // Photo private - $('#button_share a').removeClass('active'); - $('#button_share').attr('title', 'Make Public'); + $('#button_share') + .removeClass('active') + .attr('title', 'Make Public'); if (photo.json.init) $('#infobox .attr_visibility').html('Private'); } diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 344e375..cf89584 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -55,38 +55,41 @@ header { &.editable { cursor: pointer; } } - /* Button ------------------------------------------------*/ - .button { - color: #888; - font-family: 'FontAwesome'; - font-size: 21px; - font-weight: bold; - text-decoration: none !important; - cursor: pointer; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); - - &:hover { - color: #fff; - } - - &.left { - float: left; - position: absolute; - padding: 16px 10px 8px 18px; - } - - &.right { - float: right; - position: relative; - padding: 16px 19px 13px 11px; - } + /* Toolbars ------------------------------------------------*/ + .toolbar { + display: none; + position: absolute; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0 10px; } - #tools_albums, - #tools_album, - #tools_photo, - #button_signin { - display: none; + /* Button ------------------------------------------------*/ + .button { + display: inline-block; + padding: 16px 8px 12px; + width: 15px; + cursor: pointer; + + &.left { float: left; } + + &.right { float: right; } + + .iconic { + fill: #888; + filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) ); + transition: fill .2s ease; + } + + &:hover .iconic { fill: #fff; } + + &--star.active .iconic { fill: #f0ef77; } + + &--eye.active .iconic { fill: #ff9737; } + + &#button_signin { display: none; } + } /* Button Divider ------------------------------------------------*/ @@ -129,24 +132,6 @@ header { &:hover { opacity: 1; } } - /* Tools ------------------------------------------------*/ - .tools { - float: right; - padding: 14px 8px; - color: #888; - font-size: 21px; - text-shadow: 0 -1px 0 #222; - cursor: pointer; - - &:first-of-type { margin-right: 6px; } - - &:hover a { color: #fff; } - - .icon-star { color: #f0ef77; } - - .icon-share.active { color: #ff9737; } - } - /* Hosted with Lychee ------------------------------------------------*/ #hostedwith { float: right; diff --git a/src/styles/main.scss b/src/styles/main.scss index 319ffe8..0d0914e 100755 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -42,6 +42,11 @@ input { user-select: text !important; } +.iconic { + width: 100%; + height: 100%; +} + @import 'animations'; @import 'content'; @import 'contextmenu';