From cdcc5d61740d2dca789de5557cab541f9110baeb Mon Sep 17 00:00:00 2001 From: minusfive Date: Thu, 24 Aug 2017 21:04:19 -0400 Subject: [PATCH] Extracted/DRYed user-stream-item component CSS from user.css into own files - Renamed 'stream-item' component to 'user-stream-item' - Replaced generic 'item' class with clearer 'user-stream-item' class - Retained 'item' class for backward compatibility, marked as 'DEPRECATED' - Extracted CSS pertaining 'user-stream-item' component to component CSS files - Removed unnecessary duplication from 'user-stream-item' CSS - Removed unnecessary nesting from 'user-stream-item' CSS --- ...am-item.js.es6 => user-stream-item.js.es6} | 9 +- .../templates/components/group-post.hbs | 2 +- .../{stream-item.hbs => user-stream-item.hbs} | 2 +- .../templates/components/user-stream.hbs | 2 +- .../templates/group-activity-posts.hbs | 2 +- app/assets/stylesheets/common/base/user.scss | 33 +--- .../common/components/user-stream-item.scss | 145 ++++++++++++++++++ app/assets/stylesheets/desktop.scss | 3 + .../desktop/components/user-stream-item.scss | 24 +++ app/assets/stylesheets/desktop/user.scss | 110 +------------ app/assets/stylesheets/mobile.scss | 3 + .../mobile/components/user-stream-item.scss | 33 ++++ app/assets/stylesheets/mobile/user.scss | 119 ++------------ 13 files changed, 244 insertions(+), 243 deletions(-) rename app/assets/javascripts/discourse/components/{stream-item.js.es6 => user-stream-item.js.es6} (68%) rename app/assets/javascripts/discourse/templates/components/{stream-item.hbs => user-stream-item.hbs} (94%) create mode 100644 app/assets/stylesheets/common/components/user-stream-item.scss create mode 100644 app/assets/stylesheets/desktop/components/user-stream-item.scss create mode 100644 app/assets/stylesheets/mobile/components/user-stream-item.scss diff --git a/app/assets/javascripts/discourse/components/stream-item.js.es6 b/app/assets/javascripts/discourse/components/user-stream-item.js.es6 similarity index 68% rename from app/assets/javascripts/discourse/components/stream-item.js.es6 rename to app/assets/javascripts/discourse/components/user-stream-item.js.es6 index 581b1c78769..103f450b245 100644 --- a/app/assets/javascripts/discourse/components/stream-item.js.es6 +++ b/app/assets/javascripts/discourse/components/user-stream-item.js.es6 @@ -2,7 +2,14 @@ import { propertyEqual } from 'discourse/lib/computed'; import { actionDescription } from "discourse/widgets/post-small-action"; export default Ember.Component.extend({ - classNameBindings: [":item", "item.hidden", "item.deleted:deleted", "moderatorAction"], + classNameBindings: [ + ":user-stream-item", + ":item", // DEPRECATED: 'item' class + "item.hidden", + "item.deleted:deleted", + "moderatorAction" + ], + moderatorAction: propertyEqual("item.post_type", "site.post_types.moderator_action"), actionDescription: actionDescription("item.action_code", "item.created_at", "item.username"), }); diff --git a/app/assets/javascripts/discourse/templates/components/group-post.hbs b/app/assets/javascripts/discourse/templates/components/group-post.hbs index bd7f867e86f..66386d75ae9 100644 --- a/app/assets/javascripts/discourse/templates/components/group-post.hbs +++ b/app/assets/javascripts/discourse/templates/components/group-post.hbs @@ -1,4 +1,4 @@ -
+
{{!-- DEPRECATED: 'item' class --}}
{{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
 {{format-date post.created_at leaveAgo="true"}} diff --git a/app/assets/javascripts/discourse/templates/components/stream-item.hbs b/app/assets/javascripts/discourse/templates/components/user-stream-item.hbs similarity index 94% rename from app/assets/javascripts/discourse/templates/components/stream-item.hbs rename to app/assets/javascripts/discourse/templates/components/user-stream-item.hbs index f2f44fc7346..3bd168b08c9 100644 --- a/app/assets/javascripts/discourse/templates/components/stream-item.hbs +++ b/app/assets/javascripts/discourse/templates/components/user-stream-item.hbs @@ -26,7 +26,7 @@

{{{item.excerpt}}}

{{#each item.children as |child|}} -
+
{{!-- DEPRECATED: 'child-actions' class --}} {{d-icon child.icon class="icon"}} {{#each child.items as |grandChild|}} {{#if grandChild.removableBookmark}} diff --git a/app/assets/javascripts/discourse/templates/components/user-stream.hbs b/app/assets/javascripts/discourse/templates/components/user-stream.hbs index 31783b50bdd..e12fd05d516 100644 --- a/app/assets/javascripts/discourse/templates/components/user-stream.hbs +++ b/app/assets/javascripts/discourse/templates/components/user-stream.hbs @@ -1,3 +1,3 @@ {{#each stream.content as |item|}} - {{stream-item item=item removeBookmark=(action "removeBookmark")}} + {{user-stream-item item=item removeBookmark=(action "removeBookmark")}} {{/each}} diff --git a/app/assets/javascripts/discourse/templates/group-activity-posts.hbs b/app/assets/javascripts/discourse/templates/group-activity-posts.hbs index fd8a69a47dd..298edaff831 100644 --- a/app/assets/javascripts/discourse/templates/group-activity-posts.hbs +++ b/app/assets/javascripts/discourse/templates/group-activity-posts.hbs @@ -1,4 +1,4 @@ -{{#load-more selector=".user-stream .item" action=(action "loadMore")}} +{{#load-more selector=".user-stream .user-stream-item" action=(action "loadMore")}}
{{#each model as |post|}} {{group-post post=post}} diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index d6a7eefb76f..22eb98a87a7 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -1,25 +1,4 @@ -// styling of bottom section -.user-stream .child-actions { - margin-top: 8px; - .avatar-link { - float: none; - } - .fa { - width: 15px; - display: inline-block; - color: $primary; - } - .avatar-link { - margin-right: 3px; - } - -} -.user-stream .item .expand-item { - float: right; - margin-right: 0.5em; - color: lighten($primary, 40%); -} - +// Common styles for "/user" section .user-main { .d-icon-heart { color: $love !important; @@ -190,10 +169,12 @@ } } -.user-right .list-actions { - margin-bottom: 10px; - .btn { - margin-right: 10px; +.user-right { + .list-actions { + margin-bottom: 10px; + .btn { + margin-right: 10px; + } } } diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss new file mode 100644 index 00000000000..42c6e1ca389 --- /dev/null +++ b/app/assets/stylesheets/common/components/user-stream-item.scss @@ -0,0 +1,145 @@ +// Common styles for "user-stream-item" component +.user-stream { + + // DEPRECATED: + // The ".item" class should be removed because it's too generic. + // Once ".item" has been removed, ".user-stream-item" can replace + // ".user-stream" as the top-level selector on this file as all other + // selectors below are its children + .item, + .user-stream-item { + background-color: $secondary; + border-bottom: 1px solid $primary-low; + + &.moderator-action { + background-color: $highlight-medium; + } + + &.deleted { + opacity: 0.8; + background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%); + } + + &.hidden { + display: block; + opacity: 0.4; + } + } + + .type, + span.name { + color: $primary; + } + + .time, + .delete-info { + display: block; + float: right; + color: lighten($primary, 40%); + font-size: 11px; + } + + .delete-info i { + font-size: 1em; + } + + .expand-item { + float: right; + margin-right: 0.5em; + color: lighten($primary, 40%); + } + + .avatar-link { + float: left; + margin-right: 4px; + } + + .title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + } + + .name { + font-size: 1em; + max-width: 400px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .edit-reason { + background-color: dark-light-choose(scale-color($highlight, $lightness: 25%), scale-color($highlight, $lightness: -50%)); + padding: 3px 5px 5px 5px; + } + + .remove-bookmark { + float: right; + margin-top: -4px; + } + + .notification { + li { + display: inline-block; + } + + p { + display: inline-block; + margin-left: 10px; + span { + color: $primary; + } + } + + .time { + display: inline-block; + margin-left: 10px; + float: none; + } + + // common/base/header.scss + .fa, .icon { + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + font-size: 1.714em; + } + } + + .excerpt { + margin: 5px 0; + font-size: 0.929em; + word-wrap: break-word; + color: $primary; + } + + .group-member-info { + .name { + display: inline-block; + margin-top: 5px; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + } + + .title { + display: inline-block; + margin-top: 5px; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + } + } +} + +.user-stream .child-actions, // DEPRECATED: '.user-stream .child-actions' selector +.user-stream-item-actions { + margin-top: 8px; + + .avatar-link { + float: none; + margin-right: 3px; + } + + .fa { + width: 15px; + display: inline-block; + color: $primary; + } +} + diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss index 211ed21e229..8534c2f7834 100644 --- a/app/assets/stylesheets/desktop.scss +++ b/app/assets/stylesheets/desktop.scss @@ -22,6 +22,9 @@ @import "desktop/menu-panel"; @import "desktop/group"; +// Import all component-specific files +@import "desktop/components/*"; + /* These files doesn't actually exist, they are injected by Stylesheet::Compiler. */ @import "plugins"; diff --git a/app/assets/stylesheets/desktop/components/user-stream-item.scss b/app/assets/stylesheets/desktop/components/user-stream-item.scss new file mode 100644 index 00000000000..fe116155cb6 --- /dev/null +++ b/app/assets/stylesheets/desktop/components/user-stream-item.scss @@ -0,0 +1,24 @@ +// Desktop styles for "user-stream-item" component +.user-stream { + + // DEPRECATION: + // The ".item" class should be eventually removed because it's too generic. + // Once ".item" has been removed, ".user-stream-item" can replace + // ".user-stream" as the top-level selector on this file as all other + // selectors below are its children + .item, + .user-stream-item { + padding: 20px 8px 15px 8px; + } + + .time, + .delete-info { + margin-right: 8px; + } + + .notification { + &.unread { + background-color: $tertiary-low; + } + } +} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 45700c1f627..2d9c59101bd 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -1,4 +1,4 @@ -// styles that apply to the user page +// Desktop styles for "/user" section .groups { .group-link { color: $tertiary; @@ -442,107 +442,6 @@ } } - .user-stream { - .excerpt { - margin: 5px 0; - font-size: 0.929em; - word-wrap: break-word; - color: $primary; - } - .item.moderator-action { - background-color: $highlight-medium; - } - .item.deleted { - opacity: 0.8; - background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%); - } - .item.hidden { - display: block; - opacity: 0.4; - } - .item { - padding: 20px 8px 15px 8px; - background-color: $secondary; - border-bottom: 1px solid $primary-low; - } - .type { - color: $primary; - } - span.name { - color: $primary; - } - .time, .delete-info { - display: block; - float: right; - color: lighten($primary, 40%); - margin-right: 8px; - font-size: 11px; - } - .delete-info i { - font-size: 1em; - } - .avatar-link { - float: left; - margin-right: 4px; - } - .title { - overflow: hidden; - text-overflow: ellipsis; - display: block; - } - .name { - font-size: 1em; - max-width: 400px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .edit-reason { - background-color: dark-light-choose(scale-color($highlight, $lightness: 25%), scale-color($highlight, $lightness: -50%)); - padding: 3px 5px 5px 5px; - } - .remove-bookmark { - float: right; - margin-top: -4px; - } - .notification { - &.unread { - background-color: $tertiary-low; - } - - li { display: inline-block; } - p { - display: inline-block; - margin-left: 10px; - span { - color: $primary; - } - } - .time { - display: inline-block; - margin-left: 10px; - float: none; - } - // common/base/header.scss - .fa, .icon { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - font-size: 1.714em; - } - } - .group-member-info { - .name { - display: inline-block; - margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - } - .title { - display: inline-block; - margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - } - } - } - .staff-counters { text-align: left; background: $primary; @@ -638,6 +537,13 @@ .user-right { display: table-cell; + &, + > .user-stream { + > .alert:first-child { + margin-top: 10px; + } + } + .group-notification-menu { float: right; margin-bottom: 5px; diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss index b1592b6d6ab..39242962431 100644 --- a/app/assets/stylesheets/mobile.scss +++ b/app/assets/stylesheets/mobile.scss @@ -24,6 +24,9 @@ @import "mobile/ring"; @import "mobile/group"; +// Import all component-specific files +@import "mobile/components/*"; + /* These files doesn't actually exist, they are injected by Stylesheet::Compiler. */ @import "plugins"; diff --git a/app/assets/stylesheets/mobile/components/user-stream-item.scss b/app/assets/stylesheets/mobile/components/user-stream-item.scss new file mode 100644 index 00000000000..40e43cf7a7e --- /dev/null +++ b/app/assets/stylesheets/mobile/components/user-stream-item.scss @@ -0,0 +1,33 @@ +// Mobile styles for "user-stream-item" component +.user-stream { + + // DEPRECATION: + // The ".item" class should be eventually removed because it's too generic. + // Once ".item" has been removed, ".user-stream-item" can replace + // ".user-stream" as the top-level selector on this file as all other + // selectors below are its children + .item, + .user-stream-item { + padding: 20px 0 15px 0; + } + + .name { + vertical-align: middle; + } + + .notification { + &.unread { + background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%)); + } + } + + .group-member-info { + .name { + vertical-align: inherit; + } + } + + .topic-statuses { + float: left; + } +} diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 313bb363e6a..d69b789a37f 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -1,4 +1,12 @@ -// styles that apply to the user page +// Mobile styles for "/user" section +.user-right { + &, + > .user-stream { + > .alert:first-child { + margin-top: 20px; + } + } +} .user-preferences { .control-group { @@ -378,115 +386,6 @@ } } - - .user-stream { - padding-top: 20px; - - .excerpt { - margin: 5px 0; - font-size: 0.929em; - word-wrap: break-word; - color: $primary; - } - .item.moderator-action { - background-color: $highlight-medium; - } - .item.deleted { - opacity: 0.8; - background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%); - } - .item.hidden { - display: block; - opacity: 0.4; - } - .item { - padding: 20px 0 15px 0; - background-color: $secondary; - border-bottom: 1px solid $primary-low; - } - .type { - color: $primary; - } - span.name { - color: $primary; - } - .time, .delete-info { - display: block; - float: right; - color: lighten($primary, 40%); - font-size: 11px; - } - .delete-info i { - font-size: 1em; - } - .avatar-link { - float: left; - margin-right: 4px; - } - .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - } - .name { - font-size: 1em; - max-width: 400px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - .edit-reason { - background-color: scale-color($highlight, $lightness: 25%); - padding: 3px 5px 5px 5px; - } - .remove-bookmark { - float: right; - margin-top: -4px; - } - .notification { - &.unread { - background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%)); - } - - li { display: inline-block; } - p { - display: inline-block; - margin-left: 10px; - span { - color: $primary; - } - } - .time { - display: inline-block; - margin-left: 10px; - float: none; - } - // common/base/header.scss - .fa, .icon { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - font-size: 1.714em; - } - } - .group-member-info { - .name { - display: inline-block; - margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - vertical-align: inherit; - } - .title { - display: inline-block; - margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); - } - } - .topic-statuses { - float: left; - } - } - .staff-counters { text-align: left; background: $primary;