diff --git a/Changelog.md b/Changelog.md index eeb7dfbe5..b4ed76138 100644 --- a/Changelog.md +++ b/Changelog.md @@ -12,6 +12,8 @@ * Refactor the Twitter service model [#4387](https://github.com/diaspora/diaspora/pull/4387) * Refactor ConversationsController#create, move more stuff to User model [#4551](https://github.com/diaspora/diaspora/pull/4551) * Refactor MessagesController#create, move stuff to User model [#4556](https://github.com/diaspora/diaspora/pull/4556) +* Reorder the left bar side menu to put the stream first [#4569](https://github.com/diaspora/diaspora/pull/4569) +* Improve notifications and conversations views design on mobile [#4593](https://github.com/diaspora/diaspora/pull/4593) ## Bug fixes * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441) @@ -31,6 +33,10 @@ * Add a white background to images shown in the lightbox [#4475](https://github.com/diaspora/diaspora/issues/4475) * Refactor getting_started page, test if facebook is available, fix [#4520](https://github.com/diaspora/diaspora/issues/4520) * Avoid publishing empty posts [#4542](https://github.com/diaspora/diaspora/pull/4542) +* Force comments sort order in mobile spv [#4578](https://github.com/diaspora/diaspora/pull/4578) +* Fix getting started page for mobile [#4536](https://github.com/diaspora/diaspora/pull/4536) +* Refactor mobile header, fix [#4579](https://github.com/diaspora/diaspora/issues/4579) +* Fix avatar display on mobile profile [#4591](https://github.com/diaspora/diaspora/pull/4591) ## Features * Add oEmbed content to the mobile view [#4343](https://github.com/diaspora/diaspora/pull/4353) @@ -39,6 +45,7 @@ * Collapse aspect list and tag followings list when switching to other views [#4462](https://github.com/diaspora/diaspora/pull/4462) * Highlight current stream in left sidebar [#4445](https://github.com/diaspora/diaspora/pull/4445) * Added ignore user icon [#4417](https://github.com/diaspora/diaspora/pull/4417) +* Improve the management of the contacts visibility settings in an aspect [#4567](https://github.com/diaspora/diaspora/pull/4567) # 0.2.0.0 diff --git a/app/assets/images/icons/monotone_close_exit_delete.png b/app/assets/images/icons/monotone_close_exit_delete.png index 6de9eb18d..097fe640c 100644 Binary files a/app/assets/images/icons/monotone_close_exit_delete.png and b/app/assets/images/icons/monotone_close_exit_delete.png differ diff --git a/app/assets/javascripts/aspect-edit-pane.js b/app/assets/javascripts/aspect-edit-pane.js index 26aa42a5d..01b15896a 100644 --- a/app/assets/javascripts/aspect-edit-pane.js +++ b/app/assets/javascripts/aspect-edit-pane.js @@ -71,6 +71,9 @@ _.extend(app.tmp.ContactAspectsBox.prototype, { .addClass('added') .attr('data-membership_id', membership_id) // just to be sure... .data('membership_id', membership_id); + + el.find('div').removeClass('icons-monotone_plus_add_round') + .addClass('icons-monotone_check_yes'); }, removeFromAspect: function(evt) { @@ -97,6 +100,9 @@ _.extend(app.tmp.ContactAspectsBox.prototype, { .addClass('add') .removeAttr('data-membership_id') .removeData('membership_id'); + + el.find('div').removeClass('icons-monotone_check_yes') + .addClass('icons-monotone_plus_add_round'); }, _displayError: function(msg_id, contact_el) { diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index c009f7d1d..ac25683a3 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -12,6 +12,9 @@ @import 'opengraph' @import 'help' @import 'profile' +@import 'publisher' +@import 'facebox' +@import 'aspects' /* ====== media ====== */ .media @@ -527,249 +530,11 @@ form p.checkbox_select *:-moz-placeholder @include placeholder_styles -#publisher - :z-index 1 - :color $text-grey - :position relative - :margin - :top 0 - :bottom 0 - :padding 12px - :top 0 - :bottom 22px - :top 0 - - :border - :bottom 1px #eee solid - - form - textarea - :resize none - :height 50px - :margin 0 - - &.mention_popup - :padding 1px 12px - :margin - :bottom 0 - :border - :bottom none - - &.closed - .options_and_submit - :display none !important - - .counter - :display none - - &:not(.closed) - textarea - :margin - :bottom 30px - - .options_and_submit - :min-height 21px - :clear both - :position relative - :padding - :top 6px - :margin - :bottom -2px - - input - :display inline - - .public_toggle - :text - :align right - .dropdown - :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-wordpress-16x16, - .social_media_logos-email-16x16, - .social_media_logos-feed-16x16, - .social_media_logos-website-16x16 - :display inline-block - :height 16px - :width 16px - - #fileInfo - :display inline - :position relative - :top -2px - - #status_message_fake_text - :min-height 20px - - - .content_creation - :margin - :top 1em - - #file-upload - :bottom 1px !important - :display inline-block - :margin 0 - :padding .3em .3em 3px - :position absolute !important - :right 6px - :cursor pointer - - - input[type='file'] - :cursor pointer - :right initial !important - :height 100% - :width 100% - &::-webkit-file-upload-button - :cursor pointer - - img - @include opacity(0.4) - :vertical-align bottom - - &:hover - :color $text-dark-grey - :cursor pointer - - img - @include opacity(0.8) - - &:active - :color #444 - :text-shadow 0 1px 0 #fafafa - - img - @include opacity(1) - - &.loading - @include opacity(0.5) - -#publisher_textarea_wrapper - #hide_publisher - @include opacity(0.3) - :z-index 5 - :padding 3px - :position absolute - :right 6px - :margin-top 9px - - .icons-deletelabel - :height 14px - :width 14px - - &:hover - @include opacity(1) - - @include border-radius(2px) - - :border 1px solid #ccc - :background #fff - - &.active - :border 1px solid $border-dark-grey - - :position relative - :padding - :right 10px - - textarea - :z-index 2 - :border none - - &:focus - :outline 0 - :background transparent - - &.with_attachments - :padding-bottom 38px - - #photodropzone - :z-index 3 - :position absolute - :bottom 0 - :right 35px - :width 430px - :left 5px - :padding 0 - - li - :display inline-block - :margin-right 4px - img - :width 50px - :max-height 55px - .circle - @include border-radius(20px) - - :display none - :z-index 1 - :position absolute - :right -7px - :top -5px - :background - :color #333 - - :width 20px - :max-width 20px - :height 20px - :max-height 20px - - :border 1px solid #fff - - .x - :display none - :z-index 2 - :position absolute - :top -3px - :right -1px - :font - :size small - :weight bold - - &:hover - :cursor default - .circle - :display block - .x - :display block - - .counter - :position absolute - :font-size 13px - :padding 12px 0 0 5px - .warning - :color orange - .exceeded - :color red .field_with_submit input[type='text'] :width 82% :display inline -#publisher.closed - #publisher_textarea_wrapper - #hide_publisher - :display none - .dim @include opacity(0.3) @@ -861,9 +626,6 @@ input[type="search"] :-webkit-appearance textfield :-moz-appearance textfield -.facebox_content - :display none - #photo_edit_options :display none @@ -926,36 +688,6 @@ input[type="search"] :height 100px :width 100px -#publisher_photo_upload - :position absolute - :display inline - :left 600px - :top 0 - :z-index 10 - -#profile_photo_upload - :margin - :top 5px - :min-height 100px - :position relative - - img - @include border-radius(5px) - @include box-shadow(0,1px,2px,#666) - - :position absolute - :left 0 - :height 100px - :width 100px - - &.avatar - @include transition(opacity, 0.5s) - &.loading - @include opacity(0.3) - - :padding - :left 120px - h3 span.current_gs_step :color #22C910 @@ -1007,125 +739,6 @@ ul#request_result :bottom 2.5em :padding 0 -.contact_list_controls - :height 30px - :margin - :bottom 5px - :vertical-align middle - :position relative - -#contact_list_search - :width 200px - :margin - :top 0 - :float right - -.contact_list, -.aspect_list - @include border-radius(3px) - - :height 300px - :max-height 300px - - :overflow-y auto - :overflow-x hidden - - :border 1px solid #bbb - - :background - :color rgb(252,252,252) - - .avatar - :float left - :height 50px - :width 50px - :margin - :right 10px !important - - .button.share - :padding - :right 20px - .right - :right 8px - :top 3px - - .icons-monotone_plus_add_round, - .icons-monotone_check_yes - :height 20px - :width 20px - - > .contacts - :margin 0 - :padding 5px - :right 0 - - > .contact - @include border-radius(3px) - @include box-shadow(0, 1px, 5px, #ccc) - :background - :color #fff - :float left - :overflow-x hidden - :overflow-y hidden - - :position relative - :display inline-block - - &.hidden - :display none - - :height 50px - :width 170px - - :margin - :bottom 5px - :right 5px - - :padding 5px - :border 1px solid $border-dark-grey - - > .name - :white-space nowrap - - &.remote_friend - :width 285px - - a.button - @include box-shadow(0,0,0) - - :border - :bottom none - - :min-width auto - :float right - :padding 2px 4px - :margin-top 5px - - &.added - @include linear-gradient(rgb(158,255,153), rgb(92,199,86)) - - &.added.remove - @include linear-gradient(rgb(255,153,153), rgb(199,86,86)) - - &:active - @include linear-gradient(rgb(199,119,119), rgb(130,55,55)) - -.aspect_list - :height 300px - :max-height 300px - - .name - :left 1em - - ul - > li - :padding 1em - :height 1em - - .right - :top 2px - :right 1em - #signup_field :margin :top -200px @@ -1364,63 +977,6 @@ ul#press_logos #inner_account_delete :width 810px -#aspect_edit_pane - :width 810px - .person_tiles - .tile - @include border-radius(2px) - - :padding 6px - :left 65px - :margin 3px - :left 0 - :display inline-block - :width 126px - :height 50px - - :border 1px solid #eee - - :position relative - - img - :position absolute - :left 6px - - &.larger - :width 650px - -#facebox_header - :position relative - :padding - :bottom 10px - - .right - :z-index 3 - :right 1em - :top 14px - :color #ccc - - img - :vertical - :align top - :position relative - :top 0px - - h3, - h4 - .description - :margin - :top 0px - - .tiny_text - :font - :size 11px - :weight normal - -#aspect_edit_controls - :margin - :top 8px - .icons-monotone_email_letter_round :height 128px :width 128px @@ -1735,9 +1291,6 @@ ul#press_logos :font :size 12px -#contact_visibility_padlock:hover - @include opacity(0.7) - .side_stream .stream_element :padding 10px 0 @@ -1943,10 +1496,6 @@ h1.tag &:active @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%)) -#facebox - input[type='text'], input.text - :width 98% - #client-application-image :max-width 100% @@ -2183,102 +1732,6 @@ a.toggle_selector &:hover :color $link-grey -.no_contacts - :position relative - :text-align center - :top 50px - -#people_stream.contacts - .stream_element - :padding 10px - :min-height 30px - .right - :top 16px - - a - @include opacity(0.3) - - &:hover - @include opacity(1) - - .from - :position relative - a - :color rgb(85,80,80) - - .content - :padding - :left 40px - .info - :margin - :top -2px - - .avatar - :height 30px - :width 30px - - .icons-monotone_close_exit_delete - :height 20px - :width 20px - -#aspect_controls - @include border-radius(2px) - :background - :color #fafafa - :border 1px solid #ccc - :padding 10px - :min-height 23px - - .conversation_button - :float right - -#selected_aspect_contacts - .avatar - :height 32px - :width 32px - :margin - :bottom -2px - -.stream-faces - a:hover - :text-decoration none - -#view_all_contacts_link - @include border-radius(2px) - :display block - :padding 5px - :border 1px dotted #aaa - :text-align center - :margin 5px 0 - -.bottom_submit_section - :overflow hidden - :display block - :position relative - :text-align right - - form - :float left - :display inline-block - .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 - :padding 10px - :background - :color #eee - :color $text-dark-grey - .cubbies_collage :position absolute :right 50px @@ -2678,26 +2131,6 @@ body :background :color #e8f7ff -#publisher-images - #locator - :bottom 1px !important - :display inline-block - :margin 0 - :position absolute !important - :right 30px - :cursor pointer - img - :padding-top 2px - @include opacity(0.4) - &:hover - :color $text-dark-grey - :cursor pointer - img - @include opacity(0.8) - .btn - :height 19px - :width 19px - #location :border 1px solid $border-dark-grey :height 20px diff --git a/app/assets/stylesheets/aspects.css.scss b/app/assets/stylesheets/aspects.css.scss new file mode 100644 index 000000000..52279a661 --- /dev/null +++ b/app/assets/stylesheets/aspects.css.scss @@ -0,0 +1,240 @@ + +/* -- Used in contacts/index.html.haml -- */ +#aspect_controls { + @include border-radius(2px); + background-color: #fafafa; + border: 1px solid #ccc; + padding: 10px; + min-height: 23px; + + .button, .button_to { + margin-right: 5px; + } + + .button_to { display: inline-block; } + + .contact_visibility_padlock, + .modify_aspect, + .icons-mail, + .icons-monotone_close_exit_delete { + margin-left: 4px; + margin-bottom: -2px; + display: inline-block; + } + + .icons-mail { + width: 16px; + height: 13px; + margin-bottom: -1px; + } +} + +.contact_visibility_padlock { + height: 16px; + width: 16px; + /* -- To remove when the facebox will be deleted -- */ + display: inline-block; + margin-left: 4px; + margin-bottom: -2px; +} + +#people_stream.contacts { + .stream_element { + padding: 10px; + min-height: 30px; + + .float-right { + top: 16px; + + a { + @include opacity(1); + + &:hover { + @include opacity(0.6); + } + } + } + + .info { margin-top: -2px; } + } + + .avatar { + height: 30px; + width: 30px; + } + + .icons-monotone_close_exit_delete { + height: 14px; + width: 14px; + } + + .no_contacts { + text-align: center; + margin-top: 50px; + } +} + +#selected_aspect_contacts .avatar { + height: 32px; + width: 32px; + margin-bottom: -2px; +} + +.stream-faces a:hover { text-decoration: none; } + +#view_all_contacts_link { + @include border-radius(2px); + display: block; + padding: 5px; + border: 1px dotted #aaa; + text-align: center; + margin: 5px 0px; +} + +#no_contacts { + text-align: center; + padding: 10px; + background-color: #eee; + color: $text-dark-grey; +} + +/* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */ +#aspect_edit_controls { margin-top: 8px; } +#aspect_edit_pane { + width: 772px; + + .contact_list_controls { + height: 30px; + margin-bottom: 5px; + } + + #contact_list_search { + width: 200px; + margin-top: 0px; + float: right; + } + + .contact_list, + .aspect_list { + @include border-radius(3px); + height: 300px; + max-height: 300px; + overflow-y: auto; + overflow-x: hidden; + border: 1px solid #bbb; + background-color: rgb(252,252,252); + + .avatar { + float: left; + height: 50px; + width: 50px; + margin-right: 10px !important; + } + + .button.share { + padding-right: 20px; + .right { + right: 8px; + top: 3px; + } + } + + .icons-monotone_plus_add_round, + .icons-monotone_check_yes { + height: 20px; + width: 20px; + } + + & > .contacts { + margin: 0px; + padding: 5px; + padding-right: 0px; + + & > .contact { + @include border-radius(3px); + @include box-shadow(0, 1px, 5px, #ccc); + position: relative; + display: inline-block; + float: left; + height: 50px; + width: 170px; + overflow-x: hidden; + overflow-y: hidden; + margin-bottom: 5px; + margin-right: 5px; + padding: 5px; + background-color: #fff; + border: 1px solid $border-dark-grey; + + &.hidden { display: none; } + & > .name { white-space: nowrap; } + &.remote_friend { width: 285px; } + + a.button { + @include box-shadow(0,0,0); + border-bottom: none; + min-width: auto; + float: right; + padding: 2px 4px; + margin-top: 5px; + + &.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); } + &.added.remove { + @include linear-gradient(rgb(255,153,153), rgb(199,86,86)); + + &:active { @include linear-gradient(rgb(199,119,119), rgb(130,55,55)); } + } + } + } + } + } + + .aspect_list { + height: 300px; + max-height: 300px; + + .name { left: 1em; } + + ul > li { + padding: 1em; + height: 1em; + + .right { + top: 2px; + right: 1em; + } + } + } + + .person_tiles .tile { + @include border-radius(2px); + padding: 6px; + padding-left: 65px; + margin: 3px; + margin-left: 0px; + display: inline-block; + width: 126px; + height: 50px; + border: 1px solid #eee; + position: relative; + + img { + position: absolute; + left: 6px; + } + } + + &.larger { width: 650px; } + + .bottom_submit_section { + margin-top: 12px; + + form { + display: inline-block; + } + + .creation { + float: right; + } + } +} diff --git a/app/assets/stylesheets/facebox.css.scss b/app/assets/stylesheets/facebox.css.scss new file mode 100644 index 000000000..18b07f2a3 --- /dev/null +++ b/app/assets/stylesheets/facebox.css.scss @@ -0,0 +1,32 @@ +.facebox_content { display: none; } + +#facebox { + input[type='text'], input.text { width: 98%; } +} + +#facebox_header { + position: relative; + padding-bottom: 10px; + + .right { + z-index: 3; + right: 1em; + top: 14px; + color: #ccc; + + img { + vertical-align: top; + position: relative; + top: 0px; + } + } + + h3, h4 { + .description { margin-top: 0px; } + } + + .tiny_text { + font-size: 11px; + font-weight: normal; + } +} diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index 6a4f8c37b..abf4a50aa 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -7,8 +7,7 @@ a { color: #2489ce; - text: { - decoration: none; }; + text-decoration: none; } body { @@ -21,9 +20,12 @@ body { padding-top: 55px; } +h3 { + margin-top: 0px; +} + .message { - padding: { - left: 2px; }; + padding-left: 2px; } .stream_element, @@ -288,104 +290,94 @@ body { img { height: 90px; width: 90px; - margin: { - right: 10px; - } - position: absolute; + margin-right: 10px; + float: left; } + .content { - padding: { - left: 100px; - }; + padding-left: 100px; } .description { font: { weight: normal; - size: small; }; - color: $text-grey; } } + size: small; + }; + color: $text-grey; + } +} + +.profile_stream { + clear: both; + padding-top: 12px; +} .right { - float: right; } - -.navbar { - @include box-shadow(0,1px,2px,#333); -} - -.navbar-inner { - @include box-shadow(0,1px,2px,#333); - - background: { - image: image-url("header-bg-long.jpg"); - } - - width: 100%; - z-index: 10; - - border: { - bottom: 1px solid #222; - } -} - -#nav_badges { - display: inline-block; float: right; - padding: 4px 12px; +} + +header { + position: fixed; + top: 0px; + left: 0px; + right: 0px; + min-width: 250px; + z-index: 10; + background: url("header-bg-long.jpg") rgb(40,35,35); + @include box-shadow(0, 1px, 2px, #333); + border-bottom: 1px solid #222; + + #header_title { display: inline-block; } - a:hover { - text-decoration: none; + #nav_badges { + float: right; + margin: 4px 12px; + + .badge { + display: inline; + margin-left: 3px; + padding: 8px 3px; + padding-bottom: 9px; + font-weight: bold; + font-size: smaller; + width: 28px; + } + + .badge:hover .badge_count { + background-color: #bd0902; + } + + a { + padding: 5px 0px; + } } - - .badge { - position: relative; - display: inline; - margin-left: 3px; - padding: 8px 3px; - padding-bottom: 9px; - font-weight: bold; + + .badge_count { + -moz-border-radius: 2px 2px 2px 2px; + -webkit-border-radius: 2px 2px 2px 2px; + border-radius: 2px 2px 2px 2px; + z-index: 3; + position: absolute; + top: 1px; + padding: 0 2px; + padding-bottom: 1px; + background-color: $red; + line-height: 12px; + color: white; font-size: smaller; - width: 28px; } - - .badge:hover .badge_count { - background-color: #bd0902; + + #notification { + right: 140px; } - - a { - padding: 5px 0px; + + #conversation { + right: 110px; } -} -.badge_count { - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius: 2px 2px 2px 2px; - border-radius: 2px 2px 2px 2px; - z-index: 3; - position: absolute; - top: 1px; - padding: 0 2px; - padding-bottom: 1px; - background-color: $red; - line-height: 12px; - color: white; - font-size: smaller; -} - -#notification { - right: 140px; -} - -#conversation { - right: 110px; -} - -.badge-inverse { - background-color: #333333 !important; -} - -#header_title { - position: relative; - top: -3px; + .badge-inverse { + background-color: #333333 !important; + } } footer { @@ -686,6 +678,12 @@ select { .notifications { list-style: none; + margin: 0px; + clear: right; +} + +.notifications_for_day { + margin-left: 12px; } .notification_day_header { @@ -714,10 +712,6 @@ display: inline-block; width: 28px; } -#conversation_inbox { - margin: 10px 0 0 10px; -} - .message_count { border-radius: 2px 2px 2px 2px; float: right; @@ -802,7 +796,6 @@ form#new_conversation.new_conversation { border-bottom: 1px solid $border-dark-grey; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 5px; - margin: 5px 0 5px 15px; padding: 5px 10px; h4 { font-size: 14px; diff --git a/app/assets/stylesheets/publisher.css.scss b/app/assets/stylesheets/publisher.css.scss new file mode 100644 index 000000000..43f5f60d4 --- /dev/null +++ b/app/assets/stylesheets/publisher.css.scss @@ -0,0 +1,303 @@ +#publisher { + z-index: 1; + color: $text-grey; + position: relative; + margin-top: 0; + margin-bottom: 0; + padding: 0 12px 22px 12px; + top: 0; + border-bottom: 1px #eee solid; + + form { + textarea { + resize: none; + height: 50px; + margin: 0; + } + } + + &.mention_popup { + padding: 1px 12px; + margin-bottom: 0; + border-bottom: none; + } + + &.closed { + .options_and_submit { + display: none !important; + } + + .counter { + display: none; + } + } + + &:not(.closed) { + textarea { + margin-bottom: 30px; + } + } + + .options_and_submit { + min-height: 21px; + clear: both; + position: relative; + padding-top: 6px; + margin-bottom: -2px; + + input { + display: inline; + } + + .public_toggle { + text-align: right; + .dropdown { + 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-wordpress-16x16, + .social_media_logos-email-16x16, + .social_media_logos-feed-16x16, + .social_media_logos-website-16x16 { + display: inline-block; + height: 16px; + width: 16px; + } + } + + #fileInfo { + display: inline; + position: relative; + top: -2px; + } + } + + #status_message_fake_text { + min-height: 20px; + } + + .content_creation { + margin-top: 1em; + } + + #file-upload { + bottom: 1px !important; + display: inline-block; + margin: 0; + padding: .3em .3em 3px; + position: absolute !important; + right: 6px; + cursor: pointer; + + input[type='file'] { + cursor: pointer; + right: initial !important; + height: 100%; + width: 100%; + &::-webkit-file-upload-button { + cursor: pointer; + } + } + + img { + @include opacity(0.4); + vertical-align: bottom; + } + + &:hover { + color: $text-dark-grey; + cursor: pointer; + + img { + @include opacity(0.8); + } + } + + &:active { + color: #444; + text-shadow: 0 1px 0 #fafafa; + + img { + @include opacity(1); + } + } + + &.loading { + @include opacity(0.5); + } + } +} + +#publisher_textarea_wrapper { + #hide_publisher { + @include opacity(0.3); + z-index: 5; + padding: 3px; + position: absolute; + right: 6px; + margin-top: 9px; + + .icons-deletelabel { + height: 14px; + width: 14px; + } + + &:hover { + @include opacity(1); + } + } + + @include border-radius(2px); + + border: 1px solid #ccc; + background: #fff; + + &.active { + border: 1px solid $border-dark-grey; + } + + position: relative; + padding-right: 10px; + + textarea { + z-index: 2; + border: none; + + &:focus { + outline: 0; + background: transparent; + } + } + + &.with_attachments { + padding-bottom: 38px; + } + + #photodropzone { + z-index: 3; + position: absolute; + bottom: 0; + right: 35px; + width: 430px; + left: 5px; + padding: 0; + + li { + display: inline-block; + margin-right: 4px; + img { + width: 50px; + max-height: 55px; + } + .circle { + @include border-radius(20px); + + display: none; + z-index: 1; + position: absolute; + right: -7px; + top: -5px; + background-color: #333; + + width: 20px; + max-width: 20px; + height: 20px; + max-height: 20px; + border: 1px solid #fff; + } + + .x { + display: none; + z-index: 2; + position: absolute; + top: -3px; + right: -1px; + font-size: small; + font-weight: bold; + } + + &:hover { + cursor: default; + .circle { + display: block; + } + .x { + display: block; + } + } + } + } + + .counter { + position: absolute; + font-size: 13px; + padding: 12px 0 0 5px; + } + .warning { + color: orange; + } + .exceeded { + color: red; + } +} + +#publisher.closed { + #publisher_textarea_wrapper { + #hide_publisher { + display: none; + } + } +} + +#publisher_photo_upload { + position: absolute; + display: inline; + left: 600px; + top: 0; + z-index: 10; +} + +#publisher-images { + #locator { + bottom: 1px !important; + display: inline-block; + margin: 0; + position: absolute !important; + right: 30px; + cursor: pointer; + img { + padding-top: 2px; + @include opacity(0.4); + } + &:hover { + color: $text-dark-grey; + cursor: pointer; + img { + @include opacity(0.8); + } + } + } + .btn { + height: 19px; + width: 19px; + } +} diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss index 177c60398..b458ad8dd 100644 --- a/app/assets/stylesheets/sidebar.css.scss +++ b/app/assets/stylesheets/sidebar.css.scss @@ -3,6 +3,7 @@ $bluebg: #e7f2f7; #home_user_badge { min-height: 50px; margin-bottom: 20px; + margin-left: 4px; img { float: left; @@ -44,7 +45,7 @@ $bluebg: #e7f2f7; .hoverable { display: block; margin-right: 6px; - padding: 4px 4px 4px 0; + padding: 4px; &:hover { background-color: $bluebg; } } @@ -90,10 +91,13 @@ $bluebg: #e7f2f7; .selected + a { color: #333333; } +} - .modify_aspect { - background: url("icons/pencil.png") no-repeat; - } +.modify_aspect { + background: url("icons/pencil.png") no-repeat; + width: 12px; + height: 12px; + display: inline-block; } #tags_list { diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index 2965181d1..bd3acf7ea 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,4 +1,4 @@ - + {{#if selected}}
{{else}} diff --git a/app/helpers/aspects_helper.rb b/app/helpers/aspects_helper.rb index f146d8e1a..a4260ebe4 100644 --- a/app/helpers/aspects_helper.rb +++ b/app/helpers/aspects_helper.rb @@ -40,4 +40,19 @@ module AspectsHelper remove_from_aspect_button(membership.id, aspect.id, person.id) end end + + def aspect_visibility_link(aspect) + if aspect.contacts_visible? + icon = 'icons-padlock-open' + title = t('aspects.edit.aspect_list_is_visible'); + else + icon = 'icons-padlock-closed' + title = t('aspects.edit.aspect_list_is_not_visible'); + end + + link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link button', title: title, method: :put, remote: true do + concat t('aspects.edit.set_visibility') + concat content_tag(:span, nil, class: "contact_visibility_padlock " + icon) + end + end end diff --git a/app/helpers/contacts_helper.rb b/app/helpers/contacts_helper.rb index 2fa9c9beb..cd7ffe32b 100644 --- a/app/helpers/contacts_helper.rb +++ b/app/helpers/contacts_helper.rb @@ -24,8 +24,12 @@ module ContactsHelper def start_a_conversation_link(aspect, contacts_size) suggested_limit = 16 - conv_opts = { :class => "button conversation_button", :rel => "facebox"} - conv_opts[:title] = t('.many_people_are_you_sure', :suggested_limit => suggested_limit) if contacts_size > suggested_limit - link_to t('.start_a_conversation'), new_conversation_path(:aspect_id => aspect.id, :name => aspect.name), conv_opts + conv_opts = { class: "button conversation_button", rel: "facebox"} + conv_opts[:title] = t('.many_people_are_you_sure', suggested_limit: suggested_limit) if contacts_size > suggested_limit + + link_to new_conversation_path(aspect_id: aspect.id, name: aspect.name), conv_opts do + concat t('.start_a_conversation') + concat content_tag(:span, nil, class: "icons-mail") + end end end diff --git a/app/views/aspects/edit.html.haml b/app/views/aspects/edit.html.haml index 102b4cc30..59610fd95 100644 --- a/app/views/aspects/edit.html.haml +++ b/app/views/aspects/edit.html.haml @@ -17,16 +17,8 @@ - if @contacts.count > 0 = render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts - %br .bottom_submit_section = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete' - - if @aspect.contacts_visible - = link_to content_tag(:div, nil, :class => 'icons-padlock-open', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_visible')), - aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true - - - else - = link_to content_tag(:div, nil, :class => 'icons-padlock-closed', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')), - aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true - + = aspect_visibility_link(@aspect) = submit_tag t('.done'), :class => 'button creation', :rel => 'close' diff --git a/app/views/aspects/toggle_contact_visibility.js.erb b/app/views/aspects/toggle_contact_visibility.js.erb index fe1ae5e2e..1470cadb1 100644 --- a/app/views/aspects/toggle_contact_visibility.js.erb +++ b/app/views/aspects/toggle_contact_visibility.js.erb @@ -1,14 +1,15 @@ $(document).ready(function() { - var padlockImg = $("#contact_visibility_padlock"); + var padlockImg = $(".contact_visibility_padlock"); + var linkText = $(".contact_visibility_link"); if (padlockImg.hasClass('icons-padlock-open')) { padlockImg.removeClass('icons-padlock-open'); padlockImg.addClass('icons-padlock-closed'); - padlockImg.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>"); + linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>"); } else { padlockImg.removeClass('icons-padlock-closed'); padlockImg.addClass('icons-padlock-open'); - padlockImg.attr('title', "<%= t('aspects.edit..aspect_list_is_visible') %>"); + linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_visible') %>"); } }); diff --git a/app/views/contacts/_aspect_listings.haml b/app/views/contacts/_aspect_listings.haml index 1b479e3a8..c78e8eec8 100644 --- a/app/views/contacts/_aspect_listings.haml +++ b/app/views/contacts/_aspect_listings.haml @@ -14,7 +14,6 @@ %li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)} .item_count = aspect.contacts.size - %a.action.modify_aspect{:href => "/aspects/#{aspect.id}/edit", :rel => "facebox"} .icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) } %a.selectable{:href => contacts_path(:a_id => aspect.id)} = aspect diff --git a/app/views/contacts/_contact.html.haml b/app/views/contacts/_contact.html.haml index 79797990c..60ab71c5b 100644 --- a/app/views/contacts/_contact.html.haml +++ b/app/views/contacts/_contact.html.haml @@ -1,7 +1,7 @@ .stream_element{:id => contact.person_id} - .float-right - = contact_aspect_dropdown(contact) .media + .float-right + = contact_aspect_dropdown(contact) .img = person_image_link(contact.person, :size => :thumb_small) .bd diff --git a/app/views/contacts/index.html.haml b/app/views/contacts/index.html.haml index fa0e678c0..5ffdc67b4 100644 --- a/app/views/contacts/index.html.haml +++ b/app/views/contacts/index.html.haml @@ -16,13 +16,19 @@ .span-18.last #people_stream.stream.contacts - - if @contacts_size > 0 - - if @aspect - #aspect_controls - - if @contacts_size < 20 - = start_a_conversation_link(@aspect, @contacts_size) - = link_to t('.add_to_aspect', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox" + - if @aspect + #aspect_controls + - if @contacts_size > 0 && @contacts_size < 20 #TODO Fla: why 20? Technical restriction? We already warn the user if > 16 + = start_a_conversation_link(@aspect, @contacts_size) + = link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" do + = t('aspects.edit.manage') + %span.modify_aspect + = aspect_visibility_link(@aspect) + = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'button delete' do + = t('delete') + %span.icons-monotone_close_exit_delete + - if @contacts_size > 0 = render @contacts = will_paginate @contacts diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index 87ba79c98..b66b1e500 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -46,35 +46,32 @@ = yield(:head) %body - .navbar.navbar-fixed-top - .navbar-inner - .container{:style => "position: relative;"} - = link_to(image_tag('branding/header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), stream_path) + %header + = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title') - - if user_signed_in? - #nav_badges - = link_to(image_tag('icons/my_activity.png', :class => 'my_activity'), activity_stream_path, :class => "badge badge-inverse", :id => "my_activity_badge") - = link_to(image_tag('icons/notifications_grey.png', :height => 16, :width => 16, :id => 'notification-flag'), notifications_path, :class => "badge badge-inverse", :id => "notification_badge") - - if current_user.unread_notifications.count > 0 - .badge_count{:id => "notification"} - = current_user.unread_notifications.count - = link_to(image_tag('icons/mail_grey.png', :height => 11, :width => 17), conversations_path, :class => "badge badge-inverse", :id => "conversations_badge") - - if current_user.unread_message_count > 0 - .badge_count{:id => "conversation"} - = current_user.unread_message_count - = link_to(image_tag('icons/search_grey.png', :height => 14, :width => 14), people_path, :class => "badge badge-inverse", :id => "people_badge") - = link_to(image_tag('icons/user_grey.png', :height => 16, :width => 16), contacts_path, :class => "badge badge-inverse", :id => "contacts_badge") - - if yield(:header_action).present? - = yield(:header_action) - - else - = link_to(image_tag('icons/compose_mobile2.png', :class => 'compose_icon'), new_status_message_path) + - if user_signed_in? + #nav_badges + = link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge") + = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge") + - if current_user.unread_notifications.count > 0 + .badge_count{id: "notification"} + = current_user.unread_notifications.count + = link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge") + - if current_user.unread_message_count > 0 + .badge_count{id: "conversation"} + = current_user.unread_message_count + = link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge") + = link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge") + - if yield(:header_action).present? + = yield(:header_action) + - else + = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path) #main.container{:role => "main"} - .row - - if current_page?(:activity_stream) - %h3 - = t('streams.activity.title') - = yield + - if current_page?(:activity_stream) + %h3 + = t('streams.activity.title') + = yield - if user_signed_in? = render :partial =>'shared/footer' diff --git a/app/views/notifications/index.mobile.haml b/app/views/notifications/index.mobile.haml index f0b93d72a..ac046a65e 100644 --- a/app/views/notifications/index.mobile.haml +++ b/app/views/notifications/index.mobile.haml @@ -1,10 +1,10 @@ -.right - = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => 'btn' - %h3 = t('.notifications') -%ul.stream.notifications +.right + = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => 'btn' + +%ul.notifications - @group_days.each do |day, notes| %li .notification_day_header diff --git a/app/views/people/show.mobile.haml b/app/views/people/show.mobile.haml index 381578ded..f7fdd3233 100644 --- a/app/views/people/show.mobile.haml +++ b/app/views/people/show.mobile.haml @@ -2,10 +2,6 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -- content_for :page_title do - %h1 - diaspora* - .span12 #author_info = person_image_tag @person, :thumb_medium @@ -15,7 +11,7 @@ %span.description = @person.diaspora_handle -.span12 +.span12.profile_stream - if @stream.stream_posts.length > 0 - if @post_type == :photos = render 'photos/index', :photos => @stream.stream_posts diff --git a/app/views/shared/_contact_list.html.haml b/app/views/shared/_contact_list.html.haml index d75bdda9a..8324da0d3 100644 --- a/app/views/shared/_contact_list.html.haml +++ b/app/views/shared/_contact_list.html.haml @@ -4,8 +4,8 @@ .contact_list_controls - = search_field_tag :contact_search, "", :id => "contact_list_search", :class => 'contact_list_search', :results => 5, :placeholder => t('.all_contacts') - = t('contacts', :count =>@aspect_contacts_count) + = search_field_tag :contact_search, "", id: "contact_list_search", class: 'contact_list_search', results: 5, placeholder: t('.all_contacts') + = t('contacts', count: @aspect_contacts_count) .contact_list.searchable %ul.contacts diff --git a/app/views/shared/_stream_element.mobile.haml b/app/views/shared/_stream_element.mobile.haml index ff833468d..18c5bf68e 100644 --- a/app/views/shared/_stream_element.mobile.haml +++ b/app/views/shared/_stream_element.mobile.haml @@ -43,7 +43,7 @@ = post.likes.size %ul.comments - = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post} + = render :partial => 'comments/comment', :collection => post.comments.order('created_at ASC') %li.comment.add_comment_bottom_link_container - if user_signed_in? diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml index 5b63ae75d..82458ace6 100644 --- a/app/views/streams/main_stream.html.haml +++ b/app/views/streams/main_stream.html.haml @@ -29,12 +29,12 @@ = link_to current_user.first_name, local_or_remote_person_path(current_user.person) %ul#stream_selection + %li.hoverable{:data => {:stream => 'stream'}} + = link_to t("streams.multi.title"), stream_path, :rel => 'backbone' %li.hoverable{:data => {:stream => 'activity'}} = link_to t("streams.activity.title"), activity_stream_path, :rel => 'backbone' %li.hoverable{:data => {:stream => 'mentions'}} = link_to t('streams.mentions.title'), mentioned_stream_path, :rel => 'backbone' - %li.hoverable{:data => {:stream => 'stream'}} - = link_to t("streams.multi.title"), stream_path, :rel => 'backbone' %li.all_aspects = render 'aspects/aspect_listings', :stream => @stream %li diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml index 5988490ef..1a52a6ce7 100644 --- a/app/views/tags/show.haml +++ b/app/views/tags/show.haml @@ -30,8 +30,7 @@ %h2 = @stream.display_tag_name %small - = t('.followed_by') - = t('people', :count => @stream.tag_follow_count) + = t('.followed_by_people', count: @stream.tag_follow_count) - if current_user = render 'shared/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, :for_all_aspects => true, :aspect => @stream.aspect diff --git a/app/views/users/getting_started.mobile.haml b/app/views/users/getting_started.mobile.haml index 321178bf4..7f68d9c84 100644 --- a/app/views/users/getting_started.mobile.haml +++ b/app/views/users/getting_started.mobile.haml @@ -4,7 +4,6 @@ - content_for :head do = javascript_include_tag :jquery - = javascript_include_tag 'fileuploader-custom' :javascript $(document).ready(function () { diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index d0c67a54c..5315f58aa 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -159,10 +159,12 @@ en: remove_aspect: "Delete this aspect" confirm_remove_aspect: "Are you sure you want to delete this aspect?" add_existing: "Add an existing contact" + set_visibility: "Set visibility" + manage: "Manage" done: "Done" rename: "rename" - aspect_list_is_visible: "aspect list is visible to others in aspect" - aspect_list_is_not_visible: "aspect list is hidden to others in aspect" + aspect_list_is_visible: "Contacts in this aspect are able to see each other." + aspect_list_is_not_visible: "Contacts in this aspect are not able to see each other." update: "update" updating: "updating" aspect_contacts: @@ -376,7 +378,7 @@ en: foundation_website: "diaspora foundation website" third_party_tools: "third party tools" getting_started_tutorial: "'Getting started' tutorial series" - getting_help: + getting_help: title: "Getting help" getting_started_q: "Help! I need some basic help to get me started!" getting_started_a: "You're in luck. Try the %{tutorial_series} on our project site. It will take you step-by-step through the registration process and teach you all the basic things you need to know about using diaspora*." @@ -1088,7 +1090,10 @@ en: follow: "Follow #%{tag}" following: "Following #%{tag}" stop_following: "Stop Following #%{tag}" - followed_by: 'followed by' + followed_by_people: + zero: "followed by nobody" + one: "followed by one person" + two: "followed by %{count} people" none: "The empty tag does not exist!" tag_followings: create: diff --git a/features/desktop/contacts.feature b/features/desktop/contacts.feature index 3e4817495..9e59a9c93 100644 --- a/features/desktop/contacts.feature +++ b/features/desktop/contacts.feature @@ -30,7 +30,7 @@ Feature: show contacts And I add the person to my "Unicorns" aspect And I am on the contacts page And I follow "Unicorns" - And I follow "add contacts to Unicorns" + And I follow "Manage" And I press the first "a.contact_visibility_link" in the modal window And I press "Done" in the modal window And I sign out diff --git a/features/desktop/manages_aspects.feature b/features/desktop/manages_aspects.feature index 492a569e2..c5c8b2640 100644 --- a/features/desktop/manages_aspects.feature +++ b/features/desktop/manages_aspects.feature @@ -29,16 +29,16 @@ Feature: User manages contacts And I press "Delete" in the modal window And I confirm the alert Then I should be on the contacts page - And I should not see "People" within "#aspect_nav" + And I should not see "People" within "#aspects_list" Scenario: deleting an aspect from homepage Given I am signed in And I have an aspect called "People" When I am on the aspects page And I click on "People" aspect edit icon - And I press "Delete" in the modal window + And I follow "Delete" within "#aspect_controls" And I confirm the alert - Then I should be on the aspects page + Then I should be on the contacts page And I should not see "People" within "#aspects_list" Scenario: Editing the aspect memberships of a contact from the aspect edit facebox diff --git a/features/desktop/stops_following_users.feature b/features/desktop/stops_following_users.feature index 27c5e2552..30a5b97af 100644 --- a/features/desktop/stops_following_users.feature +++ b/features/desktop/stops_following_users.feature @@ -32,7 +32,7 @@ Feature: Unfollowing And I go to the contacts page And I follow "Besties" - And I follow "add contacts to Besties" + And I follow "Manage" And I press the first ".added" within "#facebox .contact_list ul > li:first-child" diff --git a/features/mobile/multiphoto.feature b/features/mobile/multiphoto.feature index b3c996aff..a5a6f9229 100644 --- a/features/mobile/multiphoto.feature +++ b/features/mobile/multiphoto.feature @@ -17,7 +17,7 @@ Feature: viewing photos on the mobile main page When I press "Share" And I click on selector "img.stream-photo" Then I should see a "img" within "#show_content" - And I should not see a "#right" within ".row" + And I should not see a "#right" within "#main" Scenario: view multiphoto post Given I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"