diff --git a/Gemfile b/Gemfile index b788a710b..69399faa2 100644 --- a/Gemfile +++ b/Gemfile @@ -109,6 +109,7 @@ gem 'gon', '4.0.2' group :assets do gem 'bootstrap-sass', '2.2.2.0' gem 'sass-rails', '3.2.6' + gem 'compass-rails', '1.0.3' # 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 45756b58b..e4789bb5f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -64,6 +64,7 @@ GEM activesupport (>= 3.2.0) childprocess (0.3.8) ffi (~> 1.0, >= 1.0.11) + chunky_png (1.2.6) client_side_validations (3.2.1) coderay (1.0.8) coffee-rails (3.2.2) @@ -73,6 +74,12 @@ GEM coffee-script-source execjs coffee-script-source (1.4.0) + 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) configurate (0.0.2) crack (0.3.2) cucumber (1.2.1) @@ -126,6 +133,7 @@ GEM foreman (0.61.0) thor (>= 0.13.6) formatador (0.2.4) + fssm (0.2.9) fuubar (1.1.0) rspec (~> 2.0) rspec-instafail (~> 0.2.0) @@ -414,6 +422,7 @@ DEPENDENCIES capybara (= 1.1.3) carrierwave (= 0.8.0) client_side_validations (= 3.2.1) + compass-rails (= 1.0.3) configurate (= 0.0.2) cucumber-rails (= 1.3.0) database_cleaner (= 0.9.1) diff --git a/app/assets/images/branding/white@2x.png b/app/assets/images/branding/white2x.png similarity index 100% rename from app/assets/images/branding/white@2x.png rename to app/assets/images/branding/white2x.png diff --git a/app/assets/images/icons/deletelabel.png b/app/assets/images/icons/deletelabel.png new file mode 100644 index 000000000..768ed6608 Binary files /dev/null and b/app/assets/images/icons/deletelabel.png differ diff --git a/app/assets/images/icons/padlock-closed.png b/app/assets/images/icons/padlock-closed.png index 25f3c8861..86a86a2d4 100644 Binary files a/app/assets/images/icons/padlock-closed.png and b/app/assets/images/icons/padlock-closed.png differ diff --git a/app/assets/images/icons/padlock-open.png b/app/assets/images/icons/padlock-open.png index c4cd4bffa..c6e03924a 100644 Binary files a/app/assets/images/icons/padlock-open.png and b/app/assets/images/icons/padlock-open.png differ diff --git a/app/assets/javascripts/app/views/aspect_view.js b/app/assets/javascripts/app/views/aspect_view.js index 67d15429a..beeaf7f10 100644 --- a/app/assets/javascripts/app/views/aspect_view.js +++ b/app/assets/javascripts/app/views/aspect_view.js @@ -3,6 +3,8 @@ app.views.Aspect = app.views.Base.extend({ tagName: "li", + className: 'sub_nav_item', + initialize: function(){ if (this.model.get('selected')){ this.$el.addClass('active'); @@ -16,6 +18,7 @@ app.views.Aspect = app.views.Base.extend({ toggleAspect: function(evt){ if (evt) { evt.preventDefault(); }; this.$el.toggleClass('active'); + this.$el.find('.icons-check_yes_ok').toggleClass('invisible') this.model.toggleSelected(); app.router.aspects_stream(); }, diff --git a/app/assets/javascripts/pages/users-getting-started.js b/app/assets/javascripts/pages/users-getting-started.js index c402ee35c..7044f921d 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 f841ca066..91136499b 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1,8 +1,17 @@ +@import 'compass' @import 'ui.css.sass' @import '_mixins.css.scss' @import '_flash_messages.scss' @import 'new_styles/_spinner' +/* ===== sprites ===== */ + +@import 'icons/*.png' +@import 'branding/*.png' +@import 'social_media_logos/*.png' +@include all-icons-sprites +@include all-branding-sprites +@include all-social_media_logos-sprites /* ====== media ====== */ .media :margin 10px @@ -140,6 +149,14 @@ header :border :bottom 1px solid #000 + a.header_root_link + :display inline-block + :margin-top 5px + + .branding-logo_small + :height 16px + :width 161px + a :color #CCC :color rgb(147,147,147) @@ -289,6 +306,8 @@ ul.as-selections .diaspora_header_logo :float left :margin-top -6px + :height 38px + :width 65px .stream audio @@ -412,7 +431,20 @@ ul.as-selections &:hover @include opacity(1) -.controls + .block_user + :display inline-block + + .icons-ignoreuser + :height 14px + :width 13px + + .delete + :display inline-block + + .icons-deletelabel + :height 8px + :width 8px + a:hover :text-decoration none @@ -720,12 +752,29 @@ 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 :margin :right 10px + .social_media_logos-facebook-16x16, + .social_media_logos-twitter-16x16, + .social_media_logos-tumblr-16x16, + .social_media_logos-email-16x16, + .social_media_logos-feed-16x16, + .social_media_logos-website-16x16 + :height 16px + :width 16px + #fileInfo :display inline :position relative @@ -784,7 +833,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) @@ -1167,36 +1220,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) @@ -1271,6 +1335,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 @@ -1313,12 +1382,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)) @@ -1359,8 +1426,11 @@ footer :border :top 1px solid #ddd - img - :margin-top 2px + .branding-powered_by_diaspora + :display inline-block + :margin-top 3px + :height 11px + :width 145px ul#footer_nav :margin 0 @@ -1638,13 +1708,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 @@ -1735,6 +1811,10 @@ ul#press_logos :padding :left 60px +.icons-monotone_email_letter_round + :height 128px + :width 128px + #email_invitation input :width 100% @@ -1859,6 +1939,10 @@ ul#press_logos :top 118px :right 5px + .icons-deletelabel + :height 8px + :width 8px + h3 :margin 0 :top 6px @@ -2142,7 +2226,6 @@ h1.tag :bottom 1px solid #ddd :padding 2px 0 :top 0 - :left 22px &.no_icon :padding @@ -2155,16 +2238,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 @@ -2244,14 +2358,33 @@ 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 + + .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 @@ -2264,12 +2397,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, @@ -2279,7 +2406,6 @@ ul.left_nav :cursor -moz-grabbing :cursor grabbing - a.aspect_selector, a.home_selector, a.tag_selector, a.element_selector, @@ -2288,9 +2414,8 @@ ul.left_nav :width 100% :padding 3px 7px - a.aspect_selector, a.home_selector, - a.tag_selector, + li.aspect_element, a.element_selector &:hover @include border-radius(2px) @@ -2299,38 +2424,53 @@ ul.left_nav :text :decoration none - .edit, .unfollow_icon + :margin-right 10px :margin-top 4px @include transition(opacity) @include opacity(0.3) :position absolute :display none - :background - :color white :padding 0 5px &: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 @@ -2348,9 +2488,16 @@ ul.left_nav &:hover :width auto - 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 + :width 117px :overflow hidden :position relative :display inline-block @@ -2362,22 +2509,40 @@ ul.left_nav :position absolute :top 0px :left 100px - @include horizontal-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)) - &:hover - :width auto - :z-index 0.9 &:hover:after :background none - li:hover, + li + :height 25px + .icons-check_yes_ok + :height 18px + :width 18px + :display inline-block + :margin-left 3px + :vertical-align middle + + .icons-deletelabel + :height 8px + :width 8px + :margin-top 4px + + li.unfollow, + li.sub_nav_item + :width 172px + + li.unfollow:hover, + li.sub_nav_item:hover, li.hover + @include border-radius(2px) + :background + :color lighten($blue,45%) .edit, .unfollow_icon - :display inline-block - :position absolute - :top 0 - :left 0 :z-index 1 + :display inline-block + .icons-monotone_close_exit_delete + :height 16px + :width 16px .user_card :margin-left 8px @@ -2447,6 +2612,10 @@ a.toggle_selector :height 30px :width 30px + .icons-monotone_close_exit_delete + :height 20px + :width 20px + #aspect_controls @include border-radius(2px) :background @@ -2478,12 +2647,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 @@ -2492,10 +2674,6 @@ a.toggle_selector :color #eee :color #666 -.left - :position absolute - :left 0 - #notification_dropdown @include dropdown-shadow @@ -2504,7 +2682,7 @@ a.toggle_selector :left 300px :width 380px :display none - :margin-top 8px + :float left :color #444 @@ -2565,7 +2743,7 @@ a.toggle_selector :margin :left 0px :padding - :bottom 10px + :bottom 12px .cubbies_collage :position absolute @@ -2630,6 +2808,18 @@ a.toggle_selector :padding 10px :bottom 0 + .social_media_logos-facebook-24x24, + .social_media_logos-twitter-24x24, + .social_media_logos-tumblr-24x24, + .social_media_logos-email-24x24, + .social_media_logos-feed-24x24, + .social_media_logos-website-24x24 + :height 24px + :width 24px + + a + :display inline-block + .cubbies_images :margin-left 15px @@ -2833,11 +3023,12 @@ a.toggle_selector .left_nav #new_tag_following + :width 137px :margin :left 24px input[type='text'] - :width 100% + :width 137px :font :size 13px @@ -2849,11 +3040,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/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index 5e51e1bed..8133e35fc 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,6 +1,10 @@ -
- - Pencil - -
+ +
+
+ +{{#if selected}} +
+{{else}} + +{{/if}} {{name}} diff --git a/app/assets/templates/comment_tpl.jst.hbs b/app/assets/templates/comment_tpl.jst.hbs index 9737a33e2..ad5b82c1a 100644 --- a/app/assets/templates/comment_tpl.jst.hbs +++ b/app/assets/templates/comment_tpl.jst.hbs @@ -8,7 +8,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..dc713f535 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -1,7 +1,8 @@
- + @@ -20,27 +21,30 @@