From 2fc00165c9416797eda8d5088611f87398e03e29 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 4 Jun 2019 16:45:56 +0300 Subject: [PATCH] [SSE mobile] Add Collaboration, Edit Users --- apps/spreadsheeteditor/mobile/app-dev.js | 2 + apps/spreadsheeteditor/mobile/app.js | 2 + .../mobile/app/controller/Collaboration.js | 217 ++++++++++++++++++ .../mobile/app/controller/Settings.js | 5 + .../app/template/Collaboration.template | 47 ++++ .../mobile/app/template/Settings.template | 12 + .../mobile/app/template/Toolbar.template | 5 + .../mobile/app/view/Collaboration.js | 149 ++++++++++++ .../mobile/app/view/Settings.js | 3 +- .../mobile/app/view/Toolbar.js | 10 +- .../mobile/resources/css/app-ios.css | 28 +++ .../mobile/resources/css/app-material.css | 33 +++ .../mobile/resources/less/app-ios.less | 30 +++ .../mobile/resources/less/app-material.less | 29 +++ .../mobile/resources/less/ios/_icons.less | 6 + .../resources/less/material/_icons.less | 11 + 16 files changed, 586 insertions(+), 3 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/app/controller/Collaboration.js create mode 100644 apps/spreadsheeteditor/mobile/app/template/Collaboration.template create mode 100644 apps/spreadsheeteditor/mobile/app/view/Collaboration.js diff --git a/apps/spreadsheeteditor/mobile/app-dev.js b/apps/spreadsheeteditor/mobile/app-dev.js index 46f60ba41..e4796fe28 100644 --- a/apps/spreadsheeteditor/mobile/app-dev.js +++ b/apps/spreadsheeteditor/mobile/app-dev.js @@ -133,6 +133,7 @@ require([ ,'AddShape' ,'AddOther' ,'AddLink' + ,'Collaboration' ] }); @@ -203,6 +204,7 @@ require([ ,'spreadsheeteditor/mobile/app/controller/add/AddShape' ,'spreadsheeteditor/mobile/app/controller/add/AddOther' ,'spreadsheeteditor/mobile/app/controller/add/AddLink' + ,'spreadsheeteditor/mobile/app/controller/Collaboration' ], function() { window.compareVersions = true; app.start(); diff --git a/apps/spreadsheeteditor/mobile/app.js b/apps/spreadsheeteditor/mobile/app.js index 20dc8d749..53644603d 100644 --- a/apps/spreadsheeteditor/mobile/app.js +++ b/apps/spreadsheeteditor/mobile/app.js @@ -144,6 +144,7 @@ require([ ,'AddShape' ,'AddOther' ,'AddLink' + ,'Collaboration' ] }); @@ -214,6 +215,7 @@ require([ ,'spreadsheeteditor/mobile/app/controller/add/AddShape' ,'spreadsheeteditor/mobile/app/controller/add/AddOther' ,'spreadsheeteditor/mobile/app/controller/add/AddLink' + ,'spreadsheeteditor/mobile/app/controller/Collaboration' ], function() { app.start(); }); diff --git a/apps/spreadsheeteditor/mobile/app/controller/Collaboration.js b/apps/spreadsheeteditor/mobile/app/controller/Collaboration.js new file mode 100644 index 000000000..2e98a912e --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/Collaboration.js @@ -0,0 +1,217 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Collaboration.js + * Spreadsheet Editor + * + * Created by Julia Svinareva on 4/6/19 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ +define([ + 'core', + 'jquery', + 'underscore', + 'backbone', + 'spreadsheeteditor/mobile/app/view/Collaboration' +], function (core, $, _, Backbone) { + 'use strict'; + + SSE.Controllers.Collaboration = Backbone.Controller.extend(_.extend((function() { + // Private + var rootView, + _userId, + editUsers = []; + + return { + models: [], + collections: [], + views: [ + 'Collaboration' + ], + + initialize: function() { + var me = this; + me.addListeners({ + 'Collaboration': { + 'page:show' : me.onPageShow + } + }); + }, + + setApi: function(api) { + this.api = api; + this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onChangeEditUsers, this)); + this.api.asc_registerCallback('asc_onParticipantsChanged', _.bind(this.onChangeEditUsers, this)); + }, + + onLaunch: function () { + this.createView('Collaboration').render(); + }, + + setMode: function(mode) { + this.appConfig = mode; + _userId = mode.user.id; + return this; + }, + + + showModal: function() { + var me = this, + isAndroid = Framework7.prototype.device.android === true, + modalView, + mainView = SSE.getController('Editor').getView('Editor').f7View; + + uiApp.closeModal(); + + if (Common.SharedSettings.get('phone')) { + modalView = $$(uiApp.pickerModal( + '
' + + '
' + + this.getView('Collaboration').rootLayout() + + '
' + + '
' + )).on('opened', function () { + if (_.isFunction(me.api.asc_OnShowContextMenu)) { + me.api.asc_OnShowContextMenu() + } + }).on('close', function (e) { + mainView.showNavbar(); + }).on('closed', function () { + if (_.isFunction(me.api.asc_OnHideContextMenu)) { + me.api.asc_OnHideContextMenu() + } + }); + mainView.hideNavbar(); + } else { + modalView = uiApp.popover( + '
' + + '
' + + '
' + + '
' + + '
' + + this.getView('Collaboration').rootLayout() + + '
' + + '
' + + '
' + + '
', + $$('#toolbar-collaboration') + ); + } + + if (Framework7.prototype.device.android === true) { + $$('.view.collaboration-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed'); + $$('.view.collaboration-root-view .navbar').prependTo('.view.collaboration-root-view > .pages > .page'); + } + + rootView = uiApp.addView('.collaboration-root-view', { + dynamicNavbar: true, + domCache: true + }); + + Common.NotificationCenter.trigger('collaborationcontainer:show'); + this.onPageShow(this.getView('Collaboration')); + + SSE.getController('Toolbar').getView('Toolbar').hideSearch(); + }, + + rootView : function() { + return rootView; + }, + + onPageShow: function(view, pageId) { + var me = this; + + if('#edit-users-view' == pageId) { + me.initEditUsers(); + Common.Utils.addScrollIfNeed('.page[data-page=edit-users-view]', '.page[data-page=edit-users-view] .page-content'); + } else { + } + }, + + onChangeEditUsers: function(users) { + editUsers = users; + }, + + initEditUsers: function() { + var usersArray = []; + _.each(editUsers, function(item){ + var fio = item.asc_getUserName().split(' '); + var initials = fio[0].substring(0, 1).toUpperCase(); + if (fio.length > 1) { + initials += fio[fio.length - 1].substring(0, 1).toUpperCase(); + } + if(!item.asc_getView()) { + var userAttr = { + color: item.asc_getColor(), + id: item.asc_getId(), + idOriginal: item.asc_getIdOriginal(), + name: item.asc_getUserName(), + view: item.asc_getView(), + initial: initials + }; + if(item.asc_getIdOriginal() == _userId) { + usersArray.unshift(userAttr); + } else { + usersArray.push(userAttr); + } + } + }); + var userSort = _.chain(usersArray).groupBy('idOriginal').value(); + var templateUserItem = _.template([ + '<% _.each(users, function (user) { %>', + '
  • ' + + '
    ' + + '
    <%= user[0].initial %>
    '+ + '' + + '<% if (user.length>1) { %><% } %>' + + '
    '+ + '
    • ', + '<% }); %>'].join('')); + var templateUserList = _.template( + '
    ' + + this.textEditUser + + '
    ' + + ''); + $('#user-list').html(templateUserList()); + }, + + + textEditUser: 'Document is currently being edited by several users.' + + } + })(), SSE.Controllers.Collaboration || {})) +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/controller/Settings.js b/apps/spreadsheeteditor/mobile/app/controller/Settings.js index 3fafbad3c..9e6020d3e 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Settings.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Settings.js @@ -184,6 +184,7 @@ define([ $('#settings-search').single('click', _.bind(me._onSearch, me)); $(modalView).find('.formats a').single('click', _.bind(me._onSaveFormat, me)); $('#settings-print').single('click', _.bind(me._onPrint, me)); + $('#settings-collaboration').single('click', _.bind(me.onCollaboration, me)); me.initSettings(pageId); }, @@ -207,6 +208,10 @@ define([ } }, + onCollaboration: function() { + SSE.getController('Collaboration').showModal(); + }, + initSpreadsheetSettings: function() { var me = this, $pageSpreadsheetSettings = $('.page[data-page=settings-spreadsheet-view]'), diff --git a/apps/spreadsheeteditor/mobile/app/template/Collaboration.template b/apps/spreadsheeteditor/mobile/app/template/Collaboration.template new file mode 100644 index 000000000..599f0a369 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/Collaboration.template @@ -0,0 +1,47 @@ + +
    +
    +
    +
    <%= scope.textCollaboration %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textEditUsers %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/Settings.template b/apps/spreadsheeteditor/mobile/app/template/Settings.template index 35c87c0da..8d23c6732 100644 --- a/apps/spreadsheeteditor/mobile/app/template/Settings.template +++ b/apps/spreadsheeteditor/mobile/app/template/Settings.template @@ -25,6 +25,18 @@ <% } %> + <% if(phone) {%> +
  • +
    +
    + +
    +
    +
    <%= scope.textCollaboration %>
    +
    +
    +
    • + <% } %>
  • diff --git a/apps/spreadsheeteditor/mobile/app/template/Toolbar.template b/apps/spreadsheeteditor/mobile/app/template/Toolbar.template index 92137c8a0..6fd09866a 100644 --- a/apps/spreadsheeteditor/mobile/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/mobile/app/template/Toolbar.template @@ -42,6 +42,11 @@ <% } %> + <% if (!phone) { %> + + <% } %> diff --git a/apps/spreadsheeteditor/mobile/app/view/Collaboration.js b/apps/spreadsheeteditor/mobile/app/view/Collaboration.js new file mode 100644 index 000000000..be4328c70 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/view/Collaboration.js @@ -0,0 +1,149 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Collaboration.js + * Presentation Editor + * + * Created by Julia Svinareva on 31/5/19 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'text!spreadsheeteditor/mobile/app/template/Collaboration.template', + 'jquery', + 'underscore', + 'backbone' +], function (settingsTemplate, $, _, Backbone) { + 'use strict'; + + SSE.Views.Collaboration = Backbone.View.extend(_.extend((function() { + // private + + return { + + template: _.template(settingsTemplate), + + events: { + // + }, + + initialize: function() { + Common.NotificationCenter.on('collaborationcontainer:show', _.bind(this.initEvents, this)); + this.on('page:show', _.bind(this.updateItemHandlers, this)); + }, + + initEvents: function () { + var me = this; + + Common.Utils.addScrollIfNeed('.view[data-page=collaboration-root-view] .pages', '.view[data-page=collaboration-root-view] .page'); + me.updateItemHandlers(); + }, + + initControls: function() { + // + }, + + // Render layout + render: function() { + this.layout = $('
    ').append(this.template({ + android : Common.SharedSettings.get('android'), + phone : Common.SharedSettings.get('phone'), + orthography: Common.SharedSettings.get('sailfish'), + scope : this + })); + + return this; + }, + + updateItemHandlers: function () { + var selectorsDynamicPage = [ + '.page[data-page=collaboration-root-view]' + ].map(function (selector) { + return selector + ' a.item-link[data-page]'; + }).join(', '); + + $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this)); + }, + + onItemClick: function (e) { + var $target = $(e.currentTarget), + page = $target.data('page'); + + if (page && page.length > 0 ) { + this.showPage(page); + } + }, + + rootLayout: function () { + if (this.layout) { + var $layour = this.layout.find('#collaboration-root-view'), + isPhone = Common.SharedSettings.get('phone'); + + return $layour.html(); + } + + return ''; + }, + + showPage: function(templateId, animate) { + var rootView = SSE.getController('Collaboration').rootView(); + + if (rootView && this.layout) { + var $content = this.layout.find(templateId); + + // Android fix for navigation + if (Framework7.prototype.device.android) { + $content.find('.page').append($content.find('.navbar')); + } + + rootView.router.load({ + content: $content.html(), + animatePages: animate !== false + }); + + this.fireEvent('page:show', [this, templateId]); + } + }, + + + + textCollaboration: 'Collaboration', + textСomments: 'Сomments', + textBack: 'Back', + textEditUsers: 'Users' + + } + })(), SSE.Views.Collaboration || {})) +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/Settings.js b/apps/spreadsheeteditor/mobile/app/view/Settings.js index 2c0087add..db1f22a37 100644 --- a/apps/spreadsheeteditor/mobile/app/view/Settings.js +++ b/apps/spreadsheeteditor/mobile/app/view/Settings.js @@ -301,7 +301,8 @@ define([ textTop: 'Top', textLeft: 'Left', textBottom: 'Bottom', - textRight: 'Right' + textRight: 'Right', + textCollaboration: 'Collaboration' } })(), SSE.Views.Settings || {})) }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js index 1557a6999..ed8db311b 100644 --- a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js @@ -63,7 +63,8 @@ define([ "click #toolbar-edit" : "showEdition", "click #toolbar-add" : "showInserts", "click #toolbar-settings" : "showSettings", - "click #toolbar-edit-document": "editDocument" + "click #toolbar-edit-document": "editDocument", + "click #toolbar-collaboration" : "showCollaboration" }, // Set innerHTML and get the references to the DOM elements @@ -93,7 +94,7 @@ define([ setMode: function (mode) { if (mode.isEdit) { - $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show(); + $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo, #toolbar-collaboration').show(); } else if (mode.canEdit && mode.canRequestEditRights){ $('#toolbar-edit-document').show(); } @@ -155,6 +156,11 @@ define([ Common.Gateway.requestEditRights(); }, + //Collaboration + showCollaboration: function () { + SSE.getController('Collaboration').showModal(); + }, + textBack: 'Back' } })(), SSE.Views.Toolbar || {})) diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index d46c2f4d9..5d26883b1 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6612,6 +6612,11 @@ i.icon.icon-format-csv { height: 30px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2058%2058%22%20height%3D%2258px%22%20width%3D%2258px%22%20y%3D%220px%22%20x%3D%220px%22%20xml%3Aspace%3D%22preserve%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2340865c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2235.5%22%20%2F%3E%3C%2Fsvg%3E"); } +i.icon.icon-collaboration { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.9912%206C15.9912%208.34102%2015.4074%2010.1346%2014.6055%2011.3121C13.7983%2012.4974%2012.8249%2013%2011.9912%2013C11.1575%2013%2010.1841%2012.4974%209.37695%2011.3121C8.57501%2010.1346%207.99121%208.34102%207.99121%206C7.99121%203.61508%209.96974%202%2011.9912%202C14.0127%202%2015.9912%203.61508%2015.9912%206ZM14.5015%2012.9506C13.7365%2013.6361%2012.8649%2014%2011.9912%2014C11.1195%2014%2010.2499%2013.6378%209.48619%2012.9554C7.78363%2013.6081%206.36015%2014.2591%205.26963%2014.9224C3.55256%2015.9667%203%2016.8326%203%2017.5C3%2018.2545%203.4257%2019.0877%204.82302%2019.7879C6.25015%2020.5031%208.57272%2020.9999%2012%2021C15.4273%2021%2017.7499%2020.5031%2019.177%2019.7879C20.5743%2019.0877%2021%2018.2545%2021%2017.5C21%2016.8326%2020.4474%2015.9667%2018.7304%2014.9224C17.6372%2014.2575%2016.2095%2013.605%2014.5015%2012.9506ZM15.2272%2012.1594C16.2765%2010.7825%2016.9912%208.67814%2016.9912%206C16.9912%203%2014.5%201%2011.9912%201C9.48242%201%206.99121%203%206.99121%206C6.99121%208.68159%207.70777%2010.7879%208.75931%2012.1647C4.60309%2013.7964%202%2015.4951%202%2017.5C2%2019.9852%205%2021.9999%2012%2022C19%2022%2022%2019.9852%2022%2017.5C22%2015.4929%2019.3913%2013.7927%2015.2272%2012.1594Z%22%20fill%3D%22%2340865c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} .chart-types .thumb.bar-normal { background-image: url('../img/charts/chart-03.png'); } @@ -7187,3 +7192,26 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { max-height: 100%; overflow: auto; } +#user-list .item-content { + padding-left: 0; +} +#user-list .item-inner { + justify-content: flex-start; + padding-left: 15px; +} +#user-list .length { + margin-left: 4px; +} +#user-list .color { + min-width: 40px; + min-height: 40px; + margin-right: 20px; + text-align: center; + border-radius: 50px; + line-height: 40px; + color: #373737; + font-weight: 500; +} +#user-list ul:before { + content: none; +} diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index d4675a9a0..40ea699b9 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -6249,6 +6249,11 @@ i.icon.icon-format-csv { height: 30px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2058%2058%22%20height%3D%2258px%22%20width%3D%2258px%22%20y%3D%220px%22%20x%3D%220px%22%20xml%3Aspace%3D%22preserve%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2340865c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2213.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2224.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2242.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2238.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2234.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2230.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2226.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2222.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2218.5%22%20x%3D%2235.5%22%20%2F%3E%3Crect%20height%3D%221%22%20width%3D%229%22%20class%3D%22cls-1%22%20y%3D%2214.5%22%20x%3D%2235.5%22%20%2F%3E%3C%2Fsvg%3E"); } +i.icon.icon-collaboration { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.9912%206C15.9912%208.34102%2015.4074%2010.1346%2014.6055%2011.3121C13.7983%2012.4974%2012.8249%2013%2011.9912%2013C11.1575%2013%2010.1841%2012.4974%209.37695%2011.3121C8.57501%2010.1346%207.99121%208.34102%207.99121%206C7.99121%203.61508%209.96974%202%2011.9912%202C14.0127%202%2015.9912%203.61508%2015.9912%206ZM14.5015%2012.9506C13.7365%2013.6361%2012.8649%2014%2011.9912%2014C11.1195%2014%2010.2499%2013.6378%209.48619%2012.9554C7.78363%2013.6081%206.36015%2014.2591%205.26963%2014.9224C3.55256%2015.9667%203%2016.8326%203%2017.5C3%2018.2545%203.4257%2019.0877%204.82302%2019.7879C6.25015%2020.5031%208.57272%2020.9999%2012%2021C15.4273%2021%2017.7499%2020.5031%2019.177%2019.7879C20.5743%2019.0877%2021%2018.2545%2021%2017.5C21%2016.8326%2020.4474%2015.9667%2018.7304%2014.9224C17.6372%2014.2575%2016.2095%2013.605%2014.5015%2012.9506ZM15.2272%2012.1594C16.2765%2010.7825%2016.9912%208.67814%2016.9912%206C16.9912%203%2014.5%201%2011.9912%201C9.48242%201%206.99121%203%206.99121%206C6.99121%208.68159%207.70777%2010.7879%208.75931%2012.1647C4.60309%2013.7964%202%2015.4951%202%2017.5C2%2019.9852%205%2021.9999%2012%2022C19%2022%2022%2019.9852%2022%2017.5C22%2015.4929%2019.3913%2013.7927%2015.2272%2012.1594Z%22%20fill%3D%22%2340865c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} .navbar i.icon.icon-undo { width: 22px; height: 22px; @@ -6299,6 +6304,11 @@ i.icon.icon-format-csv { height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } +.navbar i.icon.icon-collaboration { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.9912%206C14.9912%208.18203%2014.4464%209.76912%2013.7789%2010.7492C13.101%2011.7447%2012.4042%2012%2011.9912%2012C11.5782%2012%2010.8814%2011.7447%2010.2035%2010.7492C9.53601%209.76912%208.99121%208.18203%208.99121%206C8.99121%204.23017%2010.4571%203%2011.9912%203C13.5254%203%2014.9912%204.23017%2014.9912%206ZM13.4917%2013.6397C13.0059%2013.8771%2012.4989%2014%2011.9912%2014C11.4861%2014%2010.9817%2013.8784%2010.4983%2013.6434C8.53188%2014.3681%206.94518%2015.0737%205.78927%2015.7768C4.10512%2016.8011%204%2017.4079%204%2017.5C4%2017.7664%204.1014%2018.3077%205.27104%2018.8939C6.50029%2019.5099%208.64545%2019.9999%2012%2020C15.3546%2020%2017.4997%2019.5099%2018.7289%2018.8939C19.8986%2018.3078%2020%2017.7664%2020%2017.5C20%2017.4079%2019.8949%2016.8011%2018.2107%2015.7768C17.0529%2015.0726%2015.4627%2014.3657%2013.4917%2013.6397ZM15.2272%2012.1594C16.2765%2010.7825%2016.9912%208.67814%2016.9912%206C16.9912%203%2014.5%201%2011.9912%201C9.48242%201%206.99121%203%206.99121%206C6.99121%208.68159%207.70777%2010.7879%208.75931%2012.1647C4.60309%2013.7964%202%2015.4951%202%2017.5C2%2019.9852%205%2021.9999%2012%2022C19%2022%2022%2019.9852%2022%2017.5C22%2015.4929%2019.3913%2013.7927%2015.2272%2012.1594Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); +} .chart-types .thumb.bar-normal { background-image: url('../img/charts/chart-03.png'); } @@ -7053,3 +7063,26 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { max-height: 100%; overflow: auto; } +#user-list .item-content { + padding-left: 0; +} +#user-list .item-inner { + justify-content: flex-start; + padding-left: 15px; +} +#user-list .length { + margin-left: 4px; +} +#user-list .color { + min-width: 40px; + min-height: 40px; + margin-right: 20px; + text-align: center; + border-radius: 50px; + line-height: 40px; + color: #373737; + font-weight: 400; +} +#user-list ul:before { + content: none; +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less index 2d43c3aab..f845e7d08 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less @@ -191,4 +191,34 @@ input, textarea { .modal.modal-in { max-height: 100%; overflow: auto; +} + +//Edit users +@initialEditUser: #373737; + +#user-list { + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: flex-start; + padding-left: 15px; + } + .length { + margin-left: 4px; + } + .color { + min-width: 40px; + min-height: 40px; + margin-right: 20px; + text-align: center; + border-radius: 50px; + line-height: 40px; + color: @initialEditUser; + font-weight: 500; + + } + ul:before { + content: none; + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less index ce9c8be4b..b168d50e4 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less @@ -178,4 +178,33 @@ input, textarea { .modal.modal-in { max-height: 100%; overflow: auto; +} + +//Edit users +@initialEditUser: #373737; + +#user-list { + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: flex-start; + padding-left: 15px; + } + .length { + margin-left: 4px; + } + .color { + min-width: 40px; + min-height: 40px; + margin-right: 20px; + text-align: center; + border-radius: 50px; + line-height: 40px; + color: @initialEditUser; + font-weight: 400; + } + ul:before { + content: none; + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less b/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less index a5716a594..ccd51648a 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less +++ b/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less @@ -352,6 +352,12 @@ i.icon { height: 30px; .encoded-svg-background(''); } + // Collaboration + &.icon-collaboration { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } } .chart-types .thumb { diff --git a/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less b/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less index 48e6bd9ff..fa686ee83 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less +++ b/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less @@ -315,6 +315,12 @@ i.icon { height: 30px; .encoded-svg-background(''); } + // Collaboration + &.icon-collaboration { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } } // Overwrite color for toolbar @@ -370,6 +376,11 @@ i.icon { height: 22px; .encoded-svg-background(''); } + &.icon-collaboration { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } } }