diff --git a/images/avatar_group_64_green_bg.png b/images/avatar_group_64_green_bg.png new file mode 100644 index 0000000000..4f7dba7b28 Binary files /dev/null and b/images/avatar_group_64_green_bg.png differ diff --git a/package.json b/package.json index 86e33572a2..3f71b4dbf2 100644 --- 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 index c9cfd4128d..05696c036e 100644 --- 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 {
{articleDisplayWidgets.map( (Component, i) => - , + + + , )}
); diff --git a/scripts/apps/authoring/comments/views/comments-widget.html b/scripts/apps/authoring/comments/views/comments-widget.html index bc42f18a80..8ec66cff62 100644 --- a/scripts/apps/authoring/comments/views/comments-widget.html +++ b/scripts/apps/authoring/comments/views/comments-widget.html @@ -2,9 +2,7 @@
-
+
Post on 'Enter'
diff --git a/scripts/apps/authoring/metadata/views/metadata-terms.html b/scripts/apps/authoring/metadata/views/metadata-terms.html index dbf491b7df..6ea653373a 100644 --- a/scripts/apps/authoring/metadata/views/metadata-terms.html +++ b/scripts/apps/authoring/metadata/views/metadata-terms.html @@ -16,11 +16,14 @@
  • -
@@ -65,11 +68,17 @@
  • -
diff --git a/scripts/apps/desks/views/task-status-items.html b/scripts/apps/desks/views/task-status-items.html index 6d6fb0382d..6ed342431c 100644 --- a/scripts/apps/desks/views/task-status-items.html +++ b/scripts/apps/desks/views/task-status-items.html @@ -3,13 +3,13 @@
No items with this status
    -
  • -
    -
    - -
    -
    +
  • +
    {{item.slugline}}
\ No newline at end of file diff --git a/scripts/apps/desks/views/user-role-items.html b/scripts/apps/desks/views/user-role-items.html index d1493fb0bd..3fb7169e0e 100644 --- a/scripts/apps/desks/views/user-role-items.html +++ b/scripts/apps/desks/views/user-role-items.html @@ -1,11 +1,11 @@
    -
  • -
    -
    -
    - -
    -
    +
  • +
    {{item.display_name}}
    diff --git a/scripts/apps/desks/views/user-select.html b/scripts/apps/desks/views/user-select.html index a654a76ad8..c3c4f3310b 100644 --- a/scripts/apps/desks/views/user-select.html +++ b/scripts/apps/desks/views/user-select.html @@ -3,8 +3,13 @@
      • -
    • -
      +
    • +
      {{ getUserDisplay(user) }}
    diff --git a/scripts/apps/search/views/saved-search-manage-subscribers.html b/scripts/apps/search/views/saved-search-manage-subscribers.html index ae9305a27b..b4900bbe68 100644 --- a/scripts/apps/search/views/saved-search-manage-subscribers.html +++ b/scripts/apps/search/views/saved-search-manage-subscribers.html @@ -44,9 +44,11 @@

  • -
    -
    {{desk.name}}
    + > + + +
    {{desk.name}}
    +

@@ -54,10 +56,11 @@

  • -
    -
    {{user.first_name}} {{user.last_name}}
    + ng-repeat="user in wrapper.users | filter: usersFilter" + class="flex-row sibling-spacer-10" + > + +
    {{user.display_name}}
@@ -75,7 +78,7 @@

ng-class="{"sd-list-item--activated":itemActive2}" style="margin-bottom: 6px">
-
+
@@ -99,13 +102,11 @@

ng-class="{"sd-list-item--activated":itemActive2}" style="margin-bottom: 6px">
-
- -
+
- {{user.first_name}} {{user.last_name}} + {{user.display_name}}
{{user.username}} @@ -134,15 +135,12 @@

ng-class="{"sd-list-item--activated":itemActive2}" style="margin-bottom: 6px; padding: 0 10px; background-color: #E6EDEF!important; cursor: default;">
-
- -
+
- {{wrapper.userLookup[wrapper.subscriptionInCreateOrEditMode.user].first_name}} - {{wrapper.userLookup[wrapper.subscriptionInCreateOrEditMode.user].last_name}} + {{wrapper.userLookup[wrapper.subscriptionInCreateOrEditMode.user].display_name}}
@@ -157,7 +155,7 @@

ng-class="{"sd-list-item--activated":itemActive2}" style="margin-bottom: 6px; padding: 0 10px; background-color: #E6EDEF!important; cursor: default;">
-
+
diff --git a/scripts/apps/stream/views/activity-stream.html b/scripts/apps/stream/views/activity-stream.html index cb433401f4..31d2d01fc0 100644 --- a/scripts/apps/stream/views/activity-stream.html +++ b/scripts/apps/stream/views/activity-stream.html @@ -2,27 +2,27 @@
  • -
    -
    - -
    - -
    -

    {{ :: activity.user_name || 'System' }}

    -
    -
    -     - -
    -

    {{ :: activity.user_name || 'System' }} - {{activity.name == 'user:mention'? 'mentioned you' : 'commented on' | translate}} - - {{ :: activity.item_slugline }} - :
    {{ :: activity.data.comment }}

    -
    -
    -     +
    + +
    + +
    +

    {{ :: activity.user_name || 'System' }}

    +
    +
    +     + +
    +

    {{ :: activity.user_name || 'System' }} + {{activity.name == 'user:mention'? 'mentioned you' : 'commented on' | translate}} + + {{ :: activity.item_slugline }} + :
    {{ :: activity.data.comment }}

    +
    +
    +     +
diff --git a/scripts/apps/users/components/OrganisationAvatar.tsx b/scripts/apps/users/components/OrganisationAvatar.tsx new file mode 100644 index 0000000000..ee34b28023 --- /dev/null +++ b/scripts/apps/users/components/OrganisationAvatar.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import {AvatarWrapper, AvatarContentImage} from 'superdesk-ui-framework'; + +interface IProps { + size: 'small' | 'medium' | 'large'; +} + +export class UserOrganisationAvatar extends React.PureComponent { + render() { + return ( + + + + ); + } +} diff --git a/scripts/apps/users/components/UserAvatar.tsx b/scripts/apps/users/components/UserAvatar.tsx index 239c949ee4..a14f550f43 100644 --- a/scripts/apps/users/components/UserAvatar.tsx +++ b/scripts/apps/users/components/UserAvatar.tsx @@ -4,47 +4,65 @@ import React from 'react'; import {IUser} from 'superdesk-api'; import {CC} from 'core/ui/configurable-ui-components'; import {isUserLoggedIn} from '../services/UsersService'; +import {gettext} from 'core/utils'; +import {AvatarWrapper, AvatarContentText, AvatarContentImage} from 'superdesk-ui-framework'; class DefaultAvatarDisplay extends React.PureComponent<{user: IUser}> { render() { const {user} = this.props; + const tooltipText = user.display_name; - return ( -
-
- { - user.picture_url == null - ? {user.display_name[0].toUpperCase()} - : - } -
-
- ); + if (user.picture_url == null) { + const initials = (user.first_name?.[0] ?? '') + (user.last_name?.[0] ?? ''); + + return ( + 0 ? initials : user.display_name[0]} + tooltipText={tooltipText} + /> + ); + } else { + return ( + + ); + } } } interface IProps { user: IUser; - // indicates whether a user is online or not + size?: 'small' | 'medium' | 'large'; // defaults to medium + + // indicates whether to show online/offline status // should only be used when the user object is up to date displayStatus?: boolean; + + displayAdministratorIndicator?: boolean; } export class UserAvatar extends React.PureComponent { render() { - const {user, displayStatus} = this.props; + const {user, displayStatus, displayAdministratorIndicator} = this.props; return ( -
{ @@ -52,21 +70,7 @@ export class UserAvatar extends React.PureComponent { ? : } - - { - displayStatus - ? ( -
- ) - : null - } -
+ ); } } diff --git a/scripts/apps/users/directives/UserEditDirective.ts b/scripts/apps/users/directives/UserEditDirective.ts index 55fe99a480..46942dac34 100644 --- a/scripts/apps/users/directives/UserEditDirective.ts +++ b/scripts/apps/users/directives/UserEditDirective.ts @@ -1,6 +1,8 @@ import {gettext} from 'core/utils'; import {appConfig} from 'appConfig'; import {applyDefault} from 'core/helpers/typescript-helpers'; +import {CC} from 'core/ui/configurable-ui-components'; +import {generate} from 'json-merge-patch'; UserEditDirective.$inject = ['api', 'notify', 'usersService', 'userList', 'session', 'lodash', 'langmap', '$location', '$route', 'superdesk', 'features', 'asset', 'privileges', @@ -28,16 +30,16 @@ export function UserEditDirective(api, notify, usersService, userList, session, scope.signOffPattern = usersService.signOffPattern; scope.hideSignOff = appConfig.user != null && appConfig.user.sign_off_mapping; + // disallow changing an avatar if custom avatars are configured for the instance + scope.canChangeAvatar = CC.UserAvatar == null; + scope.dirty = false; scope.errorMessage = null; scope.xmppEnabled = appConfig.xmpp_auth; scope.$watch('origUser', () => { - scope.user = _.create(scope.origUser); - if (scope.user.is_author === undefined) { - scope.user.is_author = true; - } + resetUser(scope.origUser); }); resetUser(scope.origUser); @@ -55,7 +57,7 @@ export function UserEditDirective(api, notify, usersService, userList, session, } } }); - scope.dirty = !angular.equals(user, scope.origUser); + scope.dirty = JSON.stringify(user) !== JSON.stringify(scope.origUser); }); api('roles').query() @@ -138,7 +140,7 @@ export function UserEditDirective(api, notify, usersService, userList, session, .then((reloadPage) => { scope.error = null; notify.info(gettext('Saving...')); - return usersService.save(scope.origUser, scope.user) + return usersService.save(scope.origUser, generate(scope.origUser, scope.user)) .then((response) => { scope.origUser = response; resetUser(scope.origUser); @@ -200,9 +202,13 @@ export function UserEditDirective(api, notify, usersService, userList, session, scope.dirty = false; if (angular.isDefined(user._id)) { return userList.getUser(user._id, true).then((u) => { + if (u.is_author === undefined) { + u.user.is_author = true; + } + scope.error = null; scope.origUser = u; - scope.user = _.create(u); + scope.user = Object.assign({}, u); scope.confirm = {password: null}; scope.show = {password: false}; scope._active = usersService.isActive(u); diff --git a/scripts/apps/users/directives/UserMentioDirective.ts b/scripts/apps/users/directives/UserMentionDirective.ts similarity index 96% rename from scripts/apps/users/directives/UserMentioDirective.ts rename to scripts/apps/users/directives/UserMentionDirective.ts index 859d973de3..7cca704a9d 100644 --- a/scripts/apps/users/directives/UserMentioDirective.ts +++ b/scripts/apps/users/directives/UserMentionDirective.ts @@ -1,7 +1,7 @@ import _ from 'lodash'; -UserMentioDirective.$inject = ['userList', 'desks', 'asset', '$q']; -export function UserMentioDirective(userList, desks, asset, $q) { +UserMentionDirective.$inject = ['userList', 'desks', 'asset', '$q']; +export function UserMentionDirective(userList, desks, asset, $q) { return { templateUrl: asset.templateUrl('apps/users/views/mentions.html'), link: function(scope, elem) { diff --git a/scripts/apps/users/directives/index.ts b/scripts/apps/users/directives/index.ts index a8f4c0f63b..ebbbb2cf58 100644 --- a/scripts/apps/users/directives/index.ts +++ b/scripts/apps/users/directives/index.ts @@ -14,6 +14,5 @@ export {PasswordConfirmDirective} from './PasswordConfirmDirective'; export {UserListDirective} from './UserListDirective'; export {UserListItemDirective} from './UserListItemDirective'; export {ActivityDirective} from './ActivityDirective'; -export {UserMentioDirective} from './UserMentioDirective'; export {UserInfoDirective} from './UserInfoDirective'; export {UserActivityDirective} from './UserActivityDirective'; diff --git a/scripts/apps/users/index.ts b/scripts/apps/users/index.ts index b7a2f21759..1f1c048752 100644 --- a/scripts/apps/users/index.ts +++ b/scripts/apps/users/index.ts @@ -15,6 +15,7 @@ import * as svc from './services'; import * as directive from './directives'; import * as config from './config'; import {gettext} from 'core/utils'; +import {UserMentionDirective} from './directives/UserMentionDirective'; /** * @ngdoc module @@ -50,7 +51,7 @@ export default angular.module('superdesk.apps.users', [ .directive('sdUserList', directive.UserListDirective) .directive('sdUserListItem', directive.UserListItemDirective) .directive('sdActivity', directive.ActivityDirective) - .directive('sdUserMentio', directive.UserMentioDirective) + .directive('sdUserMention', UserMentionDirective) .directive('sdUserInfo', directive.UserInfoDirective) .filter('username', () => (user) => user ? diff --git a/scripts/apps/users/services/UserPopupService.ts b/scripts/apps/users/services/UserPopupService.ts index 852655083c..f7701d66b8 100644 --- a/scripts/apps/users/services/UserPopupService.ts +++ b/scripts/apps/users/services/UserPopupService.ts @@ -79,16 +79,13 @@ export function UserPopupService($compile, $timeout, userList) { var box = popover.get(); box.html( - '
' + - '
' + - '' + - '
' + - '
' + - '
{{user.display_name}}
' + - '
' + - 'go to profile' + - '
', - ); + `
+ +
+
{{user.display_name}}
+
+ go to profile +
`); var popupScope = scope.$new(true); popupScope.user = user; diff --git a/scripts/apps/users/styles/users.scss b/scripts/apps/users/styles/users.scss index a8d229e81d..c03df307f1 100644 --- a/scripts/apps/users/styles/users.scss +++ b/scripts/apps/users/styles/users.scss @@ -26,17 +26,6 @@ margin-left: 10px; } -.admin-label { - background-color: #fff; - height: 12px; - width: 12px; - @include border-radius(50%); - position: absolute; - top: 3px; - left: 3px; - box-shadow: 0 0 0 1px #fff; -} - .users-table { //main list styles border-top: 2px solid #d7d7d7; @@ -69,9 +58,8 @@ height: 40px; border-bottom: 1px solid #ebebeb; position: relative; - .avatar { - margin: 5px 5px 5px 8px; - } + clear: both; + > div:not(.tooltip) { float: left; height: 30px; @@ -304,43 +292,10 @@ color: #888; } .profile-pic { - width: 82px; - height: 82px; + display: flex; position: relative; - margin: 0 auto; - .avatar { - width: 100%; - height: 100%; - @include border-radius(50%); - position: relative; - background-image: url('~images/avatar_200.png'); - &.initials { - font-size: 24px; - line-height: 82px; - font-weight: 300; - } - } - .change-photo { - display: none; - background-color: rgba(55,152,180,0.6); - color: #fff; - text-transform: uppercase; - font-size: 9px; - line-height: 15px; - text-decoration: none; - text-align: center; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height:30px; - letter-spacing: normal; - } - &:hover { - .change-photo { - display: block; - } - } + justify-content: center; + .disabled-label { position: absolute; bottom: 15%; @@ -553,29 +508,6 @@ Profile page styles } } - .profile-pic { - width: 160px; - height: 160px; - .avatar { - width: 160px; - height: 160px; - overflow: hidden; - img { - width: 160px; - max-width: 160px; - } - &.initials { - font-size: 48px; - line-height: 160px; - font-weight: 300; - } - } - .change-photo { - line-height: 28px; - } - } - - .other-content { position: absolute; top: 0; left: 600px; bottom: 0; right: 0; @@ -638,14 +570,6 @@ Profile page styles border:1px solid #e0e0e0; @include box-shadow(0 0 3px 0 rgba(0,0,0,0.15)); - .avatar-holder { - .avatar { - float: none; - margin: 0 auto; - } - height: 64px; - padding: 10px 20px; - } .title { height: 40px; line-height: 40px; diff --git a/scripts/apps/users/tests/users.spec.ts b/scripts/apps/users/tests/users.spec.ts index fa4cdda7e4..6673290eda 100644 --- a/scripts/apps/users/tests/users.spec.ts +++ b/scripts/apps/users/tests/users.spec.ts @@ -152,7 +152,7 @@ describe('mentio directive', () => { it('can return sorted users', inject(($rootScope, $compile) => { var scope = $rootScope.$new(true); - var elem = $compile('
')(scope); + var elem = $compile('
')(scope); scope.$digest(); @@ -196,6 +196,7 @@ describe('user edit form', () => { _readonly: {first_name: true, last_name: true, email: true}, is_active: true, need_activation: false, + user: {}, }; scope.user = user; diff --git a/scripts/apps/users/views/edit-form.html b/scripts/apps/users/views/edit-form.html index 93be6bb32b..c1bd64c407 100644 --- a/scripts/apps/users/views/edit-form.html +++ b/scripts/apps/users/views/edit-form.html @@ -1,273 +1,282 @@
-
- - -
- -
-
-
-
- {{ user.FullName}} - Change Photo -
- disabled - inactive -
-

{{ user.display_name}}

-
{{ user.username}}
-
- -
- -
    -
  • - -
    • -
  • - -
    • -
+
+
+ +
+
+
+
+ + disabled + inactive +
+
+ +
+

{{ user.display_name}}

+
{{ user.username}}
+
+ +
- -
-
- {{ :: 'Administrator'|translate }} - {{ :: 'Author'|translate }} +
    +
  • + +
    • +
  • + +
    • +
-
-
- - -
-
-
- - -
+ +
+
+ {{ :: 'Administrator'|translate }} + {{ :: 'Author'|translate }} +
-
-
- - -
This field is required.
+
+
+ + +
-
-
-
- - -
This field is required.
+
+ +
-
-
-
- - -
This field is required.
-
sorry, this username is already taken.
-
- - please use only letters (a-z), numbers (0-9), dashes (—), underscores (_), apostrophes (') and periods (.) +
+
+ + +
This field is required.
-
-
-
- -
-
- reset password +
+
+ + +
This field is required.
+
-
-
-
- +
+
+ + +
This field is required.
+
sorry, this username is already taken.
+
+ + please use only letters (a-z), numbers (0-9), dashes (—), underscores (_), apostrophes (') and periods (.) +
+
-
- change password + +
+
+ +
+
+ reset password +
-
-