[de mobile] added color schemes
This commit is contained in:
parent
6e78971810
commit
1ae45b6f2a
27
apps/common/mobile/resources/less/ios/_color-schema.less
Normal file
27
apps/common/mobile/resources/less/ios/_color-schema.less
Normal file
|
@ -0,0 +1,27 @@
|
|||
.color-schemes-menu {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.item-inner {
|
||||
justify-content: flex-start;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.color-schema-block {
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
}
|
||||
.color {
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
flex-grow: 1;
|
||||
margin: 0 1px 0 0;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
.text {
|
||||
margin-left: 20px;
|
||||
color: #212121;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
.color-schemes-menu {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.item-inner {
|
||||
justify-content: flex-start;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.color-schema-block {
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
}
|
||||
.color {
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
flex-grow: 1;
|
||||
margin: 0 1px 0 0;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
.text {
|
||||
margin-left: 20px;
|
||||
color: #212121;
|
||||
}
|
||||
}
|
|
@ -82,7 +82,8 @@ define([
|
|||
_licInfo,
|
||||
_canReview = false,
|
||||
_isReviewOnly = false,
|
||||
_fileKey;
|
||||
_fileKey,
|
||||
templateInsert;
|
||||
|
||||
var mm2Cm = function(mm) {
|
||||
return parseFloat((mm/10.).toFixed(2));
|
||||
|
@ -130,6 +131,7 @@ define([
|
|||
me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onApiDocumentName, me));
|
||||
me.api.asc_registerCallback('asc_onDocSize', _.bind(me.onApiPageSize, me));
|
||||
me.api.asc_registerCallback('asc_onPageOrient', _.bind(me.onApiPageOrient, me));
|
||||
me.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(me.onSendThemeColorSchemes, me));
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
|
@ -224,6 +226,9 @@ define([
|
|||
} else if ('#settings-advanced-view' == pageId) {
|
||||
me.initPageAdvancedSettings();
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=settings-advanced-view]', '.page[data-page=settings-advanced-view] .page-content');
|
||||
} else if ('#color-schemes-view' == pageId) {
|
||||
me.initPageColorSchemes();
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
|
||||
} else {
|
||||
$('#settings-readermode input:checkbox').attr('checked', Common.SharedSettings.get('readerMode'));
|
||||
$('#settings-spellcheck input:checkbox').attr('checked', Common.localStorage.getBool("de-mobile-spellcheck", false));
|
||||
|
@ -239,7 +244,32 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
initPageAdvancedSettings: function () {
|
||||
initPageColorSchemes: function() {
|
||||
$('#color-schemes-content').html(templateInsert);
|
||||
$('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
|
||||
},
|
||||
|
||||
onSendThemeColorSchemes: function (schemas) {
|
||||
templateInsert = "";
|
||||
_.each(schemas, function (schema, index) {
|
||||
var colors = schema.get_colors();//schema.colors;
|
||||
templateInsert = templateInsert + "<a class='color-schemes-menu'><input type='hidden' value='" + index + "'><div class='item-content'><div class='item-inner'><span class='color-schema-block'>";
|
||||
for (var j = 2; j < 7; j++) {
|
||||
var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
|
||||
templateInsert = templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
|
||||
}
|
||||
templateInsert = templateInsert + "</span><span class='text'>" + schema.get_name() + "</span></div></div></a>";
|
||||
}, this);
|
||||
},
|
||||
|
||||
onColorSchemaClick: function(event) {
|
||||
if (this.api) {
|
||||
var ind = $(event.currentTarget).children('input').val();
|
||||
this.api.ChangeColorScheme(ind);
|
||||
}
|
||||
},
|
||||
|
||||
initPageAdvancedSettings: function() {
|
||||
var me = this,
|
||||
$unitMeasurement = $('.page[data-page=settings-advanced-view] input:radio[name=unit-of-measurement]');
|
||||
$unitMeasurement.single('change', _.bind(me.unitMeasurementChange, me));
|
||||
|
|
|
@ -111,6 +111,18 @@
|
|||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="color-schemes" class="item-link" data-page="#color-schemes-view">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
<i class="icon icon-doc-setup"></i>
|
||||
</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textColorSchemes %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="settings-download-as" class="item-link" data-page="#settings-download-view">
|
||||
<div class="item-content">
|
||||
|
@ -658,6 +670,26 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color schemes view -->
|
||||
<div id="color-schemes-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><%= scope.textBack %></span><% } %></a></div>
|
||||
<div class="center sliding"><%= scope.textColorSchemes %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page" data-page="color-schemes-view">
|
||||
<div class="page-content">
|
||||
<div id="color-schemes-content" class="list-block">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -125,6 +125,7 @@ define([
|
|||
} else {
|
||||
$layour.find('#settings-document').hide();
|
||||
$layour.find('#settings-advanced').hide();
|
||||
$layour.find('#color-schemes').hide();
|
||||
$layour.find('#settings-spellcheck').hide();
|
||||
$layour.find('#settings-orthography').hide();
|
||||
}
|
||||
|
@ -283,7 +284,8 @@ define([
|
|||
textUnitOfMeasurement: 'Unit of Measurement',
|
||||
textCentimeter: 'Centimeter',
|
||||
textPoint: 'Point',
|
||||
textInch: 'Inch'
|
||||
textInch: 'Inch',
|
||||
textColorSchemes: 'Color Schemes'
|
||||
|
||||
}
|
||||
})(), DE.Views.Settings || {}))
|
||||
|
|
|
@ -6830,3 +6830,31 @@ html.pixel-ratio-3 .numbers li {
|
|||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.color-schemes-menu {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
}
|
||||
.color-schemes-menu .item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.color-schemes-menu .item-inner {
|
||||
justify-content: flex-start;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.color-schemes-menu .color-schema-block {
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
}
|
||||
.color-schemes-menu .color {
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
flex-grow: 1;
|
||||
margin: 0 1px 0 0;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
.color-schemes-menu .text {
|
||||
margin-left: 20px;
|
||||
color: #212121;
|
||||
}
|
||||
|
|
|
@ -5836,7 +5836,34 @@ html.phone .document-menu .list-block .item-link {
|
|||
margin-right: 5px;
|
||||
}
|
||||
.about .logo {
|
||||
background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
|
||||
background: url('../../../../common/mobile/resources/img/about/onlyoffice.svg') no-repeat center;
|
||||
}
|
||||
.color-schemes-menu {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
}
|
||||
.color-schemes-menu .item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.color-schemes-menu .item-inner {
|
||||
justify-content: flex-start;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.color-schemes-menu .color-schema-block {
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
}
|
||||
.color-schemes-menu .color {
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
flex-grow: 1;
|
||||
margin: 0 1px 0 0;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
.color-schemes-menu .text {
|
||||
margin-left: 20px;
|
||||
color: #212121;
|
||||
}
|
||||
.tablet .searchbar.document.replace .center > .replace {
|
||||
display: flex;
|
||||
|
|
|
@ -40,6 +40,7 @@
|
|||
@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');
|
||||
@import url('../../../../common/mobile/resources/less/material/_color-schema.less');
|
||||
|
||||
// Disable text select
|
||||
* {
|
||||
|
|
|
@ -53,6 +53,7 @@
|
|||
@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('../../../../common/mobile/resources/less/material/_color-schema.less');
|
||||
|
||||
@import url('material/_search.less');
|
||||
@import url('material/_icons.less');
|
||||
|
|
Loading…
Reference in a new issue