[SSE mobile] added new-styled mobile apps
This commit is contained in:
Maxim Kadushkin
parent
ab053c57d0
commit
70cb991375
237
apps/spreadsheeteditor/mobile/app-dev.js
Normal file
237
apps/spreadsheeteditor/mobile/app-dev.js
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* app.js
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/14/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
var reqerr;
|
||||
require.config({
|
||||
baseUrl: '../../',
|
||||
paths: {
|
||||
jquery : '../vendor/jquery/jquery',
|
||||
underscore : '../vendor/underscore/underscore',
|
||||
backbone : '../vendor/backbone/backbone',
|
||||
framework7 : '../vendor/framework7/js/framework7',
|
||||
text : '../vendor/requirejs-text/text',
|
||||
xregexp : '../vendor/xregexp/xregexp-all-min',
|
||||
sockjs : '../vendor/sockjs/sockjs.min',
|
||||
jszip : '../vendor/jszip/jszip.min',
|
||||
jsziputils : '../vendor/jszip-utils/jszip-utils.min',
|
||||
jsrsasign : '../vendor/jsrsasign/jsrsasign-latest-all-min',
|
||||
api : 'api/documents/api',
|
||||
core : 'common/main/lib/core/application',
|
||||
extendes : 'common/mobile/utils/extendes',
|
||||
notification : 'common/main/lib/core/NotificationCenter',
|
||||
analytics : 'common/Analytics',
|
||||
gateway : 'common/Gateway',
|
||||
locale : 'common/locale',
|
||||
irregularstack : 'common/IrregularStack',
|
||||
sharedsettings : 'common/mobile/utils/SharedSettings'
|
||||
},
|
||||
|
||||
shim: {
|
||||
framework7: {
|
||||
exports: 'Framework7'
|
||||
},
|
||||
underscore: {
|
||||
exports: '_'
|
||||
},
|
||||
backbone: {
|
||||
deps: [
|
||||
'underscore',
|
||||
'jquery'
|
||||
],
|
||||
exports: 'Backbone'
|
||||
},
|
||||
core: {
|
||||
deps: [
|
||||
'backbone',
|
||||
'notification',
|
||||
'irregularstack',
|
||||
'sharedsettings'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
require([
|
||||
'backbone',
|
||||
'framework7',
|
||||
'core',
|
||||
'underscore',
|
||||
'extendes',
|
||||
'api',
|
||||
'analytics',
|
||||
'gateway',
|
||||
'locale',
|
||||
'jszip',
|
||||
'jsziputils',
|
||||
'jsrsasign',
|
||||
'sockjs'
|
||||
], function (Backbone, Framework7) {
|
||||
Backbone.history.start();
|
||||
|
||||
/**
|
||||
* Application instance with DE namespace defined
|
||||
*/
|
||||
var app = new Backbone.Application({
|
||||
nameSpace: 'SSE',
|
||||
autoCreate: false,
|
||||
controllers : [
|
||||
'Editor',
|
||||
'Toolbar',
|
||||
'Main',
|
||||
'DocumentHolder'
|
||||
// ,'Settings'
|
||||
// ,'EditContainer'
|
||||
// ,'EditText'
|
||||
// ,'EditParagraph'
|
||||
// ,'EditTable'
|
||||
// ,'EditImage'
|
||||
// ,'EditShape'
|
||||
// ,'EditChart'
|
||||
// ,'EditHyperlink'
|
||||
// ,'AddContainer'
|
||||
// ,'AddTable'
|
||||
// ,'AddShape'
|
||||
// ,'AddImage'
|
||||
// ,'AddOther'
|
||||
]
|
||||
});
|
||||
|
||||
Common.Locale.apply();
|
||||
|
||||
var device = Framework7.prototype.device;
|
||||
var loadPlatformCss = function (filename, opt){
|
||||
var fileref = document.createElement('link');
|
||||
fileref.setAttribute('rel', 'stylesheet');
|
||||
fileref.setAttribute('type', 'text/css');
|
||||
fileref.setAttribute('href', filename);
|
||||
|
||||
if (typeof fileref != 'undefined') {
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
}
|
||||
};
|
||||
|
||||
//Store Framework7 initialized instance for easy access
|
||||
window.uiApp = new Framework7({
|
||||
// Default title for modals
|
||||
modalTitle: 'ONLYOFFICE',
|
||||
|
||||
// If it is webapp, we can enable hash navigation:
|
||||
// pushState: false,
|
||||
|
||||
// If Android
|
||||
material: device.android,
|
||||
|
||||
// Hide and show indicator during ajax requests
|
||||
onAjaxStart: function (xhr) {
|
||||
uiApp.showIndicator();
|
||||
},
|
||||
onAjaxComplete: function (xhr) {
|
||||
uiApp.hideIndicator();
|
||||
}
|
||||
});
|
||||
|
||||
//Export DOM7 to local variable to make it easy accessable
|
||||
window.$$ = Dom7;
|
||||
|
||||
//Load platform styles
|
||||
loadPlatformCss('resources/css/app-' + (device.android ? 'material' : 'ios') + '.css');
|
||||
|
||||
require([
|
||||
'common/main/lib/util/LocalStorage',
|
||||
'common/main/lib/util/utils',
|
||||
'spreadsheeteditor/mobile/app/controller/Editor',
|
||||
'spreadsheeteditor/mobile/app/controller/Toolbar',
|
||||
'spreadsheeteditor/mobile/app/controller/Main',
|
||||
'spreadsheeteditor/mobile/app/controller/DocumentHolder'
|
||||
// ,'documenteditor/mobile/app/controller/Settings'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditContainer'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditText'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditParagraph'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditTable'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditImage'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditShape'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditChart'
|
||||
// ,'documenteditor/mobile/app/controller/edit/EditHyperlink'
|
||||
// ,'documenteditor/mobile/app/controller/add/AddContainer'
|
||||
// ,'documenteditor/mobile/app/controller/add/AddTable'
|
||||
// ,'documenteditor/mobile/app/controller/add/AddShape'
|
||||
// ,'documenteditor/mobile/app/controller/add/AddImage'
|
||||
// ,'documenteditor/mobile/app/controller/add/AddOther'
|
||||
], function() {
|
||||
app.start();
|
||||
});
|
||||
}, function(err) {
|
||||
if (err.requireType == 'timeout' && !reqerr) {
|
||||
var getUrlParams = function() {
|
||||
var e,
|
||||
a = /\+/g, // Regex for replacing addition symbol with a space
|
||||
r = /([^&=]+)=?([^&]*)/g,
|
||||
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
||||
q = window.location.search.substring(1),
|
||||
urlParams = {};
|
||||
|
||||
while (e = r.exec(q))
|
||||
urlParams[d(e[1])] = d(e[2]);
|
||||
|
||||
return urlParams;
|
||||
};
|
||||
|
||||
var encodeUrlParam = function(str) {
|
||||
return str.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
};
|
||||
|
||||
var lang = (getUrlParams()["lang"] || 'en').split("-")[0];
|
||||
|
||||
if ( lang == 'de') reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
|
||||
else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
|
||||
else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
|
||||
else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
|
||||
else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
|
||||
|
||||
window.alert(reqerr);
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
255
apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js
Normal file
255
apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* DocumentHolder.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/15/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
define([
|
||||
'core',
|
||||
'spreadsheeteditor/mobile/app/view/DocumentHolder'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
SSE.Controllers.DocumentHolder = Backbone.Controller.extend((function() {
|
||||
// private
|
||||
var _stack,
|
||||
_isEdit = false;
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'DocumentHolder'
|
||||
],
|
||||
|
||||
initialize: function() {
|
||||
this.addListeners({
|
||||
'DocumentHolder': {
|
||||
'contextmenu:click' : this.onContextMenuClick
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
|
||||
// this.api.asc_registerCallback('asc_onShowPopMenu', _.bind(this.onApiShowPopMenu, this));
|
||||
// this.api.asc_registerCallback('asc_onHidePopMenu', _.bind(this.onApiHidePopMenu, this));
|
||||
},
|
||||
|
||||
setMode: function (mode) {
|
||||
_isEdit = ('edit' === mode);
|
||||
},
|
||||
|
||||
// When our application is ready, lets get started
|
||||
onLaunch: function() {
|
||||
var me = this;
|
||||
|
||||
me.view = me.createView('DocumentHolder').render();
|
||||
|
||||
$$(window).on('resize', _.bind(me.onEditorResize, me));
|
||||
},
|
||||
|
||||
// Handlers
|
||||
|
||||
onContextMenuClick: function (view, eventName) {
|
||||
var me = this;
|
||||
|
||||
if ('cut' == eventName) {
|
||||
me.api.asc_Cut();
|
||||
} else if ('copy' == eventName) {
|
||||
me.api.asc_Copy();
|
||||
} else if ('paste' == eventName) {
|
||||
me.api.asc_Paste();
|
||||
} else if ('delete' == eventName) {
|
||||
console.debug('IMPLEMENT: Delete fragment');
|
||||
} else if ('edit' == eventName) {
|
||||
me.view.hideMenu();
|
||||
|
||||
SSE.getController('EditContainer').showModal();
|
||||
} else if ('addlink' == eventName) {
|
||||
me.view.hideMenu();
|
||||
|
||||
SSE.getController('AddContainer').showModal();
|
||||
SSE.getController('AddOther').getView('AddOther').showLink();
|
||||
} else if ('openlink' == eventName) {
|
||||
_.some(_stack, function (item) {
|
||||
if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
|
||||
me._openLink(item.get_ObjectValue().get_Value());
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
me.view.hideMenu();
|
||||
},
|
||||
|
||||
// API Handlers
|
||||
|
||||
onEditorResize: function(cmp) {
|
||||
// Hide context menu
|
||||
},
|
||||
|
||||
onApiShowPopMenu: function(posX, posY) {
|
||||
var me = this,
|
||||
items;
|
||||
|
||||
_stack = me.api.getSelectedElements();
|
||||
items = me._initMenu(_stack);
|
||||
|
||||
me.view.showMenu(items, posX, posY);
|
||||
},
|
||||
|
||||
onApiHidePopMenu: function() {
|
||||
this.view.hideMenu();
|
||||
},
|
||||
|
||||
// Internal
|
||||
|
||||
_openLink: function(url) {
|
||||
if (this.api.asc_getUrlType(url) > 0) {
|
||||
var newDocumentPage = window.open(url, '_blank');
|
||||
|
||||
if (newDocumentPage) {
|
||||
newDocumentPage.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_initMenu: function (stack) {
|
||||
var me = this,
|
||||
menuItems = [],
|
||||
canCopy = me.api.can_CopyCut();
|
||||
|
||||
if (canCopy) {
|
||||
menuItems.push({
|
||||
caption: 'Copy',
|
||||
event: 'copy'
|
||||
});
|
||||
}
|
||||
|
||||
var isText = false,
|
||||
isTable = false,
|
||||
isImage = false,
|
||||
isChart = false,
|
||||
isShape = false,
|
||||
isLink = false;
|
||||
|
||||
_.each(stack, function (item) {
|
||||
var objectType = item.get_ObjectType(),
|
||||
objectValue = item.get_ObjectValue();
|
||||
|
||||
if (objectType == Asc.c_oAscTypeSelectElement.Text) {
|
||||
isText = true;
|
||||
} else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
|
||||
if (objectValue && objectValue.get_ChartProperties()) {
|
||||
isChart = true;
|
||||
} else if (objectType && objectValue.get_ShapeProperties()) {
|
||||
isShape = true;
|
||||
} else {
|
||||
isImage = true;
|
||||
}
|
||||
} else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
|
||||
isTable = true;
|
||||
} else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
|
||||
isLink = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (stack.length > 0) {
|
||||
var topObject = stack[stack.length - 1],
|
||||
topObjectType = topObject.get_ObjectType(),
|
||||
topObjectValue = topObject.get_ObjectValue(),
|
||||
objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false;
|
||||
|
||||
var swapItems = function(items, indexBefore, indexAfter) {
|
||||
items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
|
||||
};
|
||||
|
||||
if (!objectLocked && _isEdit) {
|
||||
menuItems.push({
|
||||
caption: 'Cut',
|
||||
event: 'cut'
|
||||
});
|
||||
menuItems.push({
|
||||
caption: 'Paste',
|
||||
event: 'paste'
|
||||
});
|
||||
|
||||
// Swap 'Copy' and 'Cut'
|
||||
swapItems(menuItems, 0, 1);
|
||||
|
||||
menuItems.push({
|
||||
caption: 'Delete',
|
||||
event: 'delete'
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
caption: 'Edit',
|
||||
event: 'edit'
|
||||
});
|
||||
}
|
||||
|
||||
var text = me.api.can_AddHyperlink();
|
||||
|
||||
if (!_.isEmpty(text)) {
|
||||
menuItems.push({
|
||||
caption: 'Add Link',
|
||||
event: 'addlink'
|
||||
});
|
||||
}
|
||||
|
||||
if (isLink) {
|
||||
menuItems.push({
|
||||
caption: 'Open Link',
|
||||
event: 'openlink'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
|
||||
menuItems = menuItems.slice(0, 3);
|
||||
}
|
||||
|
||||
return menuItems;
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
112
apps/spreadsheeteditor/mobile/app/controller/Editor.js
Normal file
112
apps/spreadsheeteditor/mobile/app/controller/Editor.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Editor.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/15/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'core',
|
||||
'spreadsheeteditor/mobile/app/view/Editor'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
SSE.Controllers.Editor = Backbone.Controller.extend((function() {
|
||||
// private
|
||||
|
||||
function isPhone() {
|
||||
var ua = navigator.userAgent,
|
||||
isMobile = /Mobile(\/|\s)/.test(ua);
|
||||
|
||||
return /(iPhone|iPod)/.test(ua) ||
|
||||
(!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
|
||||
(/(BlackBerry|BB)/.test(ua) && isMobile) ||
|
||||
/(Windows Phone)/.test(ua);
|
||||
}
|
||||
|
||||
function isTablet() {
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
return !isPhone(ua) && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
|
||||
(/MSIE 10/.test(ua) && /; Touch/.test(ua)));
|
||||
}
|
||||
|
||||
return {
|
||||
// Specifying a EditorController model
|
||||
models: [],
|
||||
|
||||
// Specifying a collection of out EditorView
|
||||
collections: [],
|
||||
|
||||
// Specifying application views
|
||||
views: [
|
||||
'Editor' // is main application layout
|
||||
],
|
||||
|
||||
// When controller is created let's setup view event listeners
|
||||
initialize: function() {
|
||||
// This most important part when we will tell our controller what events should be handled
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
},
|
||||
|
||||
// When our application is ready, lets get started
|
||||
onLaunch: function() {
|
||||
// Device detection
|
||||
var phone = isPhone();
|
||||
console.debug('Layout profile:', phone ? 'Phone' : 'Tablet');
|
||||
|
||||
Common.SharedSettings.set('android', Framework7.prototype.device.android);
|
||||
Common.SharedSettings.set('phone', phone);
|
||||
|
||||
$('html').addClass(phone ? 'phone' : 'tablet');
|
||||
|
||||
// Create and render main view
|
||||
this.editorView = this.createView('Editor').render();
|
||||
|
||||
$$(window).on('resize', _.bind(this.onWindowResize, this));
|
||||
},
|
||||
|
||||
onWindowResize: function(e) {
|
||||
this.api && this.api.asc_Resize();
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
File diff suppressed because it is too large
Load diff
272
apps/spreadsheeteditor/mobile/app/controller/Settings.js
Normal file
272
apps/spreadsheeteditor/mobile/app/controller/Settings.js
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Settings.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Alexander Yuzhin on 10/7/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
define([
|
||||
'core',
|
||||
'documenteditor/mobile/app/view/Settings'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
DE.Controllers.Settings = Backbone.Controller.extend((function() {
|
||||
// private
|
||||
var rootView,
|
||||
inProgress,
|
||||
infoObj,
|
||||
modalView;
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'Settings'
|
||||
],
|
||||
|
||||
initialize: function () {
|
||||
Common.SharedSettings.set('readerMode', false);
|
||||
Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this));
|
||||
|
||||
this.addListeners({
|
||||
'Settings': {
|
||||
'page:show' : this.onPageShow
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function (api) {
|
||||
var me = this;
|
||||
me.api = api;
|
||||
|
||||
me.api.asc_registerCallback('asc_onGetDocInfoStart', _.bind(me._onApiGetDocInfoStart, me));
|
||||
me.api.asc_registerCallback('asc_onGetDocInfoStop', _.bind(me._onApiGetDocInfoEnd, me));
|
||||
me.api.asc_registerCallback('asc_onDocInfo', _.bind(me._onApiDocInfo, me));
|
||||
me.api.asc_registerCallback('asc_onGetDocInfoEnd', _.bind(me._onApiGetDocInfoEnd, me));
|
||||
me.api.asc_registerCallback('asc_onDocumentName', _.bind(me._onApiDocumentName, me));
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
this.createView('Settings').render();
|
||||
},
|
||||
|
||||
setMode: function (mode) {
|
||||
this.getView('Settings').setMode(mode);
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
|
||||
|
||||
// $('#font-bold').single('click', _.bind(me.onBold, me));
|
||||
// $('#font-italic').single('click', _.bind(me.onItalic, me));
|
||||
// $('#font-underline').single('click', _.bind(me.onUnderline, me));
|
||||
// $('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me));
|
||||
},
|
||||
|
||||
rootView : function() {
|
||||
return rootView;
|
||||
},
|
||||
|
||||
showModal: function() {
|
||||
if (Common.SharedSettings.get('phone')) {
|
||||
modalView = uiApp.popup(
|
||||
'<div class="popup container-settings">' +
|
||||
'<div class="content-block">' +
|
||||
'<div class="view settings-root-view navbar-through">' +
|
||||
this.getView('Settings').rootLayout() +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
} else {
|
||||
modalView = uiApp.popover(
|
||||
'<div class="popover container-settings">' +
|
||||
'<div class="popover-angle"></div>' +
|
||||
'<div class="popover-inner">' +
|
||||
'<div class="content-block">' +
|
||||
'<div class="view popover-view settings-root-view navbar-through">' +
|
||||
this.getView('Settings').rootLayout() +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
$$('#toolbar-settings')
|
||||
);
|
||||
}
|
||||
|
||||
if (Framework7.prototype.device.android === true) {
|
||||
$$('.view.settings-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
|
||||
$$('.view.settings-root-view .navbar').prependTo('.view.settings-root-view > .pages > .page');
|
||||
}
|
||||
|
||||
rootView = uiApp.addView('.settings-root-view', {
|
||||
dynamicNavbar: true
|
||||
});
|
||||
|
||||
Common.NotificationCenter.trigger('settingscontainer:show');
|
||||
this.onPageShow(this.getView('Settings'));
|
||||
},
|
||||
|
||||
hideModal: function() {
|
||||
if (modalView) {
|
||||
uiApp.closeModal(modalView);
|
||||
}
|
||||
},
|
||||
|
||||
onPageShow: function(view) {
|
||||
var me = this;
|
||||
$('#settings-search').single('click', _.bind(me._onSearch, me));
|
||||
$('#settings-readermode input:checkbox').single('change', _.bind(me._onReaderMode, me));
|
||||
$('#settings-edit-document').single('click', _.bind(me._onEditDocumet, me));
|
||||
$(modalView).find('.formats a').single('click', _.bind(me._onSaveFormat, me));
|
||||
},
|
||||
|
||||
|
||||
// API handlers
|
||||
|
||||
_onApiGetDocInfoStart: function () {
|
||||
var me = this;
|
||||
inProgress = true;
|
||||
infoObj = {
|
||||
PageCount : 0,
|
||||
WordsCount : 0,
|
||||
ParagraphCount : 0,
|
||||
SymbolsCount : 0,
|
||||
SymbolsWSCount : 0
|
||||
};
|
||||
|
||||
_.defer(function(){
|
||||
if (!inProgress)
|
||||
return;
|
||||
|
||||
$('#statistic-pages').html(me.txtLoading);
|
||||
$('#statistic-words').html(me.txtLoading);
|
||||
$('#statistic-paragraphs').html(me.txtLoading);
|
||||
$('#statistic-symbols').html(me.txtLoading);
|
||||
$('#statistic-spaces').html(me.txtLoading);
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
_onApiGetDocInfoEnd: function() {
|
||||
inProgress = false;
|
||||
|
||||
$('#statistic-pages').html(infoObj.PageCount);
|
||||
$('#statistic-words').html(infoObj.WordsCount);
|
||||
$('#statistic-paragraphs').html(infoObj.ParagraphCount);
|
||||
$('#statistic-symbols').html(infoObj.SymbolsCount);
|
||||
$('#statistic-spaces').html(infoObj.SymbolsWSCount);
|
||||
},
|
||||
|
||||
_onApiDocInfo: function(obj) {
|
||||
if (obj) {
|
||||
if (obj.get_PageCount() > -1)
|
||||
infoObj.PageCount = obj.get_PageCount();
|
||||
if (obj.get_WordsCount() > -1)
|
||||
infoObj.WordsCount = obj.get_WordsCount();
|
||||
if (obj.get_ParagraphCount() > -1)
|
||||
infoObj.ParagraphCount = obj.get_ParagraphCount();
|
||||
if (obj.get_SymbolsCount() > -1)
|
||||
infoObj.SymbolsCount = obj.get_SymbolsCount();
|
||||
if (obj.get_SymbolsWSCount() > -1)
|
||||
infoObj.SymbolsWSCount = obj.get_SymbolsWSCount();
|
||||
}
|
||||
},
|
||||
|
||||
_onApiDocumentName: function(name) {
|
||||
$('#settings-document-title').html(name ? name : '-');
|
||||
},
|
||||
|
||||
_onEditDocumet: function() {
|
||||
Common.Gateway.requestEditRights();
|
||||
},
|
||||
|
||||
_onSearch: function (e) {
|
||||
var toolbarView = DE.getController('Toolbar').getView('Toolbar');
|
||||
|
||||
if (toolbarView) {
|
||||
toolbarView.showSearch();
|
||||
}
|
||||
|
||||
this.hideModal();
|
||||
},
|
||||
|
||||
_onReaderMode: function (e) {
|
||||
var me = this;
|
||||
|
||||
Common.SharedSettings.set('readerMode', !Common.SharedSettings.get('readerMode'));
|
||||
|
||||
me.api && me.api.ChangeReaderMode();
|
||||
|
||||
if (Common.SharedSettings.get('phone')) {
|
||||
_.defer(function () {
|
||||
me.hideModal();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
Common.NotificationCenter.trigger('readermode:change', Common.SharedSettings.get('readerMode'));
|
||||
},
|
||||
|
||||
_onSaveFormat: function(e) {
|
||||
var me = this,
|
||||
format = $(e.currentTarget).data('format');
|
||||
|
||||
if (format) {
|
||||
if (format == Asc.c_oAscFileType.TXT) {
|
||||
uiApp.confirm(
|
||||
me.warnDownloadAs,
|
||||
me.notcriticalErrorTitle,
|
||||
function () {
|
||||
me.api.asc_DownloadAs(format);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
me.api.asc_DownloadAs(format);
|
||||
}
|
||||
|
||||
me.hideModal();
|
||||
}
|
||||
},
|
||||
|
||||
txtLoading : 'Loading...',
|
||||
notcriticalErrorTitle : 'Warning',
|
||||
warnDownloadAs : 'If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?'
|
||||
}
|
||||
})());
|
||||
});
|
||||
224
apps/spreadsheeteditor/mobile/app/controller/Toolbar.js
Normal file
224
apps/spreadsheeteditor/mobile/app/controller/Toolbar.js
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Toolbar.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/15/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'core',
|
||||
'spreadsheeteditor/mobile/app/view/Toolbar'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
SSE.Controllers.Toolbar = Backbone.Controller.extend((function() {
|
||||
// private
|
||||
var _backUrl;
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'Toolbar'
|
||||
],
|
||||
|
||||
initialize: function() {
|
||||
this.addListeners({
|
||||
'Toolbar': {
|
||||
'searchbar:show' : this.onSearchbarShow,
|
||||
'searchbar:render' : this.onSearchbarRender
|
||||
}
|
||||
});
|
||||
|
||||
Common.Gateway.on('init', _.bind(this.loadConfig, this));
|
||||
},
|
||||
|
||||
loadConfig: function (data) {
|
||||
if (data && data.config && data.config.canBackToFolder !== false &&
|
||||
data.config.customization && data.config.customization.goback && data.config.customization.goback.url) {
|
||||
_backUrl = data.config.customization.goback.url;
|
||||
|
||||
$('#document-back').show().single('click', _.bind(this.onBack, this));
|
||||
}
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
|
||||
// this.api.asc_registerCallback('asc_onCanUndo', _.bind(this.onApiCanRevert, this, 'undo'));
|
||||
// this.api.asc_registerCallback('asc_onCanRedo', _.bind(this.onApiCanRevert, this, 'redo'));
|
||||
},
|
||||
|
||||
setMode: function (mode) {
|
||||
this.getView('Toolbar').setMode(mode);
|
||||
},
|
||||
|
||||
onLaunch: function() {
|
||||
var me = this;
|
||||
me.createView('Toolbar').render();
|
||||
|
||||
$('#toolbar-undo').single('click', _.bind(me.onUndo, me));
|
||||
$('#toolbar-redo').single('click', _.bind(me.onRedo, me));
|
||||
},
|
||||
|
||||
setDocumentTitle: function (title) {
|
||||
$('#toolbar-title').html(title);
|
||||
},
|
||||
|
||||
// Search
|
||||
|
||||
onSearchbarRender: function(bar) {
|
||||
var me = this;
|
||||
me.searchBar = uiApp.searchbar('.searchbar.document', {
|
||||
customSearch: true,
|
||||
onSearch : _.bind(me.onSearchChange, me),
|
||||
onEnable : _.bind(me.onSearchEnable, me),
|
||||
onDisable : _.bind(me.onSearchDisable, me),
|
||||
onClear : _.bind(me.onSearchClear, me)
|
||||
});
|
||||
|
||||
me.searchPrev = $('.searchbar.document .prev');
|
||||
me.searchNext = $('.searchbar.document .next');
|
||||
|
||||
me.searchPrev.on('click', _.bind(me.onSearchPrev, me));
|
||||
me.searchNext.on('click', _.bind(me.onSearchNext, me));
|
||||
},
|
||||
|
||||
onSearchbarShow: function(bar) {
|
||||
//
|
||||
},
|
||||
|
||||
onSearchChange: function(search) {
|
||||
var me = this,
|
||||
isEmpty = (search.query.trim().length < 1);
|
||||
|
||||
_.each([me.searchPrev, me.searchNext], function(btn) {
|
||||
btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
|
||||
});
|
||||
},
|
||||
|
||||
onSearchEnable: function(search) {
|
||||
//
|
||||
},
|
||||
|
||||
onSearchDisable: function(search) {
|
||||
//
|
||||
},
|
||||
|
||||
onSearchClear: function(search) {
|
||||
// window.focus();
|
||||
// document.activeElement.blur();
|
||||
},
|
||||
|
||||
onSearchPrev: function(btn) {
|
||||
this.onQuerySearch(this.searchBar.query, 'back');
|
||||
},
|
||||
|
||||
onSearchNext: function(btn) {
|
||||
this.onQuerySearch(this.searchBar.query, 'next');
|
||||
},
|
||||
|
||||
onQuerySearch: function(query, direction, opts) {
|
||||
if (query && query.length) {
|
||||
// if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
|
||||
var me = this;
|
||||
uiApp.alert(
|
||||
'',
|
||||
me.textNoTextFound,
|
||||
function () {
|
||||
me.searchBar.input.focus();
|
||||
}
|
||||
);
|
||||
// }
|
||||
}
|
||||
},
|
||||
|
||||
// Handlers
|
||||
|
||||
onBack: function (e) {
|
||||
var me = this;
|
||||
|
||||
if (me.api.asc_isDocumentModified()) {
|
||||
uiApp.modal({
|
||||
title : me.dlgLeaveTitleText,
|
||||
text : me.dlgLeaveMsgText,
|
||||
verticalButtons: true,
|
||||
buttons : [
|
||||
{
|
||||
text: me.leaveButtonText,
|
||||
onClick: function() {
|
||||
window.parent.location.href = _backUrl;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: me.stayButtonText,
|
||||
bold: true
|
||||
}
|
||||
]
|
||||
});
|
||||
} else {
|
||||
window.parent.location.href = _backUrl;
|
||||
}
|
||||
},
|
||||
|
||||
onUndo: function (e) {
|
||||
if ( this.api ) this.api.asc_Undo();
|
||||
},
|
||||
|
||||
onRedo: function (e) {
|
||||
if ( this.api ) this.api.asc_Redo();
|
||||
},
|
||||
|
||||
// API handlers
|
||||
|
||||
onApiCanRevert: function(which, can) {
|
||||
if (which == 'undo') {
|
||||
$('#toolbar-undo').toggleClass('disabled', !can);
|
||||
} else {
|
||||
$('#toolbar-redo').toggleClass('disabled', !can);
|
||||
}
|
||||
},
|
||||
|
||||
dlgLeaveTitleText : 'You leave the application',
|
||||
dlgLeaveMsgText : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
|
||||
leaveButtonText : 'Leave this Page',
|
||||
stayButtonText : 'Stay on this Page',
|
||||
textNoTextFound : 'Text not found',
|
||||
}
|
||||
})());
|
||||
});
|
||||
70
apps/spreadsheeteditor/mobile/app/template/AddImage.template
Normal file
70
apps/spreadsheeteditor/mobile/app/template/AddImage.template
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!-- Root view -->
|
||||
<div id="addimage-root-view">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="add-image-file" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Picture from Library</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="add-image-url" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-link"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Picture from URL</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Url view -->
|
||||
<div id="addimage-url-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Link Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="addimage-url">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Address</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="addimage-link-url" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<input type="url" placeholder="Image URL">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block disabled" id="addimage-insert">
|
||||
<% if (android) { %>
|
||||
<a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Insert Image</a>
|
||||
<% } else { %>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="list-button item-link">Insert Image</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
261
apps/spreadsheeteditor/mobile/app/template/AddOther.template
Normal file
261
apps/spreadsheeteditor/mobile/app/template/AddOther.template
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<!-- Root view -->
|
||||
<div id="addother-root-view">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="add-other-pagebreak" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-pagebreak"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Page Break</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="add-other-section" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-sectionbreak"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Section Break</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="add-other-linebreak" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-stringbreak"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Line Break</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="add-other-link" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-link"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Link</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="add-other-pagenumber" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-pagenumber"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Page Number</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secton break view -->
|
||||
<div id="addother-sectionbreak">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Section Break</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="addother-sectionbreak">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-type="next" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Next Page</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="continuous" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Continuous Page</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="even" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Even Page</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="odd" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Odd Page</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link view -->
|
||||
<div id="addother-link">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Add Link</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="addother-link">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="add-link-url" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Link</div>
|
||||
<div class="item-input">
|
||||
<input type="url" placeholder="Link">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="add-link-display" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Display</div>
|
||||
<div class="item-input">
|
||||
<input type="text" placeholder="Display">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="add-link-tip" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Screen Tip</div>
|
||||
<div class="item-input">
|
||||
<input type="text" placeholder="Screen Tip">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block disabled" id="add-link-insert">
|
||||
<% if (android) { %>
|
||||
<a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Insert</a>
|
||||
<% } else { %>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="list-button item-link">Insert</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Number Position view -->
|
||||
<div id="addother-pagenumber">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Position</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="addother-pagenumber">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-type="lt" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Left Top</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="ct" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Center Top</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="rt" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Right Top</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="lb" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Left Bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="cb" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Center Bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="rb" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Right Bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="current" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Current Position</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
apps/spreadsheeteditor/mobile/app/template/AddShape.template
Normal file
14
apps/spreadsheeteditor/mobile/app/template/AddShape.template
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- Root view -->
|
||||
<div id="add-shapes-root">
|
||||
<div class="page-content dataview shapes">
|
||||
<% _.each(shapes, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(shape) { %>
|
||||
<li data-type="<%= shape.type %>">
|
||||
<div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
12
apps/spreadsheeteditor/mobile/app/template/AddTable.template
Normal file
12
apps/spreadsheeteditor/mobile/app/template/AddTable.template
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!-- Root view -->
|
||||
<div id="add-table-root">
|
||||
<div class="page-content dataview table-styles">
|
||||
<ul class="row">
|
||||
<% _.each(styles, function(style) { %>
|
||||
<li data-type="<%= style.templateId %>">
|
||||
<img src="<%= style.imageUrl %>">
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
382
apps/spreadsheeteditor/mobile/app/template/EditChart.template
Normal file
382
apps/spreadsheeteditor/mobile/app/template/EditChart.template
Normal file
|
|
@ -0,0 +1,382 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-chart-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="chart-style" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Style</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="chart-wrap" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="chart-reorder" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Reorder</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<% if (!android) { %>
|
||||
<ul>
|
||||
<li>
|
||||
<a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Chart</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% } else { %>
|
||||
<a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Chart</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reorder view -->
|
||||
<div id="edit-chart-reorder">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Reorder</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page chart-reorder">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-type="all-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Bring to Foreground</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="all-down" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Send to Background</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Forward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-down" class="item-link no-indicator">
|
||||
<div data-type="move-down" class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Backward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap view -->
|
||||
<div id="edit-chart-wrap">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Wrap</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page chart-wrap">
|
||||
<div class="page-content">
|
||||
<div class="list-block chart-wrap-types">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="inline">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Inline</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="square">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Square</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="tight">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Tight</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="through">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Through</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="top-bottom">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Top and Bottom</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="infront">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">In Front</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="chart-wrap" value="behind">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Behind</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title align">Align</div>
|
||||
<div class="list-block align">
|
||||
<ul>
|
||||
<li id="edit-chart-align">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||
<a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||
<a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block inline">
|
||||
<ul>
|
||||
<li id="edit-chart-movetext">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move with Text</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="edit-chart-overlap">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Allow Overlap</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title distance">Distance from text</div>
|
||||
<div class="list-block distance" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-distance">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="200" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles view -->
|
||||
<div id="edit-chart-style">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner edit-chart-style" data-page="edit-chart-style">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding categories">
|
||||
<% if (android) { %>
|
||||
<div class="toolbar tabbar">
|
||||
<div data-page="index" class="toolbar-inner">
|
||||
<a href="#tab-chart-type" data-type="type" class="tab-link active">Type</a>
|
||||
<a href="#tab-chart-style" data-type="style" class="tab-link">Style</a>
|
||||
<a href="#tab-chart-fill" data-type="fill" class="tab-link">Fill</a>
|
||||
<a href="#tab-chart-border" data-type="border" class="tab-link">Border</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="buttons-row">
|
||||
<a href="#tab-chart-type" data-type="type" class="tab-link button active">Type</a>
|
||||
<a href="#tab-chart-style" data-type="style" class="tab-link button">Style</a>
|
||||
<a href="#tab-chart-fill" data-type="fill" class="tab-link button">Fill</a>
|
||||
<a href="#tab-chart-border" data-type="border" class="tab-link button">Border</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-chart-style">
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tab-chart-type" class="page-content tab active dataview chart-types">
|
||||
<% _.each(types, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(type) { %>
|
||||
<li data-type="<%= type.type %>">
|
||||
<div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div id="tab-chart-style" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-chart-styles">
|
||||
<div class="item-content">
|
||||
<div class="item-inner"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-chart-fill" class="page-content tab">
|
||||
<!--Fill colors-->
|
||||
</div>
|
||||
<div id="tab-chart-border" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-chart-bordersize">
|
||||
<div style="padding: 15px 0 0 15px;">Size</div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="7" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="edit-chart-bordercolor" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Color</div>
|
||||
<div class="item-after"><div class="color-preview"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border color view -->
|
||||
<div id="edit-chart-border-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-chart-border-color">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Color</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-chart-border-color">
|
||||
<div class="page-content">
|
||||
<!--Color palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!-- Link view -->
|
||||
<div id="edit-link-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="edit-link-url" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Link</div>
|
||||
<div class="item-input">
|
||||
<input type="url" placeholder="Link">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="edit-link-display" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Display</div>
|
||||
<div class="item-input">
|
||||
<input type="text" placeholder="Display">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="edit-link-tip" class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label">Screen Tip</div>
|
||||
<div class="item-input">
|
||||
<input type="text" placeholder="Screen Tip">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<% if (android) { %>
|
||||
<a href="#" id="edit-link-edit" class="button button-raised button-fill disabled" style="margin: 20px 16px;">Edit Link</a>
|
||||
<a href="#" id="edit-link-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Link</a>
|
||||
<% } else { %>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="edit-link-edit" class="list-button item-link disabled" style="text-align: center;">Edit Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" id="edit-link-remove" class="list-button item-link" style="text-align: center; color: #f00">Remove Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
366
apps/spreadsheeteditor/mobile/app/template/EditImage.template
Normal file
366
apps/spreadsheeteditor/mobile/app/template/EditImage.template
Normal file
|
|
@ -0,0 +1,366 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-image-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="image-wrap" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="image-replace" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Replace</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="image-reorder" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Reorder</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px;">Default Size</a>
|
||||
<% } else { %>
|
||||
<a id="image-default" class="item-link list-button" style="text-align: center;">Default Size</a>
|
||||
<% } %>
|
||||
</li>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Image</a>
|
||||
<% } else { %>
|
||||
<a id="image-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Image</a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reorder view -->
|
||||
<div id="edit-image-reorder-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Reorder</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page image-reorder">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-type="all-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Bring to Foreground</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="all-down" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Send to Background</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Forward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-down" class="item-link no-indicator">
|
||||
<div data-type="move-down" class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Backward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap view -->
|
||||
<div id="edit-image-wrap-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Wrap</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page image-wrap">
|
||||
<div class="page-content">
|
||||
<div class="list-block image-wrap-types">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="inline">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Inline</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="square">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Square</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="tight">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Tight</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="through">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Through</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="top-bottom">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Top and Bottom</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="infront">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">In Front</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="image-wrap" value="behind">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Behind</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title align">Align</div>
|
||||
<div class="list-block align">
|
||||
<ul>
|
||||
<li id="edit-image-align">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||
<a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||
<a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block inline">
|
||||
<ul>
|
||||
<li id="edit-image-movetext">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move with Text</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="edit-image-overlap">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Allow Overlap</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title distance">Distance from text</div>
|
||||
<div class="list-block distance" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-distance">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="200" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Replace view -->
|
||||
<div id="edit-image-replace-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Replace</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="edit-image-file" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Picture from Library</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="edit-image-url" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Picture from URL</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Url view -->
|
||||
<div id="edit-image-url-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Link Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page edit-image-url-link">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Address</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<input type="url" placeholder="Image URL">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block disabled buttons">
|
||||
<% if (android) { %>
|
||||
<a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Replace Image</a>
|
||||
<% } else { %>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="list-button item-link">Replace Image</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-paragraph-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="paragraph-background" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Background</div>
|
||||
<div class="item-after"><div class="color-preview"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="paragraph-advanced" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Advanced settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Paragraph styles</div>
|
||||
<div id="paragraph-list" class="list-block">
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background color view -->
|
||||
<div id="edit-paragraph-color">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Background</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-paragraph-color">
|
||||
<div class="page-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced view -->
|
||||
<div id="edit-paragraph-advanced">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Advanced</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-paragraph-advanced">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Distance from text</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="paragraph-distance-before">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Before</div>
|
||||
<div class="item-after splitter">
|
||||
<% if (!android) { %><label>Auto</label><% } %>
|
||||
<p class="buttons-row">
|
||||
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||
<% if (android) { %><label>Auto</label><% } %>
|
||||
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="paragraph-distance-after">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">After</div>
|
||||
<div class="item-after splitter">
|
||||
<% if (!android) { %><label>Auto</label><% } %>
|
||||
<p class="buttons-row">
|
||||
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||
<% if (android) { %><label>Auto</label><% } %>
|
||||
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="paragraph-space">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Space Between Paragraphs</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="paragraph-page-break">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Page Break Before</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="paragraph-page-orphan">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Orphan Control</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="paragraph-page-keeptogether">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Keep Lines Together</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="paragraph-page-keepnext">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Keep with Next</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
410
apps/spreadsheeteditor/mobile/app/template/EditShape.template
Normal file
410
apps/spreadsheeteditor/mobile/app/template/EditShape.template
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-shape-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="shape-style" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Style</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="shape-wrap" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="shape-replace" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Replace</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="shape-reorder" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Reorder</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="shape-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Shape</a>
|
||||
<% } else { %>
|
||||
<a id="shape-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Shape</a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reorder view -->
|
||||
<div id="edit-shape-reorder">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Reorder</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page shape-reorder">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-type="all-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Bring to Foreground</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="all-down" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Send to Background</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-up" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Forward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-down" class="item-link no-indicator">
|
||||
<div data-type="move-down" class="item-content">
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move Backward</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Replace view -->
|
||||
<div id="edit-shape-replace">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Replace</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page shape-replace">
|
||||
<div class="page-content dataview shapes">
|
||||
<% _.each(shapes, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(shape) { %>
|
||||
<li data-type="<%= shape.type %>">
|
||||
<div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap view -->
|
||||
<div id="edit-shape-wrap">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Wrap</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page shape-wrap">
|
||||
<div class="page-content">
|
||||
<div class="list-block shape-wrap-types">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="inline">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Inline</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="square">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Square</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="tight">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Tight</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="through">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Through</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="top-bottom">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Top and Bottom</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="infront">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">In Front</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="shape-wrap" value="behind">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Behind</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title align">Align</div>
|
||||
<div class="list-block align">
|
||||
<ul>
|
||||
<li id="edit-shape-align">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||
<a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||
<a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block inline">
|
||||
<ul>
|
||||
<li id="edit-shape-movetext">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move with Text</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="edit-shape-overlap">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Allow Overlap</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title distance">Distance from text</div>
|
||||
<div class="list-block distance" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-distance">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="200" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles view -->
|
||||
<div id="edit-shape-style">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner edit-shape-style" data-page="edit-shape-style">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding categories">
|
||||
<% if (android) { %>
|
||||
<div class="toolbar tabbar">
|
||||
<div data-page="index" class="toolbar-inner">
|
||||
<a href="#tab-shape-fill" data-type="fill" class="tab-link active">Fill</a>
|
||||
<a href="#tab-shape-border" data-type="border" class="tab-link">Border</a>
|
||||
<a href="#tab-shape-effects" data-type="effects" class="tab-link">Effects</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="buttons-row">
|
||||
<a href="#tab-shape-fill" data-type="fill" class="tab-link button active">Fill</a>
|
||||
<a href="#tab-shape-border" data-type="border" class="tab-link button">Border</a>
|
||||
<a href="#tab-shape-effects" data-type="effects" class="tab-link button">Effects</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-shape-style">
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tab-shape-fill" class="page-content tab active">
|
||||
<!--Fill colors-->
|
||||
</div>
|
||||
<div id="tab-shape-border" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-shape-bordersize">
|
||||
<div style="padding: 15px 0 0 15px;">Size</div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="7" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="edit-shape-bordercolor" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Color</div>
|
||||
<div class="item-after"><div class="color-preview"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-shape-effects" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-shape-effect">
|
||||
<div style="padding: 15px 0 0 15px;">Opacity</div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="100" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 %</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border color view -->
|
||||
<div id="edit-shape-border-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-shape-border-color">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Color</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-shape-border-color">
|
||||
<div class="page-content">
|
||||
<!--Color palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
453
apps/spreadsheeteditor/mobile/app/template/EditTable.template
Normal file
453
apps/spreadsheeteditor/mobile/app/template/EditTable.template
Normal file
|
|
@ -0,0 +1,453 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-table-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="table-insert">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="insert-column-left" class="button no-ripple"><i class="icon icon-table-add-column-left"></i></a>
|
||||
<a id="insert-column-right" class="button no-ripple"><i class="icon icon-table-add-column-right"></i></a>
|
||||
<a id="insert-row-above" class="button no-ripple"><i class="icon icon-table-add-row-above"></i></a>
|
||||
<a id="insert-row-below" class="button no-ripple"><i class="icon icon-table-add-row-below"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-remove">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="remove-column" class="button no-ripple"><i class="icon icon-table-remove-column"></i></a>
|
||||
<a id="remove-row" class="button no-ripple"><i class="icon icon-table-remove-row"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<% if (!android) { %>
|
||||
<a id="table-remove-all" class="item-link list-button" style="text-align: center; color: #f00">Remove Table</a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
<% if (android) { %>
|
||||
<a id="table-remove-all" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Table</a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="table-options" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Table Options</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="table-style" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Style</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="table-wrap" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap view -->
|
||||
<div id="edit-table-wrap">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Wrap</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="edit-tablewrap-page" data-page="edit-table-wrap">
|
||||
<div class="page-content">
|
||||
<div class="list-block" id="table-wrap-type">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="table-wrap" value="inline">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Inline</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="table-wrap" value="flow">
|
||||
<% if (android) { %>
|
||||
<div class="item-media"><i class="icon icon-form-radio"></i></div>
|
||||
<% } else { %>
|
||||
<div class="item-media"><i class="icon icon-search"></i></div>
|
||||
<% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Flow</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="table-move-text">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Move with Text</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title flow">Distance from text</div>
|
||||
<div class="list-block flow" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-distance">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="200" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title inline">Align</div>
|
||||
<div class="list-block inline" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-align">
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="table-align-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||
<a id="table-align-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||
<a id="table-align-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Options view -->
|
||||
<div id="edit-table-options">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Options</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-table-wrap">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="table-option-repeatasheader">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Repeat as Header Row</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-option-resizetofit">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Resize to Fit Content</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Cell margins</div>
|
||||
<div class="list-block" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li id="table-options-margins">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="150" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles view -->
|
||||
<div id="edit-table-style">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner edit-table-style" data-page="edit-table-style">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding categories">
|
||||
<% if (android) { %>
|
||||
<div class="toolbar tabbar">
|
||||
<div data-page="index" class="toolbar-inner">
|
||||
<a href="#tab-table-style" data-type="style" class="tab-link active">Style</a>
|
||||
<a href="#tab-table-fill" data-type="fill" class="tab-link">Fill</a>
|
||||
<a href="#tab-table-border" data-type="border" class="tab-link">Border</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="buttons-row">
|
||||
<a href="#tab-table-style" data-type="style" class="tab-link button active">Style</a>
|
||||
<a href="#tab-table-fill" data-type="fill" class="tab-link button">Fill</a>
|
||||
<a href="#tab-table-border" data-type="border" class="tab-link button">Border</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-table-style">
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tab-table-style" class="page-content tab active">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-table-styles">
|
||||
<div class="item-content">
|
||||
<div class="item-inner"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block" style="margin-bottom: 40px;">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="edit-table-style-options" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Style Options</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-table-fill" class="page-content tab">
|
||||
<!--Fill colors-->
|
||||
</div>
|
||||
<div id="tab-table-border" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-table-bordersize">
|
||||
<div style="padding: 15px 0 0 15px;">Size</div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="7" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="edit-table-bordercolor" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Color</div>
|
||||
<div class="item-after"><div class="color-preview"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li id="edit-table-bordertypes">
|
||||
<div class="item-content buttons" style="-webkit-flex-flow: row wrap;justify-content: space-around;">
|
||||
<div class="item-inner" style="margin: 20px 0;">
|
||||
<div class="row">
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="lrtbcm"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-text-align-left"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-inner" style="margin: 0 0 20px;">
|
||||
<div class="row">
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="c"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-text-align-left"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-text-align-left"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Style options view -->
|
||||
<div id="edit-table-style-options-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-table-style-options">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Options</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-table-style-options">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="table-options-header-row">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Header Row</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-options-total-row">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Total Row</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-options-banded-row">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Banded Row</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="table-options-first-column">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">First Column</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-options-last-column">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Last Column</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="table-options-banded-column">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Banded Column</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Style options view -->
|
||||
<div id="edit-table-border-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-table-border-color">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Color</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-table-border-color">
|
||||
<div class="page-content">
|
||||
<!--Color palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
408
apps/spreadsheeteditor/mobile/app/template/EditText.template
Normal file
408
apps/spreadsheeteditor/mobile/app/template/EditText.template
Normal file
|
|
@ -0,0 +1,408 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-text-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li><a id="font-fonts" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Fonts</div>
|
||||
<div class="item-after" style="color: #000;"><span></span><span style="margin-left: 5px;"></span></div>
|
||||
</div>
|
||||
</div></a></li>
|
||||
<li><div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-bold" class="button"><b>B</b></a>
|
||||
<a id="font-italic" class="button"><i>I</i></a>
|
||||
<a id="font-underline" class="button" style="text-decoration: underline;">U</a>
|
||||
<a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></li>
|
||||
<li>
|
||||
<a id="font-color" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Font color</div>
|
||||
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li><a id="font-background" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Highlight color</div>
|
||||
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="font-additional" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-text-additional"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Additional formatting</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li><div id="paragraph-align" class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||
<a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||
<a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||
<a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
|
||||
<a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><a id="font-bullets" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Bullets</div>
|
||||
</div>
|
||||
</div></a></li>
|
||||
<li><a id="font-numbers" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Numbers</div>
|
||||
</div>
|
||||
</div></a></li>
|
||||
<li><a id="font-line-spacing" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Line Spacing</div>
|
||||
</div>
|
||||
</div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonts view -->
|
||||
<div id="edit-text-fonts">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
|
||||
<div class="center sliding">Fonts</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-text-font-page">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="font-size">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Size</div>
|
||||
<div class="item-after splitter">
|
||||
<% if (!android) { %><label></label><% } %>
|
||||
<p class="buttons-row">
|
||||
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||
<% if (android) { %><label></label><% } %>
|
||||
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Fonts</div>
|
||||
<div id="font-list" class="list-block virtual-list">
|
||||
<!-- Fonts List -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font color view -->
|
||||
<div id="edit-text-color">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Font Colors</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-text-font-color">
|
||||
<div class="page-content">
|
||||
<div class="list-block" style="<% if (!android) { %>margin-bottom: -36px;<% } %>">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="font-color-auto" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<div style="width:22px; height: 22px; background-color: #000;"></div>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Automatic</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highlight color view -->
|
||||
<div id="edit-text-background">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Highlight Colors</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" data-page="edit-text-font-background">
|
||||
<div class="page-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Additional view -->
|
||||
<div id="edit-text-additional">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Additional</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="page-text-additional" data-page="edit-text-additional">
|
||||
<div class="page-content">
|
||||
<div class="list-block" id="text-additional">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-strikethrough" value="strikethrough">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Strikethrough</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-strikethrough" value="double-strikethrough">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Double Strikethrough</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-script" value="superscript">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Superscript</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-script" value="subscript">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Subscript</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-caps" value="small">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Small Caps</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="text-caps" value="all">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">All Caps</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="letter-spacing" id="letter-spacing">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Letter Spacing</div>
|
||||
<div class="item-after splitter">
|
||||
<% if (!android) { %><label></label><% } %>
|
||||
<p class="buttons-row">
|
||||
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||
<% if (android) { %><label></label><% } %>
|
||||
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Line Spacing view -->
|
||||
<div id="edit-text-linespacing">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Line Spacing</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="page-text-linespacing" data-page="edit-text-additional">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="1">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">1.0</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="1.15">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">1.15</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="1.5">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">1.5</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="2">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">2.0</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="2.5">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">2.5</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-radio item-content">
|
||||
<input type="radio" name="line-spacing" value="3">
|
||||
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">3.0</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bullets view -->
|
||||
<div id="edit-text-bullets">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Bullets</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="page-text-bullets">
|
||||
<div class="page-content dataview bullets">
|
||||
<div class="list-block">
|
||||
<% _.each(bullets, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(bullet) { %>
|
||||
<li data-type="<%= bullet.type %>">
|
||||
<% if (bullet.thumb.length < 1) { %>
|
||||
<div class="thumb"><label>None</label></div>
|
||||
<% } else { %>
|
||||
<div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
|
||||
<% } %>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Numbers view -->
|
||||
<div id="edit-text-numbers">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
|
||||
<div class="center sliding">Numbers</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page" id="page-text-numbers">
|
||||
<div class="page-content dataview numbers">
|
||||
<div class="list-block">
|
||||
<% _.each(numbers, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(number) { %>
|
||||
<li data-type="<%= number.type %>">
|
||||
<% if (number.thumb.length < 1) { %>
|
||||
<div class="thumb"><label>None</label></div>
|
||||
<% } else { %>
|
||||
<div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
|
||||
<% } %>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
apps/spreadsheeteditor/mobile/app/template/Editor.template
Normal file
10
apps/spreadsheeteditor/mobile/app/template/Editor.template
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="views">
|
||||
<div class="view view-main">
|
||||
<div class="pages navbar-through">
|
||||
<div data-page="index" class="page">
|
||||
<div id="editor_sdk" class="page-content no-fastclick">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
358
apps/spreadsheeteditor/mobile/app/template/Settings.template
Normal file
358
apps/spreadsheeteditor/mobile/app/template/Settings.template
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
<!-- Root view -->
|
||||
<div id="settings-root-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="center sliding">Settings</div>
|
||||
<div class="right"><% if (phone) { %><a href="#" class="link close-popup">Done</a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page" data-page="settings-root-view">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<!--<li>-->
|
||||
<!--<a id="settings-search" class="item-link no-indicator">-->
|
||||
<!--<div class="item-content">-->
|
||||
<!--<div class="item-media">-->
|
||||
<!--<i class="icon icon-search"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="item-inner">-->
|
||||
<!--<div class="item-title">Search</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<li>
|
||||
<a id="settings-edit-document" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-edit"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Edit Document</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div id="settings-readermode" class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-reader"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Reader Mode</div>
|
||||
<div class="item-after">
|
||||
<label class="label-switch">
|
||||
<input type="checkbox">
|
||||
<div class="checkbox"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="settings-download" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-download"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="settings-document-info" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-info"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Document Info</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<!--<li>-->
|
||||
<!--<a id="settings-history" class="item-link">-->
|
||||
<!--<div class="item-content">-->
|
||||
<!--<div class="item-media">-->
|
||||
<!--<i class="icon icon-versions"></i>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="item-inner">-->
|
||||
<!--<div class="item-title">Document History</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<li>
|
||||
<a id="settings-help" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-help"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Help</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="settings-about" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-about"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">About</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Info view -->
|
||||
<div id="settings-info-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding">
|
||||
<a href="#" class="back link">
|
||||
<i class="icon icon-back"></i>
|
||||
<% if (!android) { %>
|
||||
<span>Back</span>
|
||||
<% } %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="center sliding">Document Info</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page" data-page="settings-info-view">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Document title</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div id="settings-document-title" class="item-title">Loading...</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Author</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div id="settings-document-autor" class="item-title">Loading...</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Create date</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div id="settings-document-date" class="item-title">Loading...</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-title">Statistic</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Pages</div>
|
||||
<div class="item-after" id="statistic-pages">0</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Paragraphs</div>
|
||||
<div class="item-after" id="statistic-paragraphs">0</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Words</div>
|
||||
<div class="item-after" id="statistic-words">0</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Symbols</div>
|
||||
<div class="item-after" id="statistic-symbols">0</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Spaces</div>
|
||||
<div class="item-after" id="statistic-spaces">0</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download view -->
|
||||
<div id="settings-download-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding">
|
||||
<a href="#" class="back link">
|
||||
<i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="center sliding">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page formats" data-page="settings-download-view">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Download As...</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a data-format="65" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">DOCX</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-format="513" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">PDF</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-format="69" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">TXT</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-format="67" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">ODT</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-format="2051" class="item-link no-indicator">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-search"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">HTML</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History view -->
|
||||
<div id="settings-history-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding">
|
||||
<a href="#" class="back link">
|
||||
<i class="icon icon-back"></i>
|
||||
<% if (!android) { %>
|
||||
<span>Back</span>
|
||||
<% } %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="center sliding">Version History</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page" data-page="settings-history-view">
|
||||
<div class="page-content">
|
||||
<div class="content-block-title">Saved versions</div>
|
||||
<div class="content-block inset">
|
||||
<div class="content-block-inner">
|
||||
<p>Under construction</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About view -->
|
||||
<div id="settings-about-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left sliding">
|
||||
<a href="#" class="back link">
|
||||
<i class="icon icon-back"></i>
|
||||
<% if (!android) { %>
|
||||
<span>Back</span>
|
||||
<% } %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="center sliding">About</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page about" data-page="settings-about-view">
|
||||
<div class="page-content">
|
||||
<div class="content-block">
|
||||
<div class="logo" style="display: inline-block; width: 100%; height: 55px;"></div>
|
||||
</div>
|
||||
<div class="content-block">
|
||||
<h3>DOCUMENT EDITOR</h3>
|
||||
<h3>Version 4.1</h3>
|
||||
</div>
|
||||
<div class="content-block">
|
||||
<h3 class="vendor">Ascensio System SIA</h3>
|
||||
<p><label>address:</label><a class="external" href="#">Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021</a></p>
|
||||
<p><label>email:</label><a class="external" target="_blank" href="mailto:support@onlyoffice.com">support@onlyoffice.com</a></p>
|
||||
<p><label>tel:</label><a class="external" target="_blank" href="tel:+371 660-16425">+371 660-16425</a></p>
|
||||
<p><a class="external" target="_blank" href="http://www.onlyoffice.com">www.onlyoffice.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
45
apps/spreadsheeteditor/mobile/app/template/Toolbar.template
Normal file
45
apps/spreadsheeteditor/mobile/app/template/Toolbar.template
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<div class="navbar" id="editor-navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
<a id="document-back" href="#" class="link" style="display: none;">
|
||||
<i class="icon icon-back"></i>
|
||||
<% if (backTitle && !phone) { %>
|
||||
<span class="subtitle"><%= backTitle %></span>
|
||||
<% } %>
|
||||
</a>
|
||||
<% if (!android) { %>
|
||||
<a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
|
||||
<i class="icon icon-undo"></i>
|
||||
</a>
|
||||
<a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
|
||||
<i class="icon icon-redo"></i>
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (!phone) { %>
|
||||
<div class="center" id="toolbar-title"></div>
|
||||
<% } %>
|
||||
<div class="right">
|
||||
<% if (android) { %>
|
||||
<a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
|
||||
<i class="icon icon-undo"></i>
|
||||
</a>
|
||||
<a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
|
||||
<i class="icon icon-redo"></i>
|
||||
</a>
|
||||
<% } %>
|
||||
<a href="#" id="toolbar-edit" class="link icon-only" style="display: none;">
|
||||
<i class="icon icon-edit"></i>
|
||||
</a>
|
||||
<a href="#" id="toolbar-add" class="link icon-only" style="display: none;">
|
||||
<i class="icon icon-plus"></i>
|
||||
</a>
|
||||
<a href="#" id="toolbar-search" class="link icon-only">
|
||||
<i class="icon icon-search"></i>
|
||||
</a>
|
||||
<a href="#" id="toolbar-settings" class="link icon-only">
|
||||
<i class="icon icon-settings"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
132
apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js
Normal file
132
apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* DocumentHolder.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/8/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function ($, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.DocumentHolder = Backbone.View.extend((function() {
|
||||
// private
|
||||
var _anchorId = 'context-menu-target';
|
||||
|
||||
return {
|
||||
el: '#editor_sdk',
|
||||
|
||||
template: _.template('<div id="' + _anchorId + '" style="position: absolute;"></div>'),
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
},
|
||||
|
||||
// Set innerHTML and get the references to the DOM elements
|
||||
initialize: function() {
|
||||
//
|
||||
},
|
||||
|
||||
// Render layout
|
||||
render: function() {
|
||||
var el = $(this.el);
|
||||
|
||||
el.append(this.template({
|
||||
//
|
||||
}));
|
||||
|
||||
// this.f7View = uiApp.addView('.view-main', {
|
||||
// // params
|
||||
// });
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
showMenu: function (items, posX, posY) {
|
||||
if (items.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
var menuItemTemplate = _.template([
|
||||
'<% _.each(menuItems, function(item) { %>',
|
||||
'<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><%= item.caption %></li>',
|
||||
'<% }); %>'
|
||||
].join(''));
|
||||
|
||||
$('#' + _anchorId)
|
||||
.css('left', posX)
|
||||
.css('top', posY);
|
||||
|
||||
uiApp.closeModal('.document-menu.modal-in');
|
||||
|
||||
var popoverHTML =
|
||||
'<div class="popover document-menu">'+
|
||||
'<div class="popover-inner">'+
|
||||
'<div class="list-block">'+
|
||||
'<ul>'+
|
||||
menuItemTemplate({menuItems: items}) +
|
||||
'</ul>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>';
|
||||
uiApp.popover(popoverHTML, $('#' + _anchorId));
|
||||
|
||||
$('.modal-overlay').removeClass('modal-overlay-visible');
|
||||
|
||||
$('.document-menu li').single('click', _.buffered(function(e) {
|
||||
var $target = $(e.currentTarget),
|
||||
eventName = $target.data('event');
|
||||
|
||||
this.fireEvent('contextmenu:click', [this, eventName]);
|
||||
}, 100, this));
|
||||
|
||||
// console.log('Show menu at position:', posX, posY);
|
||||
},
|
||||
|
||||
hideMenu: function () {
|
||||
$('#' + _anchorId)
|
||||
.css('left', -1000)
|
||||
.css('top', -1000);
|
||||
|
||||
uiApp.closeModal('.document-menu.modal-in');
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
81
apps/spreadsheeteditor/mobile/app/view/Editor.js
Normal file
81
apps/spreadsheeteditor/mobile/app/view/Editor.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Editor.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/15/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
define([
|
||||
'text!spreadsheeteditor/mobile/app/template/Editor.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (editorTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.Editor = Backbone.View.extend({
|
||||
el: 'body',
|
||||
|
||||
// Compile our stats template
|
||||
template: _.template(editorTemplate),
|
||||
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
},
|
||||
|
||||
// Set innerHTML and get the references to the DOM elements
|
||||
initialize: function() {
|
||||
//
|
||||
},
|
||||
|
||||
// Render layout
|
||||
render: function() {
|
||||
var el = $(this.el);
|
||||
el.html(this.template({
|
||||
backTitle: Framework7.prototype.device.android ? '' : ''
|
||||
}));
|
||||
|
||||
this.f7View = uiApp.addView('.view-main', {
|
||||
// params
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
});
|
||||
190
apps/spreadsheeteditor/mobile/app/view/Toolbar.js
Normal file
190
apps/spreadsheeteditor/mobile/app/view/Toolbar.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Toolbar.js
|
||||
* Document Editor
|
||||
*
|
||||
* Created by Maxim Kadushkin on 11/15/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!spreadsheeteditor/mobile/app/template/Toolbar.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (toolbarTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.Toolbar = Backbone.View.extend((function() {
|
||||
// private
|
||||
|
||||
return {
|
||||
el: '.view-main',
|
||||
|
||||
// Compile our stats template
|
||||
template: _.template(toolbarTemplate),
|
||||
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
"click #toolbar-search" : "searchToggle",
|
||||
"click #toolbar-edit" : "showEdition",
|
||||
"click #toolbar-add" : "showInserts",
|
||||
"click #toolbar-settings" : "showSettings"
|
||||
},
|
||||
|
||||
// Set innerHTML and get the references to the DOM elements
|
||||
initialize: function() {
|
||||
var me = this;
|
||||
|
||||
Common.NotificationCenter.on('readermode:change', function (reader) {
|
||||
if (reader) {
|
||||
me.hideSearch();
|
||||
$('#toolbar-search').addClass('disabled');
|
||||
} else {
|
||||
$('#toolbar-search').removeClass('disabled');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Render layout
|
||||
render: function() {
|
||||
var $el = $(this.el);
|
||||
|
||||
$el.prepend(this.template({
|
||||
android : Common.SharedSettings.get('android'),
|
||||
phone : Common.SharedSettings.get('phone'),
|
||||
backTitle : Common.SharedSettings.get('android') ? '' : 'Back'
|
||||
}));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
setMode: function (mode) {
|
||||
var isEdit = (mode === 'edit');
|
||||
|
||||
if (isEdit) {
|
||||
$('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show();
|
||||
}
|
||||
},
|
||||
|
||||
// Search
|
||||
searchToggle: function() {
|
||||
if ($$('.searchbar.document').length > 0) {
|
||||
this.hideSearch();
|
||||
} else {
|
||||
this.showSearch();
|
||||
}
|
||||
},
|
||||
|
||||
showSearch: function () {
|
||||
var me = this,
|
||||
searchBar = $$('.searchbar.document');
|
||||
|
||||
if (searchBar.length < 1) {
|
||||
$(me.el).find('.pages .page').first().prepend(_.template(
|
||||
'<form class="searchbar document navbar navbar-hidden">' +
|
||||
'<div class="searchbar-input">' +
|
||||
'<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>' +
|
||||
'</div>' +
|
||||
'<p class="buttons-row">' +
|
||||
'<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>' +
|
||||
'<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>' +
|
||||
'</p>' +
|
||||
'</form>', {}
|
||||
));
|
||||
me.fireEvent('searchbar:render', me);
|
||||
|
||||
searchBar = $$('.searchbar.document');
|
||||
|
||||
if (Common.SharedSettings.get('android')) {
|
||||
searchBar.find('.buttons-row').css('margin-left', '10px');
|
||||
searchBar.find('.buttons-row a').css('min-width', '0px');
|
||||
} else {
|
||||
searchBar.find('.buttons-row .next').css('margin-left', '10px');
|
||||
}
|
||||
|
||||
_.defer(function() {
|
||||
uiApp.showNavbar(searchBar);
|
||||
|
||||
searchBar.transitionEnd(function () {
|
||||
if (!searchBar.hasClass('navbar-hidden')) {
|
||||
me.fireEvent('searchbar:show', me);
|
||||
$('.searchbar input').focus();
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
|
||||
hideSearch: function () {
|
||||
var me = this,
|
||||
searchBar = $$('.searchbar.document');
|
||||
|
||||
if (searchBar.length > 0) {
|
||||
// Animating
|
||||
if (searchBar.hasClass('.navbar-hidding')) {
|
||||
return;
|
||||
}
|
||||
|
||||
_.defer(function() {
|
||||
searchBar.transitionEnd(function () {
|
||||
me.fireEvent('searchbar:hide', me);
|
||||
searchBar.remove();
|
||||
});
|
||||
|
||||
uiApp.hideNavbar(searchBar);
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
|
||||
// Editor
|
||||
showEdition: function () {
|
||||
// SSE.getController('EditContainer').showModal();
|
||||
},
|
||||
|
||||
// Inserts
|
||||
|
||||
showInserts: function () {
|
||||
// SSE.getController('AddContainer').showModal();
|
||||
},
|
||||
|
||||
// Settings
|
||||
showSettings: function () {
|
||||
// SSE.getController('Settings').showModal();
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
|
|
@ -1,13 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ONLYOFFICE Spreadsheet</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
||||
<title>ONLYOFFICE Spreadsheets</title>
|
||||
|
||||
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
|
||||
<!-- App styles -->
|
||||
|
||||
<!-- splash -->
|
||||
|
||||
<!-- splash -->
|
||||
|
||||
<style type="text/css">
|
||||
.loadmask {
|
||||
position: absolute;
|
||||
|
|
@ -169,63 +175,72 @@
|
|||
14% { background: #f4f4f4; top:100px; opacity:1; }
|
||||
15% { background: #f4f4f4; top:0; opacity:1; }
|
||||
20% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #fff; top:0; opacity:0; }
|
||||
45% { background: #EFEFEF; top:0; opacity:0,2; }
|
||||
100% { top:100px; background: #55bce6; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
function getUrlParams() {
|
||||
var e,
|
||||
a = /\+/g, // Regex for replacing addition symbol with a space
|
||||
r = /([^&=]+)=?([^&]*)/g,
|
||||
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
||||
q = window.location.search.substring(1),
|
||||
urlParams = {};
|
||||
|
||||
<!-- vendor -->
|
||||
<!-- sdk -->
|
||||
<link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main-mobile.css"/>
|
||||
while (e = r.exec(q))
|
||||
urlParams[d(e[1])] = d(e[2]);
|
||||
|
||||
return urlParams;
|
||||
}
|
||||
|
||||
function encodeUrlParam(str) {
|
||||
return str.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
}
|
||||
|
||||
var params = getUrlParams(),
|
||||
lang = (params["lang"] || 'en').split("-")[0],
|
||||
customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
|
||||
margin = (customer !== '') ? 50 : 20,
|
||||
loading = 'Loading...',
|
||||
logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
|
||||
|
||||
if ( lang == 'de') loading = 'Ladevorgang...';
|
||||
else if ( lang == 'es') loading = 'Cargando...';
|
||||
else if ( lang == 'fr') loading = 'Chargement en cours...';
|
||||
else if ( lang == 'it') loading = 'Caricamento in corso...';
|
||||
else if ( lang == 'pt') loading = 'Carregando...';
|
||||
else if ( lang == 'ru') loading = 'Загрузка...';
|
||||
else if ( lang == 'sl') loading = 'Nalaganje...';
|
||||
else if ( lang == 'tr') loading = 'Yükleniyor...';
|
||||
|
||||
document.write(
|
||||
'<div id="loading-mask" class="loadmask">' +
|
||||
'<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
|
||||
((logo!==null) ? logo :
|
||||
'<div class="loader-page-romb">' +
|
||||
'<div class="romb" id="blue"></div>' +
|
||||
'<div class="romb" id="green"></div>' +
|
||||
'<div class="romb" id="red"></div>' +
|
||||
'</div>') +
|
||||
'</div>' +
|
||||
'<div class="loader-page-text">' + customer +
|
||||
'<div class="loader-page-text-loading">' + loading + '</div>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
</script>
|
||||
|
||||
<div id="viewport"></div>
|
||||
|
||||
<script type="text/javascript" src="../../../vendor/touch/sencha-touch-debug.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/megapixel/src/megapix-image.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jsrsasign/jsrsasign-latest-all-min.js"></script>
|
||||
|
||||
<!-- Application -->
|
||||
|
||||
<!--<link rel="stylesheet" href="resources/css/application-normal.css" type="text/css"/>-->
|
||||
<script type="text/javascript">
|
||||
var injectStyleElement = function(url) {
|
||||
var style = document.createElement('link'),
|
||||
documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
|
||||
|
||||
style.rel = 'stylesheet';
|
||||
style.href = url;
|
||||
style.type = 'text/css';
|
||||
|
||||
if (documentHead) {
|
||||
documentHead.appendChild(style);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
injectStyleElement((window.devicePixelRatio > 1)
|
||||
? 'resources/css/application-retina.css'
|
||||
: 'resources/css/application-normal.css'
|
||||
);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../common/Analytics.js"></script>
|
||||
<script type="text/javascript" src="../../common/Gateway.js"></script>
|
||||
<script type="text/javascript" src="../../common/mobile/loader.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
<script type="text/javascript" src="../../common/locale.js"></script>
|
||||
|
||||
<!-- SDK -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.g_debug_mode = true;
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../sdk_dev_scripts.js"></script>
|
||||
<script>
|
||||
|
|
@ -233,67 +248,8 @@
|
|||
document.write('<script type="text/javascript" src="' + item + '"><\/script>');
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
if (!(Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop))) {
|
||||
document.write(
|
||||
'<div id="unsuported-view-id" class="unsuported-view"></div>'
|
||||
);
|
||||
} else {
|
||||
function getUrlParams() {
|
||||
var e,
|
||||
a = /\+/g, // Regex for replacing addition symbol with a space
|
||||
r = /([^&=]+)=?([^&]*)/g,
|
||||
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
||||
q = window.location.search.substring(1),
|
||||
urlParams = {};
|
||||
<!-- application -->
|
||||
<script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
|
||||
|
||||
while (e = r.exec(q))
|
||||
urlParams[d(e[1])] = d(e[2]);
|
||||
|
||||
return urlParams;
|
||||
}
|
||||
|
||||
function encodeUrlParam(str) {
|
||||
return str.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
}
|
||||
|
||||
var params = getUrlParams(),
|
||||
lang = (params["lang"] || 'en').split("-")[0],
|
||||
customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
|
||||
margin = (customer !== '') ? 50 : 20,
|
||||
loading = 'Loading...',
|
||||
logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
|
||||
|
||||
if ( lang == 'de') loading = 'Ladevorgang...';
|
||||
else if ( lang == 'es') loading = 'Cargando...';
|
||||
else if ( lang == 'fr') loading = 'Chargement en cours...';
|
||||
else if ( lang == 'it') loading = 'Caricamento in corso...';
|
||||
else if ( lang == 'pt') loading = 'Carregando...';
|
||||
else if ( lang == 'ru') loading = 'Загрузка...';
|
||||
else if ( lang == 'sl') loading = 'Nalaganje...';
|
||||
else if ( lang == 'tr') loading = 'Yükleniyor...';
|
||||
|
||||
document.write(
|
||||
'<div id="loading-mask" class="loadmask">' +
|
||||
'<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
|
||||
((logo!==null) ? logo :
|
||||
'<div class="loader-page-romb">' +
|
||||
'<div class="romb" id="blue"></div>' +
|
||||
'<div class="romb" id="green"></div>' +
|
||||
'<div class="romb" id="red"></div>' +
|
||||
'</div>') +
|
||||
'</div>' +
|
||||
'<div class="loader-page-text">' + customer +
|
||||
'<div class="loader-page-text-loading">' + loading + '</div>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6570
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
Normal file
6570
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
Normal file
File diff suppressed because it is too large
Load diff
6128
apps/spreadsheeteditor/mobile/resources/css/app-material.css
Normal file
6128
apps/spreadsheeteditor/mobile/resources/css/app-material.css
Normal file
File diff suppressed because it is too large
Load diff
170
apps/spreadsheeteditor/mobile/resources/less/app-ios.less
Normal file
170
apps/spreadsheeteditor/mobile/resources/less/app-ios.less
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
@import url('../../../../../vendor/framework7/src/less/ios/_mixins.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less');
|
||||
|
||||
// Colors
|
||||
@themeColor: #8ca946; // (64,102,215)
|
||||
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/intro.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/grid.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/views.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/pages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/toolbars.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/toolbars-pages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/searchbar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/messagebar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/icons.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/badges.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/chips.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/content-block.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/lists.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/contacts.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/forms.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/floating-button.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/accordion.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/cards.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/modals.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/panels.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/lazy-load.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/tabs.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/messages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/statusbar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/preloader.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/progressbar.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/pull-to-refresh.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/infinite-scroll.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/autocomplete.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/swiper.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/photo-browser.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/picker.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/calendar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/notifications.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/ios/disabled.less');
|
||||
|
||||
// Main Toolbar
|
||||
#editor-navbar.navbar .right a + a,
|
||||
#editor-navbar.navbar .left a + a {
|
||||
margin-left: 0;
|
||||
|
||||
html:not(.phone) & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@import url('../../../../common/mobile/resources/less/_mixins.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_container.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_dataview.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_listview.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_button.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
|
||||
@import url('../../../../common/mobile/resources/less/ios/_about.less');
|
||||
|
||||
@import url('ios/_search.less');
|
||||
@import url('ios/_icons.less');
|
||||
|
||||
// Add Container
|
||||
|
||||
#add-table,
|
||||
#add-shape {
|
||||
.page {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
|
||||
.table-styles {
|
||||
.row {
|
||||
&, li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shapes
|
||||
|
||||
.shapes {
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 1px;
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Charts
|
||||
|
||||
.chart-types {
|
||||
li {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 6px;
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bullets and numbers
|
||||
|
||||
.bullets,
|
||||
.numbers {
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 1px;
|
||||
border: 1px solid #c4c4c4;
|
||||
html.pixel-ratio-2 & {
|
||||
border: 0.5px solid #c4c4c4;
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
border: 0.33px solid #c4c4c4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
//
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
background-size: cover;
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#editor_sdk {
|
||||
//position: absolute;
|
||||
//left: 0;
|
||||
}
|
||||
158
apps/spreadsheeteditor/mobile/resources/less/app-material.less
Normal file
158
apps/spreadsheeteditor/mobile/resources/less/app-material.less
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
@import url('../../../../../vendor/framework7/src/less/material/_mixins.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less');
|
||||
|
||||
// Colors
|
||||
@themeColor: #5a7dc9; // (64,102,215)
|
||||
@navBarIconColor: #fff;
|
||||
|
||||
@import url('../../../../../vendor/framework7/src/less/material/intro.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/grid.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/views.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/pages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/toolbars.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/toolbars-pages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/searchbar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/messagebar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/icons.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/badges.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/chips.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/content-block.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/lists.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/contacts.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/forms.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/floating-button.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/accordion.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/cards.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/modals.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/panels.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/lazy-load.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/tabs.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/messages.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/statusbar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/preloader.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/progressbar.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/pull-to-refresh.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/infinite-scroll.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/autocomplete.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/swiper.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/photo-browser.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/picker.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/calendar.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/notifications.less');
|
||||
//@import url('../../../../../vendor/framework7/src/less/material/login-screen.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/ripple.less');
|
||||
@import url('../../../../../vendor/framework7/src/less/material/disabled.less');
|
||||
|
||||
|
||||
@import url('../../../../common/mobile/resources/less/_mixins.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_container.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_dataview.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_listview.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_button.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_contextmenu.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_color-palette.less');
|
||||
@import url('../../../../common/mobile/resources/less/material/_about.less');
|
||||
|
||||
@import url('material/_search.less');
|
||||
@import url('material/_icons.less');
|
||||
|
||||
// Add Container
|
||||
|
||||
#add-table,
|
||||
#add-shape {
|
||||
.page {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
|
||||
.table-styles {
|
||||
.row {
|
||||
&, li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shapes
|
||||
|
||||
.shapes {
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 1px;
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Charts
|
||||
|
||||
.chart-types {
|
||||
li {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 6px;
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bullets and numbers
|
||||
|
||||
.bullets,
|
||||
.numbers {
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 1px;
|
||||
border: 1px solid #c4c4c4;
|
||||
html.pixel-ratio-2 & {
|
||||
border: 0.5px solid #c4c4c4;
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
border: 0.33px solid #c4c4c4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
//
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
background-size: cover;
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less
Normal file
198
apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
// Icons
|
||||
i.icon {
|
||||
&.icon-search {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.8,15c1.4-1.6,2.2-3.7,2.2-5.9c0-5-4-9-9-9C4,0,0,4,0,9c0,5,4,9,9,9c2.3,0,4.4-0.9,5.9-2.2l5.8,5.8l0.2-0.6l0.7-0.2L15.8,15z M9,17c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C17,13.5,13.5,17,9,17z"/></g></svg>');
|
||||
}
|
||||
&.icon-burger {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect x="2" y="17" width="18" height="1"/><rect x="2" y="13" width="18" height="1"/><rect x="2" y="9" width="18" height="1"/><rect x="2" y="5" width="18" height="1"/></g></svg>');
|
||||
}
|
||||
&.icon-edit {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="19.3,5.3 6.1,18.4 4.6,16.9 17.8,3.8 17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 "/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-undo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,16v2h-1v-2l0,0c0-2.9-2.1-5-5-5l0,0H1.9L5,14c0.1,0.1,0.1,0.2,0,0.3l-0.4,0.4c-0.1,0.1-0.2,0.1-0.3,0l-4.2-4.2c-0.1-0.1-0.1-0.2,0-0.3l0.4-0.4h0.1L4.4,6c0.1-0.1,0.2-0.1,0.3,0l0.5,0.4c0.1,0.1,0.1,0.2,0,0.3L1.9,10H16l0,0C19.3,10,22,12.7,22,16L22,16z"/></g></svg>');
|
||||
}
|
||||
&.icon-redo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,16c0-3.3,2.7-6,6-6v0h14.1l-3.3-3.3c-0.1-0.1-0.1-0.2,0-0.3L17.3,6c0.1-0.1,0.2-0.1,0.3,0l3.8,3.8c0,0,0.1,0,0.1,0l0.4,0.4c0.1,0.1,0.1,0.2,0,0.3l-4.2,4.2c-0.1,0.1-0.2,0.1-0.3,0l-0.4-0.4c-0.1-0.1-0.1-0.2,0-0.3l3.1-3H6v0c-2.9,0-5,2.1-5,5h0v2H0L0,16L0,16z"/></g></svg>');
|
||||
}
|
||||
&.icon-reader {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-download {
|
||||
width: 22px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 "/><polygon points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 "/></g></svg>');
|
||||
}
|
||||
&.icon-info {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
|
||||
}
|
||||
&.icon-plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-settings {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.8,3l0.4,2c0.1,0.7,0.6,1.1,1.3,1.1c0.3,0,0.5-0.1,0.7-0.2l1.9-1.2l1.1,1.1l-1.1,1.8C15.8,8,15.8,8.5,16,8.9c0.2,0.4,0.5,0.7,1,0.8l2.1,0.5v1.6L17,12.2c-0.5,0.1-0.8,0.4-1,0.8c-0.2,0.4-0.1,0.9,0.1,1.2l1.2,1.9l-1.1,1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6,0-1.2,0.5-1.3,1.1l-0.5,2.1h-1.6l-0.4-2C9.7,16.4,9.2,16,8.5,16c-0.3,0-0.5,0.1-0.7,0.2l-1.9,1.2l-1.1-1.1l1.1-1.8c0.3-0.4,0.3-0.9,0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1,0.8-0.4,1-0.8C6.1,8.7,6,8.2,5.8,7.9l-1-2l1.1-1.1l1.8,1.1C8,6.1,8.2,6.2,8.5,6.2c0.6,0,1.2-0.5,1.3-1.1L10.3,3H11.8 M11,15.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5s-4.5,2-4.5,4.5S8.5,15.5,11,15.5 M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5c-0.1,0-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
|
||||
}
|
||||
&.icon-about {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-help {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
|
||||
}
|
||||
&.icon-versions {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-additional {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-color {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-selection {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-bullets {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-numbers {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-linespacing {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 "/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-center {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-jast {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
}
|
||||
&.icon-de-indent {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
|
||||
}
|
||||
&.icon-in-indent {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
|
||||
}
|
||||
&.icon-prev {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
|
||||
}
|
||||
&.icon-next {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-column-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-column-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-row-above {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-row-below {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-remove-column {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-remove-row {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-expand-down {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
|
||||
}
|
||||
&.icon-pagebreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
|
||||
}
|
||||
&.icon-sectionbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
|
||||
}
|
||||
&.icon-stringbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
|
||||
}
|
||||
&.icon-pagenumber {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-link {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
107
apps/spreadsheeteditor/mobile/resources/less/ios/_search.less
Normal file
107
apps/spreadsheeteditor/mobile/resources/less/ios/_search.less
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
// Search
|
||||
|
||||
.tablet {
|
||||
// Replace mode
|
||||
.searchbar.document.replace {
|
||||
.center {
|
||||
.searchbar-input:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.replace {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.replace {
|
||||
display: flex;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search mode
|
||||
.searchbar.document {
|
||||
.center {
|
||||
width: 100%;
|
||||
|
||||
.replace {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.prev {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.replace {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
// Replace mode
|
||||
.searchbar.document.replace {
|
||||
height: 88px;
|
||||
|
||||
.left {
|
||||
margin-top: -44px;
|
||||
}
|
||||
|
||||
.center {
|
||||
.searchbar-input {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.replace {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.replace {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search mode
|
||||
.searchbar.document {
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left {
|
||||
min-width: 22px;
|
||||
max-width: 22px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
|
||||
.replace {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.replace {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar.document {
|
||||
background: lighten(@searchbarBg, 10%);
|
||||
}
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
// Icons
|
||||
i.icon {
|
||||
&.icon-expand-up {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>');
|
||||
}
|
||||
&.icon-expand-down {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
|
||||
}
|
||||
&.icon-search {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-edit {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 "/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-reader {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-download {
|
||||
width: 22px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon id="XMLID_3_" points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 "/><polygon id="XMLID_6_" points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 "/></g></svg>');
|
||||
}
|
||||
&.icon-info {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
|
||||
}
|
||||
&.icon-about {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-help {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
|
||||
}
|
||||
&.icon-versions {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
|
||||
}
|
||||
//&.icon-text-additional {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
|
||||
//}
|
||||
//&.icon-text-color {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
|
||||
//}
|
||||
//&.icon-text-selection {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
|
||||
//}
|
||||
//&.icon-bullets {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
|
||||
//}
|
||||
//&.icon-numbers {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
|
||||
//}
|
||||
//&.icon-linespacing {
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 "/></g></svg>');
|
||||
//}
|
||||
&.icon-text-align-center {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-jast {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
}
|
||||
&.icon-de-indent {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
|
||||
}
|
||||
&.icon-in-indent {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-column-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-column-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-row-above {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-add-row-below {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-remove-column {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-remove-row {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-pagebreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
|
||||
}
|
||||
&.icon-sectionbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
|
||||
}
|
||||
&.icon-stringbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
|
||||
}
|
||||
&.icon-pagenumber {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-link {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
// Overwrite color for toolbar
|
||||
.navbar {
|
||||
i.icon {
|
||||
&.icon-undo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M20,17v-2c0-1.7-1.3-3-3-3H3.7l3.4,3.4l-1.4,1.4l-5.2-5.2L0,11l0.5-0.6l5.2-5.2l1.4,1.4L3.7,10H17c2.8,0,5,2.2,5,5v2H20z"/></g></svg>');
|
||||
}
|
||||
&.icon-redo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,17v-2c0-2.8,2.2-5,5-5h13.3l-3.4-3.4l1.4-1.4l5.2,5.2L22,11l-0.5,0.6l-5.2,5.2l-1.4-1.4l3.4-3.4H5c-1.7,0-3,1.3-3,3v2H0z"/></g></svg>');
|
||||
}
|
||||
&.icon-search {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-burger {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-8 1 22 22" fill="@{navBarIconColor}"><g><path d="M-6,6v2h18V6H-6z M-6,13h18v-2H-6V13z M-6,18h18v-2H-6V18z"/></g></svg>');
|
||||
}
|
||||
&.icon-plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-edit {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 "/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-settings {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
|
||||
}
|
||||
&.icon-prev {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
|
||||
}
|
||||
&.icon-next {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
|
||||
}
|
||||
&.icon-expand-down {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue