From f429cacd7aa04539a823d8895b47c42bab8455aa Mon Sep 17 00:00:00 2001 From: Juan Manuel Azambuja Date: Mon, 3 Dec 2012 19:59:17 -0200 Subject: [PATCH 1/5] [Sprites] add sprites for icon images --- Gemfile | 1 + Gemfile.lock | 9 + app/assets/images/icons/deletelabel.png | Bin 0 -> 135 bytes app/assets/images/icons/padlock-closed.png | Bin 437 -> 661 bytes app/assets/images/icons/padlock-open.png | Bin 437 -> 804 bytes .../pages/users-getting-started.js | 2 - app/assets/stylesheets/application.css.sass | 268 ++++++++++++++---- app/assets/templates/comment_tpl.jst.hbs | 2 +- app/assets/templates/header_tpl.jst.hbs | 27 +- app/assets/templates/likes-info_tpl.jst.hbs | 4 +- .../templates/post-viewer/comment_tpl.jst.hbs | 4 +- .../templates/stream-element_tpl.jst.hbs | 10 +- app/helpers/application_helper.rb | 2 +- app/helpers/aspects_helper.rb | 4 +- app/helpers/contacts_helper.rb | 4 +- app/views/aspects/_aspect_listings.haml | 8 +- app/views/aspects/edit.html.haml | 19 +- .../aspects/toggle_contact_visibility.js.erb | 12 +- app/views/contacts/_aspect_listings.haml | 18 +- app/views/conversations/_show.haml | 2 +- app/views/invitations/new.html.haml | 2 +- app/views/shared/_publisher.html.haml | 5 +- app/views/shared/_right_sections.html.haml | 24 +- app/views/tags/_followed_tags_listings.haml | 4 +- app/views/users/getting_started.haml | 4 - features/step_definitions/aspects_steps.rb | 2 +- 26 files changed, 306 insertions(+), 131 deletions(-) create mode 100644 app/assets/images/icons/deletelabel.png diff --git a/Gemfile b/Gemfile index e02acd9de..dbc2c23dd 100644 --- a/Gemfile +++ b/Gemfile @@ -114,6 +114,7 @@ gem 'gon', '4.0.0' group :assets do gem 'bootstrap-sass', '2.0.3.1' gem 'sass-rails', '3.2.5' + gem 'compass-rails' # Windows and OSX have an execjs compatible runtime built-in, Linux users should # install Node.js or use 'therubyracer'. diff --git a/Gemfile.lock b/Gemfile.lock index 012490480..2ffb8c27e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -110,6 +110,7 @@ GEM activesupport (>= 3.2.0) childprocess (0.3.5) ffi (~> 1.0, >= 1.0.6) + chunky_png (1.2.6) client_side_validations (3.1.4) coffee-rails (3.2.2) coffee-script (>= 2.2.0) @@ -119,6 +120,12 @@ GEM execjs coffee-script-source (1.3.3) columnize (0.3.6) + compass (0.12.2) + chunky_png (~> 1.2) + fssm (>= 0.2.7) + sass (~> 3.1) + compass-rails (1.0.3) + compass (>= 0.12.2, < 0.14) crack (0.3.1) cucumber (1.2.1) builder (>= 2.1.2) @@ -178,6 +185,7 @@ GEM foreman (0.57.0) thor (>= 0.13.6) formatador (0.2.3) + fssm (0.2.9) fuubar (1.0.0) rspec (~> 2.0) rspec-instafail (~> 0.2.0) @@ -465,6 +473,7 @@ DEPENDENCIES capybara (= 1.1.2) carrierwave (= 0.6.2) client_side_validations (= 3.1.4) + compass-rails cucumber-rails (= 1.3.0) database_cleaner (= 0.8) debugger (= 1.2.0) diff --git a/app/assets/images/icons/deletelabel.png b/app/assets/images/icons/deletelabel.png new file mode 100644 index 0000000000000000000000000000000000000000..768ed6608849f02ddc5d63f07158982692d9569f GIT binary patch literal 135 zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqex5FlArezt&tK$hFyLu<$Y1_K z$mu)#Lhe%bmHI2U1$~^?_eW)Cb4%0R#XZV1n%blk+Vc-CbFBSoGw)48)9n1YtKUBD jzCU5_Gg*xq$6X8?I~4Mc`E7a)G?~HE)z4*}Q$iB}Rt_^D literal 0 HcmV?d00001 diff --git a/app/assets/images/icons/padlock-closed.png b/app/assets/images/icons/padlock-closed.png index 25f3c8861c3a7b443ab7528e58515804179fac9a..86a86a2d4b9302a454afe8d5928c23ac32bda99a 100644 GIT binary patch literal 661 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMfu>hYCS0KG<>(*WS_U+lffA4_< z`;Q*ocIeRV{rh+C+qY})-UEjZ1Eqj$pe&RDW&^oEv~%}vh!l|Ay>~B20azR&2vh(P z+_MLw7-;w&Alkow``*3Vw`~In9yqXb&mNHC0|$T_ckbQ0W6vI-r4T8&ArS2lK?EDs zqPm|N4nUtcmIV2MdrmQ#Npvx%jFqnQw)=jIcc=8-TS}v$F|_R(dDn%f2awZl2Bz5>0Gt!^(-wheaW=N zH?wB99XYtk`fgmk!4_SK{U^Y3{PNB30*77{ z?LGSO@5dgemM5{(6qblC`R^3w*fwGRsUnuvK)GNByF?y2N%od`w}GxQC~=J_NzTvB zP0cG|a81c9Nlj5G&n(GM@F~qp49HBjQphMNDX`Ml&jIoaGL!XyYW4SW8QlTuRR!ry zNi0dVN-jzTQVd20hQ_)EM!JR;A%-SaCdO8#mbwNORt5&#XOqKFH00)|WTsW()=)L! R_A8(U22WQ%mvv4FO#mmTH^2Y@ literal 437 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%3?x6Bmj(i<`2jv5u0VR#s#W{<@87m<8;}7c zckkZ4W59FbZ5K7ao5_4}_sfB(5W zVQ>LzpXBM{7@`sU^z==>CIf-ihf1XfMHyLH!Z(D4+%o$7?|j+{&W&IF^#88+dv;pj zlXu-chsnR?%hlH`T+1ixt;E`YHmjCVbmjv?i?gwpX3I8Iwy^~1e2uu1n&8osv*`GT zj*W_%(~@m}Mf>o2Zm9XoQ#NDI-Plq4<0yt7^n-V z9;gwBfD9l4YJ@O=%HZNaWn1>{g{lN9+q)O85u|0$9-s(Z@s3@)AbNpP`wkocIteJX z6KEO`fw@p~z!m{TfCwZ4Rt9wEj@`SrZr{Fc%^HY$h{GU;gGjJ?h+>Eo#796jP%lCm z%tsIrh>ZuCdp7_>DzPNU4;XS7fIn&FmR2pnp3nEsy+3Bk82@gmiCoH)6+#>f9-FdF zy=}p@@uq6+V;6QIVPPR*h3$8&#dulEE;@x=zkl!M?RVdw<}eCKb7r=-WVO3(*c92Y zXKf$Q3eEzL$YLPv0mg18v+aP4nVv3=ArhC96B?M@)Y8<{#KI(|H~L1ng!sfX$sT(? zValXw6Q@oNf6&6Ep{2Qc#j2Ir8Cj03TS`m5&WQNJ%hM|n(corSC^>t^tisP9W<^IB zMMU1daqFhFg_Y&*9lLf`R~S`P{{AuR*H3m9HcQs_mbO-77nMVfD)RQi+?yOkZqyjD zED~fgOlZ8Zqe8-ift!QF$dPfgKnFj=*ATtmp}d%1A`Fec2o_y`6-!cmAEyi#@QzTZD8bP0 Hl+XkK3Ho}* literal 437 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%3?x6Bmj(i<`2jv5u0VR#s#W{<@87m<8;}7c zckkZ4W59FbZ5K7ao5_4}_sfB(5W zVQ>LzpXBM{7@`sU^z?0^CIyk!L?5dg7q0|e-gK#BjmVwff9J1lOq;b}_pUelqc+-%EFaCOegw?Nl1c)I$ztaD0e0su|3@-qMc diff --git a/app/assets/javascripts/pages/users-getting-started.js b/app/assets/javascripts/pages/users-getting-started.js index ec59feb8f..ff8137a4c 100644 --- a/app/assets/javascripts/pages/users-getting-started.js +++ b/app/assets/javascripts/pages/users-getting-started.js @@ -7,8 +7,6 @@ Diaspora.Pages.UsersGettingStarted = function() { $('#edit_profile').bind('ajax:success', function(evt, data, status, xhr){ $('#gs-name-form-spinner').addClass("hidden"); - $('.profile .saved').show(); - $('.profile .saved').fadeOut(2000); }); // It seems that the default behavior of rails ujs is to clear the remote form diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 5bafec609..f3f57fda0 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1,8 +1,13 @@ +@import 'compass' @import 'ui.css.sass' @import '_mixins.css.scss' @import '_flash_messages.scss' @import 'new_styles/_spinner' +/* ===== sprites ===== */ + +@import 'icons/*.png' +@include all-icons-sprites /* ====== media ====== */ .media :margin 10px @@ -403,6 +408,20 @@ ul.as-selections &:hover @include opacity(1) + .block_user + :display inline-block + + .icons-ignoreuser + :height 14px + :width 13px + + .delete + :display inline-block + + .icons-deletelabel + :height 8px + :width 8px + .status_message_show .comment_box :width 653px @@ -697,6 +716,14 @@ form p.checkbox_select :text :align left + .icons-monotone_wrench_settings + :display inline-block + :width 16px + :height 16px + + a.question_mark + :text-decoration none + #publisher_service_icons :position relative :top 3px @@ -761,7 +788,11 @@ form p.checkbox_select :padding 3px :position absolute :right 6px - :top 0 + :margin-top 9px + + .icons-deletelabel + :height 8px + :width 8px &:hover @include opacity(1) @@ -1144,36 +1175,47 @@ h3 span.current_gs_step :display inline-block :margin-top 2px :float left + :width 61px a:hover :text :decoration none + .badge :position relative :top 2px :display inline :margin 0 2px - :padding 8px 3px - :bottom 9px :font :weight bold :size smaller - :width 28px + :width 22px &:hover .badge_count :background :color lighten(#A40802, 5%) + a.badge_link + :display block + :width 100% + :height 16px + :float left + + .icons-notifications_grey + :height 16px + + .icons-mail_grey + :height 11px + #message_inbox_badge - img - :position relative - :top -2px + :float left + :padding 3px 3px 0px 0px #notification_badge - img - :position relative + :float left + :padding 0px 3px 0px 3px .badge_count @include border-radius(2px) @@ -1248,6 +1290,11 @@ ul#request_result :right 8px :top 3px + .icons-monotone_plus_add_round, + .icons-monotone_check_yes + :height 20px + :width 20px + > .contacts :margin 0 :padding 5px @@ -1290,12 +1337,10 @@ ul#request_result :border :bottom none - :height 12px !important - :width 12px !important - - :padding - :right 4px - :left 4px + :min-width auto + :float right + :padding 2px 4px + :margin-top 5px &.added @include linear-gradient(rgb(158,255,153), rgb(92,199,86)) @@ -1615,13 +1660,19 @@ ul#press_logos :color #999 .likes - .img + .icons-heart + :height 12px + :width 13px + :display inline-block + :vertical-align top :margin-top 3px :margin-right 5px - img - :height 12px - :width 12px + .bd + :display inline-block + + .expand_likes + :vertical-align text-bottom .mark_all_read :position relative @@ -1712,6 +1763,10 @@ ul#press_logos :padding :left 60px +.icons-monotone_email_letter_round + :height 128px + :width 128px + #email_invitation input :width 100% @@ -1836,6 +1891,10 @@ ul#press_logos :top 118px :right 5px + .icons-deletelabel + :height 8px + :width 8px + h3 :margin 0 :top 6px @@ -2113,7 +2172,6 @@ h1.tag :bottom 1px solid #ddd :padding 2px 0 :top 0 - :left 22px &.no_icon :padding @@ -2126,16 +2184,47 @@ h1.tag :font-weight bold :color #777 + .icons-plus, + .icons-heart, + .icons-question, + .icons-monotone_wrench_settings, + .icons-coffee, + .icons-bookmark, + :position absolute + :margin-left 3px + + .icons-plus + :width 14px + :height 14px + + .icons-heart + :width 13px + :height 13px + + .icons-question + :width 16px + :height 16px + + .icons-monotone_wrench_settings + :width 16px + :height 16px + + .icons-bookmark + :width 14px + :height 16px + + .icons-coffee + :width 16px + :height 14px + + h5.title-header + :margin-left 22px + h5 :font-size 12px :margin 0 :color #666 - img - :position absolute - :left 3px - :top 0px - .section .content :padding 8px @@ -2211,14 +2300,47 @@ ul.left_nav &.sub :padding-left 6px + a.community_aspect_selector + :width 152px + :vertical-align middle + :display inline-block + :line-height 25px + :text + :decoration none a - :color #777 :font-weight bold + :color #777 + :text + :decoration none + + ul.sub_nav + li:hover, + li.hover + @include border-radius(2px) + :background + :color lighten($blue,45%) + .edit, + .unfollow_icon + :display inline-block + + .icons-monotone_close_exit_delete + :height 16px + :width 16px + + .invisible + :visibility hidden li :position relative :width 100% + .icons-check_yes_ok + :height 18px + :width 18px + :display inline-block + :margin-left 3px + :vertical-align middle + li.active > a.home_selector:not(.sub_selected) :font @@ -2231,12 +2353,6 @@ ul.left_nav :weight 700 :color #666 - > a.aspect_selector - :background - :image image-url("icons/check_yes_ok.png") - :position 3px 50% - :repeat no-repeat - a.aspect_selector, a.home_selector, a.tag_selector, @@ -2246,7 +2362,6 @@ ul.left_nav :cursor -moz-grabbing :cursor grabbing - a.aspect_selector, a.home_selector, a.tag_selector, a.element_selector, @@ -2255,7 +2370,6 @@ ul.left_nav :width 100% :padding 3px 7px - a.aspect_selector, a.home_selector, a.tag_selector, a.element_selector @@ -2266,8 +2380,8 @@ ul.left_nav :text :decoration none - .edit, .unfollow_icon + :margin-right 10px :margin-top 4px @include transition(opacity) @include opacity(0.3) @@ -2276,25 +2390,42 @@ ul.left_nav &:hover @include opacity(1) - .contact_count + .edit + :margin-right 10px + :margin-top 4px + :width 12px + :height 12px + :margin-top 6px + @include transition(opacity) + @include opacity(0.3) :float right + :display none + &:hover + @include opacity(1) + + .contact_count + :width 16px + :line-height 16px + :text-align center @include border-radius(4px) :margin-top 1px :color #999 :background :color #eee - :padding 0 5px - :display inline + :display inline-block :font :size 11px + a.home_selector + .contact_count + :float right + ul.sub_nav :padding 0 :margin 0 li - :width 162px + :width 204px - a.aspect_selector, a.toggle_selector, .new_aspect, a.tag_selector @@ -2310,12 +2441,32 @@ ul.left_nav ul.sub_nav :width 140px - a.aspect_selector, + a.aspect_selector + :width 112px + :vertical-align middle + :display inline-block + :line-height 25px + :text + :decoration none + a.tag_selector :width 140px + li + :height 25px + .icons-check_yes_ok + :height 18px + :width 18px + :display inline-block + :margin-left 3px + :vertical-align middle + li:hover, li.hover + width: 172px + @include border-radius(2px) + :background + :color lighten($blue,45%) .edit, .unfollow_icon :display inline-block @@ -2388,6 +2539,10 @@ a.toggle_selector :height 30px :width 30px + .icons-monotone_close_exit_delete + :height 20px + :width 20px + #aspect_controls @include border-radius(2px) :background @@ -2415,12 +2570,25 @@ a.toggle_selector :margin 5px 0 .bottom_submit_section + :overflow hidden :display block :position relative + :text-align right form + :float left :display inline-block - :text-align right + .creation + :float right + + .icons-padlock-open, + .icons-padlock-closed + :float left + :height 16px + :width 16px + :margin + :left 4px + :top 2px #no_contacts :text-align center @@ -2429,10 +2597,6 @@ a.toggle_selector :color #eee :color #666 -.left - :position absolute - :left 0 - #notification_dropdown @include dropdown-shadow @@ -2441,7 +2605,7 @@ a.toggle_selector :left 300px :width 380px :display none - :margin-top 8px + :float left :color #444 @@ -2502,7 +2666,7 @@ a.toggle_selector :margin :left 0px :padding - :bottom 10px + :bottom 12px .cubbies_collage :position absolute @@ -2785,11 +2949,13 @@ a.toggle_selector .close @include opacity(0) @include transition(opacity, 0.2s) - - :float right :position relative - :top -9px + :top 1px :right -5px + :float right + .icons-deletelabel + :height 8px + :width 8px &:hover .close diff --git a/app/assets/templates/comment_tpl.jst.hbs b/app/assets/templates/comment_tpl.jst.hbs index 376f2047f..9b8172386 100644 --- a/app/assets/templates/comment_tpl.jst.hbs +++ b/app/assets/templates/comment_tpl.jst.hbs @@ -1,7 +1,7 @@ {{#if canRemove}}
- Deletelabel +
{{/if}} diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index 3ff029ebe..1635ac4ee 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -20,27 +20,30 @@