From 26682ccec4bbaa9dc4f02dc0cfc4c85f76b55de3 Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 23 Jul 2020 08:13:55 -0400 Subject: [PATCH] UX: Improving styling so names/usernames fit better (#86) --- .../assigned-topic-list.hbs | 2 +- .../assigned-topic-list.js.es6 | 9 +++++++ .../group-assignments-menu-item.js.es6 | 12 +-------- .../components/group-assignments-filter.hbs | 4 ++- .../group-assignments-menu-item.hbs | 12 +++------ .../discourse/templates/group/assignments.hbs | 4 +-- assets/stylesheets/assigns.scss | 27 +++++++++++++++++++ assets/stylesheets/mobile/assigns.scss | 20 ++++++++++++++ 8 files changed, 66 insertions(+), 24 deletions(-) create mode 100644 assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6 diff --git a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs index bdae640..a0aa65b 100644 --- a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs +++ b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs @@ -1 +1 @@ -{{group-assignments-menu-item group = group}} \ No newline at end of file +{{group-assignments-menu-item group=group}} diff --git a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6 b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6 new file mode 100644 index 0000000..4d9d836 --- /dev/null +++ b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6 @@ -0,0 +1,9 @@ +export default { + shouldRender(args, component) { + return ( + component.currentUser && + component.currentUser.can_assign && + args.group.assignment_count > 0 + ); + } +}; diff --git a/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6 b/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6 index 188c08d..91ad923 100644 --- a/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6 +++ b/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6 @@ -1,13 +1,3 @@ export default Ember.Component.extend({ - canAssign: false, - - init() { - this._super(...arguments); - this.set( - "displayAssignTab", - this.currentUser && - this.currentUser.can_assign && - this.group.assignment_count > 0 - ); - } + tagName: "" }); diff --git a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs b/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs index 35fa403..676f407 100644 --- a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs +++ b/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs @@ -1,6 +1,8 @@ {{#if show-avatar}} {{#link-to "group.assignments.show" filter.username_lower}} - {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{displayName}} ({{filter.assignments_count}}) + {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} + ({{filter.assignments_count}}) + {{displayName}} {{/link-to}} {{else}} {{#link-to "group.assignments.show" filter}} diff --git a/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs b/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs index 6d3395c..e96c886 100644 --- a/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs +++ b/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs @@ -1,9 +1,3 @@ -{{#if displayAssignTab}} - -{{/if}} +{{#link-to "group.assignments"}} + {{d-icon "user-plus" class="glyph"}}{{i18n 'discourse_assign.group_assignments'}} ({{group.assignment_count}}) +{{/link-to}} diff --git a/assets/javascripts/discourse/templates/group/assignments.hbs b/assets/javascripts/discourse/templates/group/assignments.hbs index 743f33a..2c1ae28 100644 --- a/assets/javascripts/discourse/templates/group/assignments.hbs +++ b/assets/javascripts/discourse/templates/group/assignments.hbs @@ -1,4 +1,4 @@ -
+
{{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}} {{#load-more selector=".activity-nav li" action=(action "loadMore")}} {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type assignment_count=group.assignment_count}} @@ -11,4 +11,4 @@
{{outlet}} -
\ No newline at end of file +
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss index eafa680..8625524 100644 --- a/assets/stylesheets/assigns.scss +++ b/assets/stylesheets/assigns.scss @@ -90,3 +90,30 @@ } } } + +// Group assigns sidebar nav + +.group-assignments { + // a little extra space for long names + min-width: 180px; + li a { + display: grid; + grid-template-areas: + "avatar count" + "name name"; + grid-template-columns: auto 1fr; + align-items: center; + img { + margin-right: 0.25em; + grid-area: avatar; + } + .assign-name { + grid-area: name; + margin-top: 0.25em; + @include ellipsis; + } + .assign-count { + grid-area: count; + } + } +} diff --git a/assets/stylesheets/mobile/assigns.scss b/assets/stylesheets/mobile/assigns.scss index 761b50f..4eea2ef 100644 --- a/assets/stylesheets/mobile/assigns.scss +++ b/assets/stylesheets/mobile/assigns.scss @@ -24,3 +24,23 @@ } } } + +.group-assignments .mobile-nav .drop li a { + display: grid; +} + +.group-assignments .mobile-nav a.expander > span { + display: flex; + @include ellipsis; + .assign-count { + display: none; + } + .assign-name { + margin: 0; + padding: 0; + } + img { + width: 1em; + height: 1em; + } +}