diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 5133e0101..dd8cf9f45 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -43,6 +43,10 @@ define([ "toolbar-header-spreadsheet", "toolbar-header-presentation", + "text-toolbar-header-on-background-document", + "text-toolbar-header-on-background-spreadsheet", + "text-toolbar-header-on-background-presentation", + "background-normal", "background-toolbar", "background-toolbar-additional", diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 6c34087a1..f4c5c5c9e 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -52,7 +52,7 @@ define([ Common.Views.Header = Backbone.View.extend(_.extend(function(){ var storeUsers, appConfig; - var $userList, $panelUsers, $btnUsers; + var $userList, $panelUsers, $btnUsers, $btnUserName; var _readonlyRights = false; var templateUserItem = @@ -85,28 +85,34 @@ define([ '' + '
' + // '' + - '' + @@ -128,13 +134,21 @@ define([ // '' + '' + '
' + - '' + + '
' + + // '
' + + '' + + '' + + '
' + ''; function onResetUsers(collection, opts) { var usercount = collection.getVisibleEditingCount(); if ( $userList ) { - if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit) { + if (usercount > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) { $userList.html(templateUserList({ users: collection.chain().filter(function(item){return item.get('online') && !item.get('view') && !item.get('hidden')}).groupBy(function(item) {return item.get('idOriginal');}).value(), usertpl: _.template(templateUserItem), @@ -165,53 +179,27 @@ define([ function applyUsers(count, originalCount) { if (!$btnUsers) return; - var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document + var has_edit_users = count > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit); // has other user(s) who edit document if ( has_edit_users ) { - $btnUsers - .attr('data-toggle', 'dropdown') - .addClass('dropdown-toggle') - .menu = true; - $panelUsers['show'](); + $btnUsers.find('.caption').html(originalCount); } else { - $btnUsers - .removeAttr('data-toggle') - .removeClass('dropdown-toggle') - .menu = false; - - $panelUsers[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide'](); - } - - $btnUsers.find('.caption') - .css({'font-size': ((has_edit_users) ? '12px' : '14px'), - 'margin-top': ((has_edit_users) ? '0' : '-1px')}) - .html((has_edit_users) ? originalCount : '+'); - - var usertip = $btnUsers.data('bs.tooltip'); - if ( usertip ) { - usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm; - usertip.setContent(); + $panelUsers['hide'](); } } function onLostEditRights() { _readonlyRights = true; - $panelUsers && $panelUsers.find('#tlb-change-rights').hide(); - $btnUsers && !$btnUsers.menu && $panelUsers.hide(); + this.btnShare && this.btnShare.setVisible(false); } function onUsersClick(e) { - if ( !$btnUsers.menu ) { - $panelUsers.removeClass('open'); - Common.NotificationCenter.trigger('collaboration:sharing'); - } else { - var usertip = $btnUsers.data('bs.tooltip'); - if ( usertip ) { - if ( usertip.dontShow===undefined) - usertip.dontShow = true; + var usertip = $btnUsers.data('bs.tooltip'); + if ( usertip ) { + if ( usertip.dontShow===undefined) + usertip.dontShow = true; - usertip.hide(); - } + usertip.hide(); } } @@ -255,6 +243,14 @@ define([ Common.NotificationCenter.trigger('markfavorite', !me.options.favorite); }); + if (me.btnShare) { + me.btnShare.on('click', function (e) { + Common.NotificationCenter.trigger('collaboration:sharing'); + }); + me.btnShare.updateHint(me.tipAccessRights); + me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)); + } + if ( me.logo ) me.logo.children(0).on('click', function (e) { var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ? @@ -277,33 +273,16 @@ define([ var editingUsers = storeUsers.getVisibleEditingCount(); $btnUsers.tooltip({ - title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights, - titleNorm: me.tipAccessRights, - titleExt: me.tipViewUsers, + title: me.tipUsers, placement: 'bottom', html: true }); - $btnUsers.on('click', onUsersClick.bind(me)); - - var $labelChangeRights = $panelUsers.find('#tlb-change-rights'); - $labelChangeRights.on('click', function(e) { - $panelUsers.removeClass('open'); - Common.NotificationCenter.trigger('collaboration:sharing'); - }); - - $labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide'](); - $panelUsers[(editingUsers > 1 || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide'](); + $panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide'](); } - if (appConfig.user.guest && appConfig.canRenameAnonymous) { - if (me.labelUserName) { - me.labelUserName.addClass('clickable'); - me.labelUserName.on('click', function (e) { - Common.NotificationCenter.trigger('user:rename'); - }); - } else if (me.btnUserName) { + if (me.btnUserName) { me.btnUserName.on('click', function (e) { Common.NotificationCenter.trigger('user:rename'); }); @@ -353,9 +332,6 @@ define([ }); } } - - if ( me.btnOptions ) - me.btnOptions.updateHint(me.tipViewSettings); } function onFocusDocName(e){ @@ -413,9 +389,6 @@ define([ } } - function onContentThemeChangedToDark(isdark) { - } - return { options: { branding: {}, @@ -445,7 +418,6 @@ define([ id: 'btn-goback', cls: 'btn-header', iconCls: 'toolbar__icon icon--inverse btn-goback', - split: true, dataHint: '0', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -458,17 +430,6 @@ define([ reset : onResetUsers }); - me.btnOptions = new Common.UI.Button({ - cls: 'btn-header no-caret', - iconCls: 'toolbar__icon icon--inverse btn-ic-options', - menu: true, - dataHint: '0', - dataHintDirection: 'bottom', - dataHintOffset: 'big' - }); - - me.mnuZoom = {options: {value: 100}}; - me.btnFavorite = new Common.UI.Button({ id: 'btn-favorite', cls: 'btn-header', @@ -480,10 +441,9 @@ define([ Common.NotificationCenter.on({ 'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);}, - 'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);} + 'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}, + 'collaboration:sharingdeny': function(mode) {Common.Utils.asyncCall(onLostEditRights, me, mode);} }); - Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights); - Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this)); Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this)); }, @@ -524,7 +484,7 @@ define([ if ( role == 'right' ) { var $html = $(_.template(templateRightBox)({ tipUsers: this.labelCoUsersDescr, - txtAccessRights: this.txtAccessRights + textShare: this.textShare })); if ( !me.labelDocName ) { @@ -564,22 +524,43 @@ define([ if ( config.canEdit && config.canRequestEditRights ) this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit'), undefined, 'bottom', 'big'); } - me.btnOptions.render($html.find('#slot-btn-options')); if (!config.isEdit || config.customization && !!config.customization.compactHeader) { - if (config.user.guest && config.canRenameAnonymous) - me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'), undefined, 'bottom', 'big' ); - else { + if (config.user.guest && config.canRenameAnonymous) { + me.btnUserName = new Common.UI.Button({ + el: $html.findById('.slot-btn-user-name'), + cls: 'btn-header', + dataHint:'0', + dataHintDirection: 'bottom', + dataHintOffset: 'big', + visible: true + }); + me.btnUserName.cmpEl.removeClass('hidden'); + } else { me.elUserName = $html.find('.btn-current-user'); me.elUserName.removeClass('hidden'); } + $btnUserName = $html.find('.color-user-name'); me.setUserName(me.options.userName); } + if (!_readonlyRights && config && (config.sharingSettingsUrl && config.sharingSettingsUrl.length || config.canRequestSharingSettings)) { + me.btnShare = new Common.UI.Button({ + cls: 'btn-header btn-header-share', + iconCls: 'toolbar__icon icon--inverse btn-users-share', + caption: me.textShare, + dataHint: '0', + dataHintDirection: 'bottom', + dataHintOffset: 'big' + }); + me.btnShare.render($html.find('#slot-btn-share')); + } else { + $html.find('#slot-btn-share').hide(); + } + $userList = $html.find('.cousers-list'); $panelUsers = $html.find('.box-cousers'); - $btnUsers = $html.find('.btn-users'); - + $btnUsers = $panelUsers.find('> .btn-users'); $panelUsers.hide(); return $html; } else @@ -591,7 +572,22 @@ define([ me.labelDocName.val( me.documentCaption ); me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength); - me.labelUserName = $('> #title-user-name', $html); + if (config.user.guest && config.canRenameAnonymous) { + me.btnUserName = new Common.UI.Button({ + el: $html.findById('.slot-btn-user-name'), + cls: 'btn-header', + dataHint:'0', + dataHintDirection: 'bottom', + dataHintOffset: 'big', + visible: true + }); + me.btnUserName.cmpEl.removeClass('hidden'); + } + else { + me.elUserName = $html.find('.btn-current-user'); + me.elUserName.removeClass('hidden'); + } + $btnUserName = $html.find('.color-user-name'); me.setUserName(me.options.userName); if ( config.canPrint && config.isEdit ) { @@ -761,23 +757,17 @@ define([ }, setUserName: function(name) { - if ( !!this.labelUserName ) { - if ( !!name ) { - this.labelUserName.text(name).show(); - } else this.labelUserName.hide(); - } else { - this.options.userName = name; - if ( this.btnUserName ) { - this.btnUserName.updateHint(name); - } else if (this.elUserName) { - this.elUserName.tooltip({ - title: Common.Utils.String.htmlEncode(name), - placement: 'cursor', - html: true - }); - } + this.options.userName = name; + if ( this.btnUserName ) { + this.btnUserName.updateHint(name); + } else if (this.elUserName) { + this.elUserName.tooltip({ + title: Common.Utils.String.htmlEncode(name), + placement: 'cursor', + html: true + }); } - + $btnUserName && $btnUserName.text(this.getInitials(name)); return this; }, @@ -786,24 +776,23 @@ define([ return this.btnSave; else if (type == 'users') return $panelUsers; + else if (type == 'share') + return this.btnShare; }, lockHeaderBtns: function (alias, lock) { var me = this; if ( alias == 'users' ) { - if ( lock ) - $btnUsers.addClass('disabled').attr('disabled', 'disabled'); else + if ( lock ) { + $btnUsers.addClass('disabled').attr('disabled', 'disabled'); + } else { $btnUsers.removeClass('disabled').removeAttr('disabled'); + } + if (me.btnShare) { + me.btnShare.setDisabled(lock); + } } else if ( alias == 'rename-user' ) { - if (me.labelUserName) { - if ( lock ) { - me.labelUserName.removeClass('clickable'); - me.labelUserName.addClass('disabled'); - } else { - me.labelUserName.addClass('clickable'); - me.labelUserName.removeClass('disabled'); - } - } else if (me.btnUserName) { + if (me.btnUserName) { me.btnUserName.setDisabled(lock); } } else { @@ -824,20 +813,21 @@ define([ switch ( alias ) { case 'undo': _lockButton(me.btnUndo); break; case 'redo': _lockButton(me.btnRedo); break; - case 'opts': _lockButton(me.btnOptions); break; default: break; } } }, - fakeMenuItem: function() { - return { - conf: {checked: false, disabled: false}, - setChecked: function (val) { this.conf.checked = val; }, - isChecked: function () { return this.conf.checked; }, - setDisabled: function (val) { this.conf.disabled = val; }, - isDisabled: function () { return this.conf.disabled; } - }; + getInitials: function(name) { + var fio = name.split(' '); + var initials = fio[0].substring(0, 1).toUpperCase(); + for (var i = fio.length-1; i>0; i--) { + if (fio[i][0]!=='(' && fio[i][0]!==')') { + initials += fio[i].substring(0, 1).toUpperCase(); + break; + } + } + return initials; }, textBack: 'Go to Documents', @@ -846,6 +836,7 @@ define([ tipAccessRights: 'Manage document access rights', labelCoUsersDescr: 'Document is currently being edited by several users.', tipViewUsers: 'View users and manage document access rights', + tipUsers: 'View users', tipDownload: 'Download file', tipPrint: 'Print file', tipGoEdit: 'Edit current file', @@ -860,7 +851,8 @@ define([ tipViewSettings: 'View Settings', textRemoveFavorite: 'Remove from Favorites', textAddFavorite: 'Mark as favorite', - textHideNotes: 'Hide Notes' + textHideNotes: 'Hide Notes', + textShare: 'Share' } }(), Common.Views.Header || {})) }); diff --git a/apps/common/main/resources/img/header/buttons.svg b/apps/common/main/resources/img/header/buttons.svg index 3e4d0dbf8..25c94131f 100644 --- a/apps/common/main/resources/img/header/buttons.svg +++ b/apps/common/main/resources/img/header/buttons.svg @@ -178,4 +178,7 @@ + + + diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-users-share.png b/apps/common/main/resources/img/toolbar/1.25x/btn-users-share.png new file mode 100644 index 000000000..056533a2c Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-users-share.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-users-share.png b/apps/common/main/resources/img/toolbar/1.5x/btn-users-share.png new file mode 100644 index 000000000..69412b80c Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-users-share.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-users-share.png b/apps/common/main/resources/img/toolbar/1.75x/btn-users-share.png new file mode 100644 index 000000000..90d9e4e43 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-users-share.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-users-share.png b/apps/common/main/resources/img/toolbar/1x/btn-users-share.png new file mode 100644 index 000000000..ce15fa8e8 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-users-share.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-users-share.png b/apps/common/main/resources/img/toolbar/2x/btn-users-share.png new file mode 100644 index 000000000..687a67ee6 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-users-share.png differ diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 6463ae64d..610768f56 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -5,6 +5,10 @@ --toolbar-header-spreadsheet: #40865c; --toolbar-header-presentation: #aa5252; + --text-toolbar-header-on-background-document: #38567A; + --text-toolbar-header-on-background-spreadsheet: #336B49; + --text-toolbar-header-on-background-presentation: #8D4444; + --background-normal: #fff; --background-toolbar: #f1f1f1; --background-toolbar-additional: #f1f1f1; @@ -55,7 +59,7 @@ --icon-normal: #444; --icon-normal-pressed: #fff; --icon-inverse: #444; - --icon-toolbar-header: fade(#fff, 80%); + --icon-toolbar-header: #fff; --icon-notification-badge: #000; --icon-contrast-popover: #fff; --icon-success: #5b9f27; diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 9dc4c765b..fa525ed83 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -5,6 +5,10 @@ --toolbar-header-spreadsheet: #2a2a2a; --toolbar-header-presentation: #2a2a2a; + --text-toolbar-header-on-background-document: #2a2a2a; + --text-toolbar-header-on-background-spreadsheet: #2a2a2a; + --text-toolbar-header-on-background-presentation: #2a2a2a; + --background-normal: #333; --background-toolbar: #404040; --background-toolbar-additional: #505050; @@ -56,7 +60,7 @@ --icon-normal: fade(#fff, 80%); --icon-normal-pressed: fade(#fff, 80%); --icon-inverse: #444; - --icon-toolbar-header: fade(#fff, 80%); + --icon-toolbar-header: #fff; --icon-notification-badge: #000; --icon-contrast-popover: #fff; --icon-success: #090; diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index d524f52e1..ad67d4525 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -3,6 +3,10 @@ @toolbar-header-spreadsheet-ie: #40865c; @toolbar-header-presentation-ie: #aa5252; +@text-toolbar-header-on-background-document-ie: #38567A; +@text-toolbar-header-on-background-spreadsheet-ie: #336B49; +@text-toolbar-header-on-background-presentation-ie: #8D4444; + @background-normal-ie: #fff; @background-toolbar-ie: #f1f1f1; @background-toolbar-additional-ie: #f1f1f1; @@ -51,7 +55,7 @@ @icon-normal-ie: #444; @icon-normal-pressed-ie: #fff; @icon-inverse-ie: #444; -@icon-toolbar-header-ie: fade(#fff, 80%); +@icon-toolbar-header-ie: #fff; @icon-notification-badge-ie: #000; @icon-contrast-popover-ie: #fff; @icon-success-ie: #5b9f27; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 8b352170d..a4290ac8d 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -15,6 +15,10 @@ --toolbar-header-spreadsheet: #40865c; --toolbar-header-presentation: #aa5252; + --text-toolbar-header-on-background-document: #38567A; + --text-toolbar-header-on-background-spreadsheet: #336B49; + --text-toolbar-header-on-background-presentation: #8D4444; + --background-normal: #fff; --background-toolbar: #f7f7f7; --background-toolbar-additional: #efefef; diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index db1633f71..5bd584d65 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -162,143 +162,6 @@ margin-top: 15px; } -.btn-users { - display: flex; - align-items: center; - cursor: pointer; - padding: 0 12px; - height: 100%; - - .icon { - display: inline-block; - width: 20px; - height: 20px; - background-repeat: no-repeat; - padding: 0; - - &.icon--inverse { - background-position-x: @button-header-normal-icon-offset-x-ie; - background-position-x: @button-header-normal-icon-offset-x; - } - } - - .caption { - cursor: pointer; - font-size: 14px; - } - - &.disabled { - opacity: @component-disabled-opacity; - pointer-events: none; - } -} - -.btn-current-user { - display: flex; - align-items: center; - height: 100%; - width: 40px; - padding: 0 10px; - - .icon { - width: 20px; - height: 20px; - display: inline-block; - background-repeat: no-repeat; - padding: 0; - - &.icon--inverse { - background-position-x: -20px; - } - } - - svg.icon { - vertical-align: middle; - - @media - only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-resolution: 1.5dppx), - only screen and (min-resolution: 144dpi) { - width:calc(~"28px/1.5"); - height:calc(~"28px/1.5"); - } - } -} - -.cousers-menu { - position: fixed; - top: @height-tabs - 8px; - left: 100%; - margin-left: -285px; - - padding: 14px; - width: 285px; - font-size: 12px; - - z-index: 1042; - - .top-title & { - top: @height-title + @height-tabs - 8px; - } - - > label { - white-space: normal; - } - - label { - color: @text-normal-ie; - color: @text-normal; - } - - .cousers-list { - margin-top: 15px; - - ul { - margin: 0; - padding: 0; - overflow: hidden; - max-height: 195px; - position: relative; - - li { - list-style: none; - padding: 2px 0; - overflow: hidden; - - &.offline, &.viewmode { - display: none; - } - } - } - - .color { - width: 12px; - height: 12px; - display: inline-block; - vertical-align: middle; - border: @scaled-one-px-value solid @border-toolbar; - margin: 0 5px 1px 0; - } - - .user-name { - color: @text-normal-ie; - color: @text-normal; - font-size: 12px; - .font-weight-bold(); - white-space: nowrap; - cursor: default; - - label { - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - max-width: 200px; - .font-weight-bold(); - } - } - } -} - .hedset { font-size: 0; display: flex; @@ -385,6 +248,204 @@ } } +.btn-users { + display: flex; + align-items: center; + cursor: pointer; + padding: 0 8px 0 6px; + height: 100%; + + .inner-box-icon { + width: 28px; + position: relative; + + > svg { + position: absolute; + width: 28px; + height: 20px; + top: 50%; + margin-top: -10px; + fill: @icon-toolbar-header-ie; + fill: @icon-toolbar-header; + } + } + + .caption { + cursor: pointer; + font-size: 9px; + margin-left: -18px; + width: 16px; + text-align: center; + overflow: hidden; + } + + &:not(:disabled) { + .inner-box-icon, .caption { + opacity: @header-component-normal-icon-opacity; + } + } + + &:hover:not(:disabled) { + .inner-box-icon, .caption { + opacity: @header-component-hover-icon-opacity; + } + } + + &:active:not(:disabled), &.active:not(:disabled) { + .inner-box-icon, .caption { + opacity: @header-component-active-icon-opacity; + } + } + + &.disabled { + opacity: @component-disabled-opacity; + pointer-events: none; + } +} + +.btn-header-share { + display: flex; + align-items: center; + padding: 0 12px; + width: auto; + + .caption { + margin: 2px 0 0 2px; + color: @text-toolbar-header-ie; + color: @text-toolbar-header; + } + + &:not(:disabled) { + .caption { + opacity: @header-component-normal-icon-opacity; + } + } + + &:hover:not(:disabled) { + .caption { + opacity: @header-component-hover-icon-opacity; + } + } + + &:active:not(:disabled), &.active:not(:disabled) { + .caption { + opacity: @header-component-active-icon-opacity; + } + } +} + +.btn-current-user { + display: flex; + align-items: center; + height: 100%; + width: 40px; + padding: 1px 3px; + border: var(--scaled-one-pixel, 1px) solid transparent; +} + +.btn-current-user, .btn-header { + &:not(:disabled) .color-user-name { + opacity: @header-component-normal-icon-opacity; + } + + &:active, &.active .color-user-name { + opacity: @header-component-active-icon-opacity; + } + + &:hover:not(:disabled) .color-user-name { + opacity: @header-component-hover-icon-opacity; + } + + .color-user-name { + width: 20px; + height: 20px; + border-radius: 20px; + background-color: @icon-toolbar-header-ie; + background-color: @icon-toolbar-header; + color: @toolbar-header-text-on-background-ie; + color: @toolbar-header-text-on-background; + font-size: 10px; + line-height: 20px; + overflow: hidden; + margin: 0 6px; + text-align: center; + } +} + +.cousers-menu { + position: fixed; + top: @height-tabs - 8px; + left: 100%; + margin-left: -285px; + + padding: 14px; + width: 285px; + font-size: 12px; + + z-index: 1042; + + .top-title & { + top: @height-title + @height-tabs - 8px; + } + + > label { + white-space: normal; + } + + label { + color: @text-normal-ie; + color: @text-normal; + } + + .cousers-list { + margin-top: 15px; + + ul { + margin: 0; + padding: 0; + overflow: hidden; + max-height: 195px; + position: relative; + + li { + list-style: none; + padding: 2px 0; + overflow: hidden; + + &.offline, &.viewmode { + display: none; + } + } + } + + .color { + width: 12px; + height: 12px; + display: inline-block; + vertical-align: middle; + border: @scaled-one-px-value solid @border-toolbar; + margin: 0 5px 1px 0; + } + + .user-name { + color: @text-normal-ie; + color: @text-normal; + font-size: 12px; + .font-weight-bold(); + white-space: nowrap; + cursor: default; + + label { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 200px; + .font-weight-bold(); + } + } + } +} + #box-document-title { background-color: @header-background-color-ie; background-color: @header-background-color; @@ -439,22 +500,6 @@ border: 0 none; cursor: default; } - #title-user-name { - white-space: pre; - text-overflow: ellipsis; - overflow: hidden; - text-align: right; - font-size: 11px; - width: 200px; - height: 100%; - padding: 0 12px; - line-height: @height-title; - pointer-events: none; - &.clickable { - cursor: pointer; - pointer-events: auto; - } - } .lr-separator { flex-grow: 1; diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 8c9e8c6d0..40c34c3e5 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -461,10 +461,29 @@ } // TODO: move to appropriate module - .btn-header, .btn-users { - &:not(:active) .icon--inverse { - background-position-x: 0; - background-position-x: @button-small-normal-icon-offset-x; + .btn-current-user, .btn-header { + .color-user-name { + background-color: @text-normal-ie; + background-color: @text-normal; + color: @text-inverse-ie; + color: @text-inverse; + } + } + + .btn-header, .btn-users, .btn-header-share { + .icon { + &.icon--inverse { + background-position-x: 0 !important; + background-position-x: @button-small-normal-icon-offset-x !important; + } + } + + &:active, &.active { + &:not(.disabled) .icon.toolbar__icon { + &.icon--inverse { + background-position-x: @button-small-active-icon-offset-x !important; + } + } } svg.icon { @@ -477,6 +496,13 @@ color: @text-normal; } + .inner-box-icon { + > svg { + fill: @text-normal-ie; + fill: @text-normal; + } + } + &:hover:not(.disabled) { background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; @@ -487,34 +513,33 @@ background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; - .icon--inverse { - background-position-x: @button-small-active-icon-offset-x; - } - svg.icon { fill: @icon-toolbar-header-ie; fill: @icon-toolbar-header; } .caption { - color: @text-inverse-ie; - color: @text-inverse; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + .inner-box-icon { + > svg { + fill: @text-normal-pressed-ie; + fill: @text-normal-pressed; + } + } + + .color-user-name { + background-color: @text-normal-pressed-ie; + background-color: @text-normal-pressed; + color: @highlight-button-pressed-ie; + color: @highlight-button-pressed; } } } } - .btn-current-user { - .icon--inverse { - background-position-x: 0; - } - - svg.icon { - fill: @icon-toolbar-header-ie; - fill: @icon-toolbar-header; - } - } - #rib-doc-name { color: @text-normal-ie; color: @text-normal; diff --git a/apps/documenteditor/main/app/controller/LeftMenu.js b/apps/documenteditor/main/app/controller/LeftMenu.js index 270215f25..9eccb802c 100644 --- a/apps/documenteditor/main/app/controller/LeftMenu.js +++ b/apps/documenteditor/main/app/controller/LeftMenu.js @@ -46,7 +46,7 @@ define([ 'common/main/lib/view/SaveAsDlg', 'documenteditor/main/app/view/LeftMenu', 'documenteditor/main/app/view/FileMenu', - 'documenteditor/main/app/view/ViewTab', + 'documenteditor/main/app/view/ViewTab' ], function () { 'use strict'; @@ -64,7 +64,6 @@ define([ 'hide': _.bind(this.onHideChat, this) }, 'Common.Views.Header': { - 'file:settings': _.bind(this.clickToolbarSettings,this), 'history:show': function () { if ( !this.leftMenu.panelHistory.isVisible() ) this.clickMenuFileItem('header', 'history'); diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index b46515549..ea7b89e84 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -607,6 +607,7 @@ define([ this.api.asc_coAuthoringDisconnect(); appHeader.setCanRename(false); appHeader.getButton('users') && appHeader.getButton('users').hide(); + appHeader.getButton('share') && appHeader.getButton('share').setVisible(false); this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory(); this.disableEditing(true); this._renameDialog && this._renameDialog.close(); @@ -1595,12 +1596,10 @@ define([ reviewController = application.getController('Common.Controllers.ReviewChanges'); reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document}); - if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode - var toolbarController = application.getController('Toolbar'); - toolbarController && toolbarController.setApi(me.api); - - if (!this.appOptions.isEdit) return; + var toolbarController = application.getController('Toolbar'); + toolbarController && toolbarController.setApi(me.api); + if (this.appOptions.isEdit) { var rightmenuController = application.getController('RightMenu'), fontsControllers = application.getController('Common.Controllers.Fonts'); fontsControllers && fontsControllers.setApi(me.api); diff --git a/apps/documenteditor/main/app/controller/Statusbar.js b/apps/documenteditor/main/app/controller/Statusbar.js index 2418b501d..27ad9b07e 100644 --- a/apps/documenteditor/main/app/controller/Statusbar.js +++ b/apps/documenteditor/main/app/controller/Statusbar.js @@ -64,9 +64,6 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.statusbar); }.bind(this) }, - 'Common.Views.Header': { - 'statusbar:hide': _.bind(me.onChangeCompactView, me) - }, 'ViewTab': { 'statusbar:hide': _.bind(me.onChangeCompactView, me) } diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index fc305476b..12b31b2b5 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -125,7 +125,6 @@ define([ 'menu:show': this.onFileMenu.bind(this, 'show') }, 'Common.Views.Header': { - 'toolbar:setcompact': this.onChangeCompactView.bind(this), 'print': function (opts) { var _main = this.getApplication().getController('Main'); _main.onPrint(); @@ -3184,11 +3183,8 @@ define([ var links = me.getApplication().getController('Links'); links.setApi(me.api).setConfig({toolbar: me}); Array.prototype.push.apply(me.toolbar.lockControls, links.getView('Links').getButtons()); - - var viewtab = me.getApplication().getController('ViewTab'); - viewtab.setApi(me.api).setConfig({toolbar: me, mode: config}); - Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons()); } + if ( config.isEdit && config.canFeatureContentControl && config.canFeatureForms || config.isRestrictedEdit && config.canFillForms ) { if (config.isFormCreator) { tab = {caption: me.textTabForms, action: 'forms', dataHintTitle: 'M'}; @@ -3204,6 +3200,15 @@ define([ } } config.isEdit && config.canFeatureContentControl && me.onChangeSdtGlobalSettings(); + + tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'}; + var viewtab = me.getApplication().getController('ViewTab'); + viewtab.setApi(me.api).setConfig({toolbar: me, mode: config}); + $panel = viewtab.createToolbarPanel(); + if ($panel) { + me.toolbar.addTab(tab, $panel, 7); + me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view')); + } }, onAppReady: function (config) { diff --git a/apps/documenteditor/main/app/controller/ViewTab.js b/apps/documenteditor/main/app/controller/ViewTab.js index c525fc980..6fbd3caf7 100644 --- a/apps/documenteditor/main/app/controller/ViewTab.js +++ b/apps/documenteditor/main/app/controller/ViewTab.js @@ -61,12 +61,15 @@ define([ Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this)); Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); + Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this)); }, setApi: function (api) { if (api) { this.api = api; this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this)); + this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this)); + Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); } return this; }, @@ -79,15 +82,7 @@ define([ mode: mode, compactToolbar: this.toolbar.toolbar.isCompactView }); - if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) { - this.view.chStatusbar.$el.remove(); - var slotChkRulers = this.view.chRulers.$el, - groupRulers = slotChkRulers.closest('.group'), - groupToolbar = this.view.chToolbar.$el.closest('.group'); - groupToolbar.find('.elset')[1].append(slotChkRulers[0]); - groupRulers.remove(); - this.view.cmpEl.find('.separator-rulers').remove(); - } + this.addListeners({ 'ViewTab': { 'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'), @@ -104,11 +99,6 @@ define([ 'view:hide': _.bind(function (statusbar, state) { this.view.chStatusbar.setValue(!state, true); }, this) - }, - 'Common.Views.Header': { - 'rulers:hide': _.bind(function (isChecked) { - this.view.chRulers.setValue(!isChecked, true); - }, this) } }); }, @@ -117,13 +107,17 @@ define([ this.view && this.view.SetDisabled(state); }, + createToolbarPanel: function() { + return this.view.getPanel(); + }, + getView: function(name) { return !name && this.view ? this.view : Backbone.Controller.prototype.getView.call(this, name); }, onCoAuthoringDisconnect: function() { - this.SetDisabled(true); + Common.Utils.lockControls(Common.enumLock.lostConnect, true, {array: this.view.lockedControls}); }, onAppReady: function (config) { @@ -134,6 +128,21 @@ define([ })).then(function(){ me.view.setEvents(); + if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) { + me.view.chStatusbar.$el.remove(); + var slotChkRulers = me.view.chRulers.$el, + groupRulers = slotChkRulers.closest('.group'), + groupToolbar = me.view.chToolbar.$el.closest('.group'); + groupToolbar.find('.elset')[1].append(slotChkRulers[0]); + groupRulers.remove(); + me.view.$el.find('.separator-rulers').remove(); + } + + if (!config.isEdit) { // if view tab will be visible in view/restricted-editing mode + me.view.chRulers.hide(); + me.view.$el.find('.separator-rulers').remove(); + } + me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me)) .on('changed:before',_.bind(me.onZoomChanged, me, true)) .on('changed:after', _.bind(me.onZoomChanged, me, false)) @@ -173,6 +182,10 @@ define([ } }, + onDocumentReady: function() { + Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls}); + }, + onZoomChange: function (percent, type) { this.view.btnFitToPage.toggle(type == 2, true); this.view.btnFitToWidth.toggle(type == 1, true); @@ -229,7 +242,6 @@ define([ Common.localStorage.setBool('de-hidden-rulers', !checked); Common.Utils.InternalSettings.set("de-hidden-rulers", !checked); this.api.asc_SetViewRulers(checked); - this.view.fireEvent('rulers:hide', [!checked]); Common.NotificationCenter.trigger('layout:changed', 'rulers'); Common.NotificationCenter.trigger('edit:complete', this.view); }, diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index d8258c6e8..c1fae7b2b 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -80,7 +80,6 @@ define([ toolbar.setExtra('left', me.header.getPanel('left', config)); }, 'view:compact' : function (toolbar, state) { - me.header.mnuitemCompactToolbar.setChecked(state, true); me.viewport.vlayout.getItem('toolbar').height = state ? Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal'); }, @@ -105,21 +104,12 @@ define([ if ( me.header.btnSave ) me.header.btnSave.setDisabled(state); } - }, - 'ViewTab': { - 'rulers:hide': function (state) { - me.header.mnuitemHideRulers.setChecked(state, true); - }, - 'statusbar:hide': function (view, state) { - me.header.mnuitemHideStatusBar.setChecked(state, true); - } } }); }, setApi: function(api) { this.api = api; - this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this)); this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this)); Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this)); }, @@ -156,13 +146,8 @@ define([ this.boxSdk = $('#editor_sdk'); this.boxSdk.css('border-left', 'none'); - this.header.mnuitemFitPage = this.header.fakeMenuItem(); - this.header.mnuitemFitWidth = this.header.fakeMenuItem(); - Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this)); Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); - Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); - Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this)); }, onAppShowed: function (config) { @@ -213,131 +198,6 @@ define([ }, onAppReady: function (config) { - var me = this; - if ( me.header.btnOptions ) { - var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator); - if ( config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator) { - if ( Common.localStorage.itemExists("de-compact-toolbar") ) { - compactview = Common.localStorage.getBool("de-compact-toolbar"); - } else - if ( config.customization && config.customization.compactToolbar ) - compactview = true; - } - - me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({ - caption: me.header.textCompactView, - checked: compactview, - checkable: true, - value: 'toolbar' - }); - if (!config.isEdit) { - me.header.mnuitemCompactToolbar.hide(); - Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){ - if ((action=='plugins' || action=='review' || action=='forms') && visible) { - me.header.mnuitemCompactToolbar.show(); - } - }, this)); - } - - me.header.mnuitemHideStatusBar = new Common.UI.MenuItem({ - caption: me.header.textHideStatusBar, - checked: Common.localStorage.getBool("de-hidden-status"), - checkable: true, - value: 'statusbar' - }); - - if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) - me.header.mnuitemHideStatusBar.hide(); - - me.header.mnuitemHideRulers = new Common.UI.MenuItem({ - caption: me.header.textHideLines, - checked: Common.Utils.InternalSettings.get("de-hidden-rulers"), - checkable: true, - value: 'rulers' - }); - if (!config.isEdit) - me.header.mnuitemHideRulers.hide(); - - me.header.menuItemsDarkMode = new Common.UI.MenuItem({ - caption: me.txtDarkMode, - checkable: true, - checked: Common.UI.Themes.isContentThemeDark(), - value: 'mode:dark' - }); - - me.header.mnuitemFitPage = new Common.UI.MenuItem({ - caption: me.textFitPage, - checkable: true, - checked: me.header.mnuitemFitPage.isChecked(), - value: 'zoom:page' - }); - - me.header.mnuitemFitWidth = new Common.UI.MenuItem({ - caption: me.textFitWidth, - checkable: true, - checked: me.header.mnuitemFitWidth.isChecked(), - value: 'zoom:width' - }); - - me.header.mnuZoom = new Common.UI.MenuItem({ - template: _.template([ - '' - ].join('')), - stopPropagation: true, - value: me.header.mnuZoom.options.value - }); - - me.header.btnOptions.setMenu(new Common.UI.Menu({ - cls: 'pull-right', - style: 'min-width: 180px;', - items: [ - me.header.mnuitemCompactToolbar, - me.header.mnuitemHideStatusBar, - me.header.mnuitemHideRulers, - {caption:'--'}, - me.header.menuItemsDarkMode, - {caption:'--'}, - me.header.mnuitemFitPage, - me.header.mnuitemFitWidth, - me.header.mnuZoom, - {caption:'--'}, - new Common.UI.MenuItem({ - caption: me.header.textAdvSettings, - value: 'advanced' - }) - ] - }) - ); - - var _on_btn_zoom = function (btn) { - btn == 'up' ? me.api.zoomIn() : me.api.zoomOut(); - Common.NotificationCenter.trigger('edit:complete', me.header); - }; - - (new Common.UI.Button({ - el : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el), - cls : 'btn-toolbar' - })).on('click', _on_btn_zoom.bind(me, 'down')); - - (new Common.UI.Button({ - el : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el), - cls : 'btn-toolbar' - })).on('click', _on_btn_zoom.bind(me, 'up')); - - me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this)); - if ( !Common.UI.Themes.isDarkTheme() ) { - me.header.menuItemsDarkMode.hide(); - me.header.menuItemsDarkMode.$el.prev('.divider').hide(); - } - } }, onLayoutChanged: function(area) { @@ -377,22 +237,6 @@ define([ this.api.Resize(); }, - onThemeChanged: function (id) { - if ( this.header.menuItemsDarkMode ) { - var current_dark = Common.UI.Themes.isDarkTheme(); - var menuItem = this.header.menuItemsDarkMode; - menuItem.setVisible(current_dark); - menuItem.$el.prev('.divider')[current_dark ? 'show' : 'hide'](); - - menuItem.setChecked(Common.UI.Themes.isContentThemeDark()); - } - }, - - onContentThemeChangedToDark: function (isdark) { - if ( this.header.menuItemsDarkMode ) - this.header.menuItemsDarkMode.setChecked(isdark, true); - }, - onWindowResize: function(e) { this.onLayoutChanged('window'); Common.NotificationCenter.trigger('window:resize'); @@ -404,46 +248,9 @@ define([ me.header.lockHeaderBtns( 'undo', _need_disable ); me.header.lockHeaderBtns( 'redo', _need_disable ); - me.header.lockHeaderBtns( 'opts', _need_disable ); me.header.lockHeaderBtns( 'users', _need_disable ); }, - onApiZoomChange: function(percent, type) { - this.header.mnuitemFitPage.setChecked(type == 2, true); - this.header.mnuitemFitWidth.setChecked(type == 1, true); - this.header.mnuZoom.options.value = percent; - - if ( this.header.mnuZoom.$el ) - $('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%'); - }, - - onOptionsItemClick: function (menu, item, e) { - var me = this; - - switch ( item.value ) { - case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break; - case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break; - case 'rulers': - Common.localStorage.setBool('de-hidden-rulers', item.isChecked()); - Common.Utils.InternalSettings.set("de-hidden-rulers", item.isChecked()); - me.api.asc_SetViewRulers(!item.isChecked()); - Common.NotificationCenter.trigger('layout:changed', 'rulers'); - Common.NotificationCenter.trigger('edit:complete', me.header); - me.header.fireEvent('rulers:hide', [item.isChecked()]); - break; - case 'zoom:page': - item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode(); - Common.NotificationCenter.trigger('edit:complete', me.header); - break; - case 'zoom:width': - item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode(); - Common.NotificationCenter.trigger('edit:complete', me.header); - break; - case 'advanced': me.header.fireEvent('file:settings', me.header); break; - case 'mode:dark': Common.UI.Themes.toggleContentTheme(); break; - } - }, - onApiCoAuthoringDisconnect: function(enableDownload) { if (this.header) { if (this.header.btnDownload && !enableDownload) diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 32f4fe63d..9949bbeac 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -174,49 +174,6 @@ -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- - -
-
-
-
- -
-
- -
-
-
-
-
- -
-
-
-
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 11bd07a1a..4b41fc6c3 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -174,9 +174,8 @@ define([ {caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'}, {caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'}, {caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'}, - {caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'}, - undefined, undefined, undefined, - {caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'} + {caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'} + // undefined, undefined, undefined, undefined, ] } ); diff --git a/apps/documenteditor/main/app/view/ViewTab.js b/apps/documenteditor/main/app/view/ViewTab.js index c302bf453..76f3a51c1 100644 --- a/apps/documenteditor/main/app/view/ViewTab.js +++ b/apps/documenteditor/main/app/view/ViewTab.js @@ -46,6 +46,51 @@ define([ 'use strict'; DE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){ + var template = + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
'; + return { options: {}, @@ -83,12 +128,10 @@ define([ this.lockedControls = []; - var me = this, - $host = me.toolbar.$el; + var me = this; var _set = Common.enumLock; this.btnNavigation = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-navigation'), cls: 'btn-toolbar x-huge icon-top', iconCls: 'toolbar__icon btn-menu-navigation', lock: [_set.lostConnect, _set.disableOnStart], @@ -101,7 +144,6 @@ define([ this.lockedControls.push(this.btnNavigation); this.cmbZoom = new Common.UI.ComboBox({ - el: $host.find('#slot-field-zoom'), cls: 'input-group-nr', lock: [_set.lostConnect, _set.disableOnStart], menuStyle: 'min-width: 55px;', @@ -125,10 +167,7 @@ define([ this.cmbZoom.setValue(100); this.lockedControls.push(this.cmbZoom); - $host.find('#slot-lbl-zoom').text(this.textZoom); - this.btnFitToPage = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-ftp'), cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-ic-zoomtopage', lock: [_set.lostConnect, _set.disableOnStart], @@ -142,7 +181,6 @@ define([ this.lockedControls.push(this.btnFitToPage); this.btnFitToWidth = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-ftw'), cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-ic-zoomtowidth', lock: [_set.lostConnect, _set.disableOnStart], @@ -156,7 +194,6 @@ define([ this.lockedControls.push(this.btnFitToWidth); this.btnInterfaceTheme = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-interface-theme'), cls: 'btn-toolbar x-huge icon-top', iconCls: 'toolbar__icon day', lock: [_set.lostConnect, _set.disableOnStart], @@ -169,7 +206,6 @@ define([ this.lockedControls.push(this.btnInterfaceTheme); this.btnDarkDocument = new Common.UI.Button({ - parentEl: $host.find('#slot-btn-dark-document'), cls: 'btn-toolbar x-huge icon-top', iconCls: 'toolbar__icon dark-mode', lock: [_set.inLightTheme, _set.lostConnect, _set.disableOnStart], @@ -182,7 +218,6 @@ define([ this.lockedControls.push(this.btnDarkDocument); this.chStatusbar = new Common.UI.CheckBox({ - el: $host.findById('#slot-chk-statusbar'), lock: [_set.lostConnect, _set.disableOnStart], labelText: this.textStatusBar, value: !Common.localStorage.getBool("de-hidden-status"), @@ -193,7 +228,6 @@ define([ this.lockedControls.push(this.chStatusbar); this.chToolbar = new Common.UI.CheckBox({ - el: $host.findById('#slot-chk-toolbar'), lock: [_set.lostConnect, _set.disableOnStart], labelText: this.textAlwaysShowToolbar, value: !options.compactToolbar, @@ -204,7 +238,6 @@ define([ this.lockedControls.push(this.chToolbar); this.chRulers = new Common.UI.CheckBox({ - el: $host.findById('#slot-chk-rulers'), lock: [_set.lostConnect, _set.disableOnStart], labelText: this.textRulers, value: !Common.Utils.InternalSettings.get("de-hidden-rulers"), @@ -214,14 +247,32 @@ define([ }); this.lockedControls.push(this.chRulers); - this.cmpEl = $host; Common.Utils.lockControls(_set.disableOnStart, true, {array: this.lockedControls}); }, render: function (el) { + if ( el ) el.html( this.getPanel() ); + return this; }, + getPanel: function () { + this.$el = $(_.template(template)( {} )); + var $host = this.$el; + + this.btnNavigation.render($host.find('#slot-btn-navigation')); + this.cmbZoom.render($host.find('#slot-field-zoom')); + $host.find('#slot-lbl-zoom').text(this.textZoom); + this.btnFitToPage.render($host.find('#slot-btn-ftp')); + this.btnFitToWidth.render($host.find('#slot-btn-ftw')); + this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme')); + this.btnDarkDocument.render($host.find('#slot-btn-dark-document')); + this.chStatusbar.render($host.find('#slot-chk-statusbar')); + this.chToolbar.render($host.find('#slot-chk-toolbar')); + this.chRulers.render($host.find('#slot-chk-rulers')); + return this.$el; + }, + show: function () { Common.UI.BaseView.prototype.show.call(this); this.fireEvent('show', this); diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index c104a0ee0..8abc3f4b6 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -33,7 +33,7 @@ .theme-light { --background-toolbar: #f7f7f7; /*--border-toolbar: #cbcbcb;*/ - --highlight-button-hover: #ccc; + --highlight-button-hover: #e0e0e0; --highlight-header-button-hover: rgba(255,255,255,.15); --canvas-background: #eee; --loadmask-canvas-page-border: #ccc; @@ -92,6 +92,16 @@ background: var(--highlight-header-button-hover, rgba(255,255,255,.2)); } + .loadmask > .brendpanel .circle { + vertical-align: middle; + width: 20px; + height: 20px; + border-radius: 20px; + margin: 0 10px; + background: rgba(255,255,255,.2); + background: var(--highlight-header-button-hover, rgba(255,255,255,.2)); + } + .loadmask > .sktoolbar { background: #f1f1f1; background: var(--background-toolbar, #f1f1f1); @@ -258,7 +268,7 @@
+