[de mobile] added color schemes

This commit is contained in:
Julia Svinareva 2019-04-15 17:42:17 +03:00
parent 6e78971810
commit 1ae45b6f2a
9 changed files with 179 additions and 4 deletions

View 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;
}
}

View 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;
}
}

View file

@ -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));

View file

@ -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>

View file

@ -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 || {}))

View file

@ -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;
}

View file

@ -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;

View file

@ -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
* {

View file

@ -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');