[Common] added label for 'Save' operation

This commit is contained in:
Maxim Kadushkin 2017-03-16 13:24:03 +03:00
parent 10cb608a2c
commit 7f972c790e
5 changed files with 137 additions and 67 deletions

View file

@ -53,6 +53,7 @@ define([
Common.Views.Header = Backbone.View.extend(_.extend(function(){
var storeUsers, appConfig;
var $userList, $panelUsers, $btnUsers;
var $saveStatus;
var templateUserItem =
'<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
@ -69,7 +70,8 @@ define([
'</ul>');
var templateRightBox = '<section>' +
'<label id="doc-name"></label>' +
'<label id="rib-doc-name" class="status-label"></label>' +
'<a href="#" id="rib-save-status" class="status-label">All changes saved</a>' +
'<div class="elset">' +
// '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' +
@ -194,6 +196,59 @@ define([
}
}
function onAppReady(mode) {
appConfig = mode;
var me = this;
me.btnGoBack.updateHint(me.textBack);
me.btnGoBack.on('click', function (e) {
me.fireEvent('go:back', ['page:current']);
});
me.btnGoBack.menu.on('item:click', function (e) {
me.fireEvent('go:back', ['page:new']);
})
me.logo.on('click', function (e) {
var _url = !!me.branding && !!me.branding.logo && !!me.branding.logo.url ?
me.branding.logo.url : 'http://www.onlyoffice.com';
var newDocumentPage = window.open(_url);
newDocumentPage && newDocumentPage.focus();
});
$panelUsers.on('shown.bs.dropdown', function () {
$userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
});
$panelUsers.find('.cousers-menu')
.on('click', function(e) { return false; });
$btnUsers.tooltip({
title: 'Manage document access rights',
titleNorm: me.tipAccessRights,
titleExt: me.tipViewUsers,
placement: 'bottom',
html: true
});
$btnUsers.on('click', onUsersClick.bind(me));
var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
$labelChangeRights.on('click', onUsersClick.bind(me));
$labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
$panelUsers[(storeUsers.size() > 1 || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
$saveStatus.attr('data-width', this.textSaveExpander);
if ( appConfig.canUseHistory ) {
$saveStatus.on('click', function(e) {
me.fireEvent('history:show', ['header']);
});
} else {
$saveStatus.addClass('locked');
}
}
return {
options: {
branding: {},
@ -231,7 +286,8 @@ define([
menu: new Common.UI.Menu({
style: 'min-width: 60px;',
items: [
{caption: me.openNewTabText}
{caption: me.itemBackCurrTab},
{caption: me.itemBackNewTab}
]
})
});
@ -246,50 +302,7 @@ define([
(new Promise(function (accept, reject) {
Common.NotificationCenter.on('app:ready', function(mode) { accept(mode); });
})).then(function(m){
mode = m;
me.btnGoBack.updateHint(me.textBack);
me.btnGoBack.on('click', function (e) {
me.fireEvent('go:back', ['page:current']);
});
me.btnGoBack.menu.on('item:click', function (e) {
me.fireEvent('go:back', ['page:new']);
})
me.logo.on('click', function (e) {
var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
this.branding.logo.url : 'http://www.onlyoffice.com';
var newDocumentPage = window.open(_url);
newDocumentPage && newDocumentPage.focus();
})
$panelUsers.on('shown.bs.dropdown', function () {
$userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
});
$panelUsers.find('.cousers-menu')
.on('click', function (e) {
return false;
});
$btnUsers.tooltip({
title: 'Manage document access rights',
titleNorm: me.tipAccessRights,
titleExt: me.tipViewUsers,
placement: 'bottom',
html: true
});
$btnUsers.on('click', onUsersClick.bind(me));
var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
$labelChangeRights.on('click', onUsersClick.bind(me));
$labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
$panelUsers[(storeUsers.size() > 1 || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
});
})).then(onAppReady.bind(me));
},
render: function (el, role) {
@ -315,7 +328,7 @@ define([
}
if ( this.documentCaption ) {
$html.find('#doc-name').html(
$html.find('#rib-doc-name').text(
Common.Utils.String.htmlEncode(this.documentCaption) );
}
@ -323,8 +336,10 @@ define([
$userList = $html.find('.cousers-list');
$panelUsers = $html.find('.box-cousers');
$btnUsers = $html.find('.btn-users');
$saveStatus = $html.find('#rib-save-status');
$panelUsers.hide();
$saveStatus.hide();
return $html;
}
@ -423,8 +438,22 @@ define([
// dc.toggleClass('renamed', rename);
},
setSaveStatus: function (status) {
if ( $saveStatus ) {
if ( $saveStatus.is(':hidden') ) $saveStatus.show();
var _text;
switch ( status ) {
case 'begin': _text = this.textSaveBegin; break;
case 'changed': _text = this.textSaveChanged; break;
default: _text = this.textSaveEnd;
}
$saveStatus.text( _text );
}
},
textBack: 'Go to Documents',
openNewTabText: 'Open in New Tab',
// txtHeaderDeveloper: 'DEVELOPER MODE',
txtRename: 'Rename'
}

View file

@ -61,6 +61,7 @@
}
}
}
.extra {
> section {
line-height: 20px;
@ -75,13 +76,30 @@
}
&.right {
min-width: 150px;
padding-right: 12px;
}
#doc-name {
#rib-doc-name {
flex-grow: 1;
}
#rib-save-status {
&.locked {
text-decoration: none;
color: @gray-deep;
cursor: default;
}
&:after {
display: block;
content: attr(data-width);
height: 1px;
overflow: hidden;
visibility: hidden;
}
}
#header-logo {
width: 100%;
height: 100%;
@ -91,6 +109,10 @@
background-size: contain;
background-repeat: no-repeat;
}
.status-label {
padding: 0 10px;
}
}
#tlb-box-users {

View file

@ -62,7 +62,11 @@ define([
'hide': _.bind(this.onHideChat, this)
},
'Common.Views.Header': {
'click:users': _.bind(this.clickStatusbarUsers, this)
'click:users': _.bind(this.clickStatusbarUsers, this),
'history:show': function () {
if ( !this.leftMenu.panelHistory.isVisible() )
this.clickMenuFileItem('header', 'history');
}.bind(this)
},
'LeftMenu': {
'comments:show': _.bind(this.commentsShowHide, this, 'show'),

View file

@ -569,18 +569,23 @@ define([
if (action) {
this.setLongActionView(action)
} else {
if (this._state.fastCoauth && this._state.usersCount>1 && id==Asc.c_oAscAsyncAction['Save']) {
if ( id==Asc.c_oAscAsyncAction.Save ) {
var me = this;
if (me._state.timerSave===undefined)
me._state.timerSave = setInterval(function(){
if ((new Date()) - me._state.isSaving>500) {
clearInterval(me._state.timerSave);
me.getApplication().getController('Statusbar').setStatusCaption('');
me._state.timerSave = undefined;
}
}, 500);
} else
if ( me._state.fastCoauth && me._state.usersCount > 1 ) {
if ( !me._state.timerSave &&
Date.now() - me._state.isSaving < 500 )
{
me._state.timerSave = setTimeout(function () {
me.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('end');
delete me._state.timerSave;
}, 500);
}
} else {
me.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('end');
}
} else {
this.getApplication().getController('Statusbar').setStatusCaption('');
}
}
action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
@ -607,9 +612,9 @@ define([
break;
case Asc.c_oAscAsyncAction['Save']:
this._state.isSaving = new Date();
title = this.saveTitleText;
text = this.saveTextText;
this._state.isSaving = Date.now();
// title = this.saveTitleText;
// text = this.saveTextText;
break;
case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
@ -691,8 +696,10 @@ define([
if (!this.isShowOpenDialog)
this.loadMask.show();
}
else {
} else
if ( action.id == Asc.c_oAscAsyncAction.Save ) {
this.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('begin');
} else {
this.getApplication().getController('Statusbar').setStatusCaption(text);
}
},
@ -763,7 +770,7 @@ define([
if (this._isDocReady)
return;
Common.NotificationCenter.trigger('app:ready', [this.appOptions]);
Common.NotificationCenter.trigger('app:ready', this.appOptions);
var me = this,
value;
@ -1419,6 +1426,9 @@ define([
this.updateWindowTitle();
this.api.isDocumentModified() &&
this.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('changed');
var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar');
if (toolbarView) {

View file

@ -139,7 +139,12 @@
"Common.Views.ExternalMergeEditor.textClose": "Close",
"Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
"Common.Views.ExternalMergeEditor.textTitle": "Mail Merge Recipients",
"Common.Views.Header.openNewTabText": "Open in New Tab",
"Common.Views.Header.itemBackNewTab": "Open in New Tab",
"Common.Views.Header.itemBackCurrTab": "Open in Current Tab",
"Common.Views.Header.textSaveBegin": "Saving...",
"Common.Views.Header.textSaveEnd": "All changes saved",
"Common.Views.Header.textSaveChanged": "Modified",
"Common.Views.Header.textSaveExpander": "All changes saved",
"Common.Views.Header.textBack": "Go to Documents",
"Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
"Common.Views.Header.txtRename": "Rename",