Unify avatars (#3350)

superdesk · Mar 9, 2020 · 83b610d · 83b610d
1 parent 547750b
commit 83b610d
Show file tree

Hide file tree

Showing 49 changed files with 830 additions and 999 deletions.
diff --git a/images/avatar_group_64_green_bg.png b/images/avatar_group_64_green_bg.png
diff --git a/package.json b/package.json
@@ -116,7 +116,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "2.1.11",
+    "superdesk-ui-framework": "2.1.14",
     "ts-loader": "3.5.0",
     "tslint": "5.11.0",
     "typescript": "3.7.2",

diff --git a/scripts/apps/authoring/authoring/authoring-topbar-react.tsx b/scripts/apps/authoring/authoring/authoring-topbar-react.tsx
@@ -98,12 +98,13 @@ export class AuthoringTopbarReact extends React.PureComponent<IProps, IState> {
             <div style={{paddingLeft: 10}}>
                 {articleDisplayWidgets.map(
                     (Component, i) =>
-                        <Component
-                            key={i}
-                            article={
-                                this.props.action === 'view' ? this.state.articleOriginal : articleUpdatedReference
-                            }
-                        />,
+                        <span key={i} style={{marginRight: 10}}>
+                            <Component
+                                article={
+                                    this.props.action === 'view' ? this.state.articleOriginal : articleUpdatedReference
+                                }
+                            />
+                        </span>,
                 )}
             </div>
         );

diff --git a/scripts/apps/authoring/comments/views/comments-widget.html b/scripts/apps/authoring/comments/views/comments-widget.html
@@ -2,9 +2,7 @@
     <ul class="widget-content__main boxed-list sd-padding-all--1">
         <li ng-repeat="comment in comments" class="boxed-list__item" ng-class="{'boxed-list__item--selcted': comment._id === active}">
             <div class="boxed-list__item-media">
-                <figure class="avatar sd-margin-all--0">
-                    <img sd-user-avatar data-user="comment.user">
-                </figure>
+                <sd-user-avatar data-user="comment.user"></sd-user-avatar>
             </div>
             <div class="boxed-list__item-content">
                 <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
@@ -33,7 +31,7 @@ <h3 class="panel-info__heading" translate>No comments so far.</h3>
     </ul>
     <div class="widget-content__footer add-comment">
         <form name="commentsForm">
-            <div sd-user-mentio></div>
+            <div sd-user-mention></div>
             <textarea class="new-comment" sd-auto-height ng-model="text" mentio id="mentio-users" ng-keyup="saveOnEnter($event)"></textarea>
             <div class="actions">
                 <div class="pull-left post"><input type="checkbox" ng-model="saveEnterFlag"> <span translate>Post on 'Enter'</span></div>

diff --git a/scripts/apps/authoring/metadata/views/metadata-terms.html b/scripts/apps/authoring/metadata/views/metadata-terms.html
@@ -16,11 +16,14 @@
             <div sd-typeahead items="terms" term="selectedTerm" search="searchTerms(term)" select="allowEntireCat && selectTerm(item, $event)" always-visible="header" data-disabled="disabled || allSelected">
                 <ul class="item-list" vs-repeat ng-if="!activeTree.length || activeList">
                     <li typeahead-item="t" ng-repeat="t in terms track by t[uniqueField]">
-                        <button ng-click="!allowEntireCat && openTree(t, $event)" title="{{getLocaleName(t)}}">
-                            <figure ng-if="t.user" class="avatar">
-                                <img sd-user-avatar data-user="t.user" alt="{{getLocaleName(t)}}">
-                            </figure>
-                            {{getLocaleName(t)}}
+                        <button
+                            class="nested-toggle flex-row sibling-spacer-10"
+                            style="display: flex;"
+                            ng-click="!allowEntireCat && openTree(t, $event)"
+                            title="{{getLocaleName(t)}}"
+                        >
+                            <sd-user-avatar data-user="t.user"></sd-user-avatar>
+                            <span>{{getLocaleName(t)}}</span>
                         </button>
                     </li>
                 </ul>
@@ -65,11 +68,17 @@
             </ul>
             <ul vs-repeat ng-if="!preferredView">
                 <li ng-repeat="term in activeTree track by term[uniqueField]">
-                    <button ng-if="tree[term[uniqueField]]" class="nested-toggle" ng-click="openTree(term, $event)" title="{{getLocaleName(term)}}">
-                        <figure ng-if="term.user" class="avatar">
-                            <img sd-user-avatar data-user="term.user" alt="{{getLocaleName(term)}}">
-                        </figure>
-                        {{getLocaleName(term)}}
+                    <button
+                        ng-if="tree[term[uniqueField]]"
+                        class="nested-toggle flex-row sibling-spacer-10"
+                        style="display: flex;"
+                        ng-click="openTree(term, $event)"
+                        title="{{getLocaleName(term)}}"
+                    >
+                        <span ng-if="term.user">
+                            <sd-user-avatar data-user="term.user"></sd-user-avatar>
+                        </span>
+                        <span>{{getLocaleName(term)}}</span>
                         <i class="icon-chevron-right-thin"></i></button>
                     <button ng-if="!tree[term[uniqueField]]" ng-click="selectTerm(term, $event)" title="{{getLocaleName(term)}}" ng-class="{'greyout': isSelected(term)}" ng-disabled="isSelected(term)">
                         {{getLocaleName(term)}}

diff --git a/scripts/apps/authoring/track-changes/views/inline-comments-widget.html b/scripts/apps/authoring/track-changes/views/inline-comments-widget.html
@@ -8,21 +8,22 @@
             <h4 class="label">{{commentObj.fieldName}}</h4>
             <ul class="notification-list notification-list-fix white sd-margin-all--0 sd-margin-b--2">
                 <li ng-repeat="item in commentObj.comments" class="item">
-                    <figure class="avatar">
-                        <img sd-user-avatar data-user="users[item.data.authorId]">
-                    </figure>
-                    <div class="content">
-                        <div class="text" sd-comment-text data-name="{{users[item.data.authorId].display_name || users[item.data.authorId].username}}" data-text="{{item.data.msg}}"></div>
-                        <span class="date" sd-absdate datetime="item.data.date"></span>
+                    <div class="flex-row sibling-spacer-10">
+                        <sd-user-avatar data-user="users[item.data.authorId]"></sd-user-avatar>
+                        <div>
+                            <div class="text" sd-comment-text data-name="{{users[item.data.authorId].display_name || users[item.data.authorId].username}}" data-text="{{item.data.msg}}"></div>
+                            <span class="date" sd-absdate datetime="item.data.date"></span>
+                        </div>
                     </div>
+
                     <ul>
                         <li class="small" ng-repeat="reply in item.data.replies">
-                            <figure class="avatar">
-                                <img sd-user-avatar data-user="users[reply.authorId]">
-                            </figure>
-                            <div class="content">
-                                <div class="text" sd-comment-text data-comment="comment" data-name="{{users[reply.authorId].display_name || users[reply.authorId].username}}" data-text="{{reply.msg}}"></div>
-                                <span class="date" sd-absdate datetime="reply.date"></span>
+                            <div class="flex-row sibling-spacer-10">
+                                <sd-user-avatar data-user="users[reply.authorId]"></sd-user-avatar>
+                                <div>
+                                    <div class="text" sd-comment-text data-comment="comment" data-name="{{users[reply.authorId].display_name || users[reply.authorId].username}}" data-text="{{reply.msg}}"></div>
+                                    <span class="date" sd-absdate datetime="reply.date"></span>
+                                </div>
                             </div>
                         </li>
                     </ul>

diff --git a/scripts/apps/authoring/track-changes/views/suggestions-widget.html b/scripts/apps/authoring/track-changes/views/suggestions-widget.html
@@ -8,26 +8,31 @@ <h4 class="label">{{annotationObj.fieldName}}</h4>
                     <span class="label label--success" ng-show="item.resolutionInfo.accepted" translate>Accepted</span>
                     <span class="label label--alert" ng-show="!item.resolutionInfo.accepted" translate>Rejected</span>
                 </div>
-                <figure class="avatar">
-                    <img sd-user-avatar data-user="users[item.suggestionInfo.author]">
-                </figure>
-                <div>{{users[item.suggestionInfo.author].display_name || users[item.suggestionInfo.author].username}}</div>
-                <div class="date" sd-absdate datetime="item.suggestionInfo.date"></div>
-                <div class="content" ng-show="item.suggestionInfo.type!=='REPLACE_SUGGESTION'">
-                    <div class="text">
-                        <strong>{{getLocalizedTypeText(item.suggestionInfo.type, item.suggestionInfo.blockType)}}:</strong>
-                        <strong><em>"{{item.suggestionText}}"</em></strong>
-                        <strong ng-show="item.suggestionInfo.type=='ADD_LINK_SUGGESTION'"><em>({{item.suggestionInfo.link.href}})</em></strong>
-                    </div>
-                </div>
-                <div class="content" ng-show="item.suggestionInfo.type==='REPLACE_SUGGESTION'">
-                    <div class="text">
-                        <strong translate>Replace: </strong>
-                        <strong><em>"{{item.oldText}}"</em></strong>
-                        <strong translate>with: </strong>
-                        <strong><em>"{{item.suggestionText}}"</em></strong>
+                <div class="sibling-spacer-10" style="display: flex;">
+                    <sd-user-avatar data-user="users[item.suggestionInfo.author]"></sd-user-avatar>
+                    <div>
+                        <div>{{users[item.suggestionInfo.author].display_name || users[item.suggestionInfo.author].username}}</div>
+                        <div class="date" sd-absdate datetime="item.suggestionInfo.date"></div>
+                        <div ng-show="item.suggestionInfo.type!=='REPLACE_SUGGESTION'">
+                            <div class="text">
+                                <strong>{{getLocalizedTypeText(item.suggestionInfo.type, item.suggestionInfo.blockType)}}:</strong>
+                                <strong><em>"{{item.suggestionText}}"</em></strong>
+                                <strong ng-show="item.suggestionInfo.type=='ADD_LINK_SUGGESTION'"><em>({{item.suggestionInfo.link.href}})</em></strong>
+                            </div>
+                        </div>
+                        <div ng-show="item.suggestionInfo.type==='REPLACE_SUGGESTION'">
+                            <div class="text">
+                                <strong translate>Replace: </strong>
+                                <strong><em>"{{item.oldText}}"</em></strong>
+                                <strong translate>with: </strong>
+                                <strong><em>"{{item.suggestionText}}"</em></strong>
+                            </div>
+                        </div>
                     </div>
                 </div>
+
+                <br />
+
                 <div class="resolution">
                     <span ng-show="item.resolutionInfo.accepted" translate>Accepted by</span>
                     <span ng-show="!item.resolutionInfo.accepted" translate>Rejected by</span>

diff --git a/scripts/apps/authoring/translations/translationsWidget.tsx b/scripts/apps/authoring/translations/translationsWidget.tsx
@@ -89,7 +89,7 @@ class TranslationsWidgetComponent extends React.Component<IProps, IState> {
                                                     </span>
                                                 )
                                                 : (
-                                                    <div className="flex-bar sibling-spacer-4">
+                                                    <div className="flex-row sibling-spacer-4">
                                                         <span>{gettext('Translated from')}</span>
                                                         <span className="label label--hollow">
                                                             {translationsLookup[translation.translated_from].language}

diff --git a/scripts/apps/authoring/views/authoring-topbar.html b/scripts/apps/authoring/views/authoring-topbar.html
@@ -13,11 +13,10 @@
     ></sd-authoring-topbar-react>
 
     <div ng-show="isLocked()" class="locked-info">
-      <figure class="avatar small">
-          <div class="user-image">
-              <img sd-user-avatar data-user="item.lock_user">
-          </div>
-      </figure>
+
+      <div class="locked-info__avatar">
+        <sd-user-avatar data-user="item.lock_user"></sd-user-avatar>
+      </div>
       <span class="locked-info__label" translate>Locked by</span>
       <span class="locked-info__name">{{ item.lock_user | username }}</span>
       <button

diff --git a/scripts/apps/contacts/styles/contacts.scss b/scripts/apps/contacts/styles/contacts.scss
@@ -123,33 +123,6 @@
         font-size: 11px;
         color: #888;
     }
-    .profile-pic {
-        width: 82px;
-        height: 82px;
-        position: relative;
-        margin: 0 auto;
-        .avatar {
-            width: 100%;
-            height: 100%;
-            @include border-radius(50%);
-            position: relative;
-            background-image: url('~images/avatar_200.png');
-            &.organisation {
-                background-image: url('~images/avatar_group_64.png');
-            }
-            &.initials {
-                font-size: 24px;
-                line-height: 82px;
-                font-weight: 300;
-            }
-        }
-        .disabled-label {
-            position: absolute;
-            bottom: 15%;
-            left: 40%;
-            border: 1px solid #fff;
-        }
-    }
 
     .alert {
         @include border-radius(0px);

diff --git a/scripts/apps/dashboard/workspace-tasks/styles/tasks.scss b/scripts/apps/dashboard/workspace-tasks/styles/tasks.scss
@@ -49,9 +49,6 @@ TASK PAGE
         .header {
             min-height: 24px;
         }
-        .avatar {
-            margin-right: 10px;
-        }
         .title {
             padding: 3px 0;
             line-height: 18px;
@@ -263,9 +260,6 @@ TASK PAGE
             @include border-radius(3px);
             margin-bottom: 10px;
             @include clearfix();
-            .avatar {
-                margin-right: 10px;
-            }
             .assignee-name {
                 margin: 0;
                 line-height: 30px;

diff --git a/scripts/apps/dashboard/workspace-tasks/tasks.ts b/scripts/apps/dashboard/workspace-tasks/tasks.ts
@@ -306,7 +306,6 @@ function AssigneeViewDirective(desks) {
         scope: {
             task: '=',
             name: '=',
-            avatarSize: '@',
         },
         link: function(scope) {
             promise.then(function setItemAssigne() {

diff --git a/scripts/apps/dashboard/workspace-tasks/views/assignee-view.html b/scripts/apps/dashboard/workspace-tasks/views/assignee-view.html
@@ -1,5 +1,7 @@
 <div>
-    <figure class="avatar {{avatarSize}}"><img sd-user-avatar data-user="user"></figure>
+    <div style="float: left;">
+        <sd-user-avatar data-user="user"></sd-user-avatar>
+    </div>
     <div class="assignee-name" ng-if="name">
         <span ng-show="task.desk">{{deskName}} / </span>
         <span ng-show="task.user">{{userName}}</span>

diff --git a/scripts/apps/dashboard/workspace-tasks/views/kanban-board.html b/scripts/apps/dashboard/workspace-tasks/views/kanban-board.html
@@ -4,7 +4,7 @@
         <li ng-repeat="item in items"
             ng-class="{selected: item === selected.preview}"
             ng-click="preview(item)">
-            <div sd-assignee-view data-task="item.task" data-avatar-size="small"></div>
+            <div sd-assignee-view data-task="item.task"></div>
             <div class="title">{{ item.slugline || item.headline }}</div>
             <div class="info">
                 <ul class="task-labels clearfix">

diff --git a/scripts/apps/dashboard/workspace-tasks/views/task-preview.html b/scripts/apps/dashboard/workspace-tasks/views/task-preview.html
@@ -41,9 +41,9 @@
         </div>
 
         <div class="assignee-container" ng-if="!editmode">
-            <figure ng-if="!editmode" class="avatar">
-                <img sd-user-avatar data-user="users[task_details.user]">
-            </figure>
+            <div style="float: left; margin-right: 10px;">
+                <sd-user-avatar data-user="users[task_details.user]"></sd-user-avatar>
+            </div>
             <div class="assignee-name">
                 <span ng-show="task_details.desk">{{desks[task_details.desk].name}} / </span>
                 <span ng-show="task_details.user">{{users[task_details.user].display_name}}</span>

diff --git a/scripts/apps/desks/styles/desks.scss b/scripts/apps/desks/styles/desks.scss
@@ -264,12 +264,6 @@ $desk-width: 270px;
         .item {
             border-left: none;
         }
-        .avatar {
-            margin: 4px 10px 0 4px;
-        }
-        .text {
-
-        }
     }
 }
 .slugline-content {
@@ -515,59 +509,6 @@ $desk-width: 270px;
     }
 }
 
-
-.members-grid {
-    ul {
-        > li {
-            position: relative;
-            float: left;
-            margin: 5px;
-            border: 1px solid rgba(0,0,0,0);
-            @include border-radius(3px);
-            padding: 15px 10px;
-            width: 135px;
-            .avatar {
-                display: block;
-                width: 84px;
-                height: 84px;
-                float: none;
-                margin: 0 auto 10px;
-                &.initials {
-                    font-size: 34px;
-                    line-height: 84px;
-                }
-            }
-            .name {
-                text-align: center;
-                width: 115px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            i {
-                position: absolute;
-                right: 10px; top: 10px;
-                display: none;
-                @include opacity(60);
-                &:hover {
-                    @include opacity(100);
-                    cursor: pointer;
-                }
-            }
-            &:hover {
-                i {
-                    display: block;
-                }
-                border-color: rgba(0,0,0,0.12);
-                @include box-shadow(0 1px 3px 0 rgba(0,0,0,30%));
-            }
-            &.inactive {
-                color: #ccc;
-            }
-        }
-    }
-}
-
 .members-list {
     padding-top: 1rem;
 } 

diff --git a/scripts/apps/desks/views/desk-config-modal.html b/scripts/apps/desks/views/desk-config-modal.html
@@ -360,8 +360,11 @@ <h3 class="modal__heading" ng-show="desk.edit._id" translate>Edit "{{desk.edit.n
                     <div class="members-list">
                         <ul class="pills-list">
                             <li ng-repeat="user in deskMembers| orderBy: 'display_name' track by user._id" ng-class="{'inactive' : !user.is_enabled || !user.is_active}">
-                                <figure class="avatar"><img sd-user-avatar data-user="user"></figure>
-                                <h5>{{:: user.display_name}}</h5> <span class="user-email">{{:: user.email}}</span>
+                                <span class="flex-row sibling-spacer-10">
+                                    <sd-user-avatar data-user="user"></sd-user-avatar>
+                                    <h5>{{:: user.display_name}}</h5> <span class="user-email">{{:: user.email}}</span>
+                                </span>
+
                                 <div class="actions">
                                     <button ng-click="remove(user)"><i class="icon-close-small"></i></button>
                                 </div>