[de mobile] Margins settings placed on a separate page
This commit is contained in:
Julia Svinareva
parent
1e1261b892
commit
34fe237ef3
|
|
@ -115,7 +115,7 @@ define([
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
uiApp.onPageAfterBack('settings-document-view', function (page) {
|
uiApp.onPageAfterBack('margin-view', function (page) {
|
||||||
me.applyPageMarginsIfNeed()
|
me.applyPageMarginsIfNeed()
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -232,6 +232,9 @@ define([
|
||||||
} else if ('#color-schemes-view' == pageId) {
|
} else if ('#color-schemes-view' == pageId) {
|
||||||
me.initPageColorSchemes();
|
me.initPageColorSchemes();
|
||||||
Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
|
Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
|
||||||
|
} else if ('#margins-view' == pageId) {
|
||||||
|
me.initPageMargin();
|
||||||
|
Common.Utils.addScrollIfNeed('.page[data-page=margin-view]', '.page[data-page=margin-view] .page-content');
|
||||||
} else {
|
} else {
|
||||||
$('#settings-readermode input:checkbox').attr('checked', Common.SharedSettings.get('readerMode'));
|
$('#settings-readermode input:checkbox').attr('checked', Common.SharedSettings.get('readerMode'));
|
||||||
$('#settings-review input:checkbox').attr('checked', _isReviewOnly || Common.localStorage.getBool("de-mobile-track-changes-" + (_fileKey || '')));
|
$('#settings-review input:checkbox').attr('checked', _isReviewOnly || Common.localStorage.getBool("de-mobile-track-changes-" + (_fileKey || '')));
|
||||||
|
|
@ -244,6 +247,27 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
initPageMargin: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
// Init page margins
|
||||||
|
me.localSectionProps = me.api.asc_GetSectionProps();
|
||||||
|
|
||||||
|
if (me.localSectionProps) {
|
||||||
|
me.maxMarginsH = me.localSectionProps.get_H() - 26;
|
||||||
|
me.maxMarginsW = me.localSectionProps.get_W() - 127;
|
||||||
|
|
||||||
|
$('#document-margin-top .item-after label').text(mm2Cm(me.localSectionProps.get_TopMargin()) + ' ' + txtCm);
|
||||||
|
$('#document-margin-bottom .item-after label').text(mm2Cm(me.localSectionProps.get_BottomMargin()) + ' ' + txtCm);
|
||||||
|
$('#document-margin-left .item-after label').text(mm2Cm(me.localSectionProps.get_LeftMargin()) + ' ' + txtCm);
|
||||||
|
$('#document-margin-right .item-after label').text(mm2Cm(me.localSectionProps.get_RightMargin()) + ' ' + txtCm);
|
||||||
|
}
|
||||||
|
|
||||||
|
_.each(["top", "left", "bottom", "right"], function(align) {
|
||||||
|
$(Common.Utils.String.format('#document-margin-{0} .button', align)).single('click', _.bind(me.onPageMarginsChange, me, align));
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
initPageColorSchemes: function() {
|
initPageColorSchemes: function() {
|
||||||
$('#color-schemes-content').html(templateInsert);
|
$('#color-schemes-content').html(templateInsert);
|
||||||
$('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
|
$('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
|
||||||
|
|
@ -292,22 +316,6 @@ define([
|
||||||
$pageSize.find('.item-title').text(_pageSizes[_pageSizesIndex]['caption']);
|
$pageSize.find('.item-title').text(_pageSizes[_pageSizesIndex]['caption']);
|
||||||
$pageSize.find('.item-subtitle').text(_pageSizes[_pageSizesIndex]['subtitle']);
|
$pageSize.find('.item-subtitle').text(_pageSizes[_pageSizesIndex]['subtitle']);
|
||||||
|
|
||||||
// Init page margins
|
|
||||||
me.localSectionProps = me.api.asc_GetSectionProps();
|
|
||||||
|
|
||||||
if (me.localSectionProps) {
|
|
||||||
me.maxMarginsH = me.localSectionProps.get_H() - 26;
|
|
||||||
me.maxMarginsW = me.localSectionProps.get_W() - 127;
|
|
||||||
|
|
||||||
$('#document-margin-top .item-after label').text(mm2Cm(me.localSectionProps.get_TopMargin()) + ' ' + txtCm);
|
|
||||||
$('#document-margin-bottom .item-after label').text(mm2Cm(me.localSectionProps.get_BottomMargin()) + ' ' + txtCm);
|
|
||||||
$('#document-margin-left .item-after label').text(mm2Cm(me.localSectionProps.get_LeftMargin()) + ' ' + txtCm);
|
|
||||||
$('#document-margin-right .item-after label').text(mm2Cm(me.localSectionProps.get_RightMargin()) + ' ' + txtCm);
|
|
||||||
}
|
|
||||||
|
|
||||||
_.each(["top", "left", "bottom", "right"], function(align) {
|
|
||||||
$(Common.Utils.String.format('#document-margin-{0} .button', align)).single('click', _.bind(me.onPageMarginsChange, me, align));
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
initPageInfo: function () {
|
initPageInfo: function () {
|
||||||
|
|
|
||||||
|
|
@ -235,68 +235,16 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-block-title"><%= scope.textMargins %></div>
|
<div class="list-block media-list">
|
||||||
<div class="list-block">
|
|
||||||
<ul>
|
<ul>
|
||||||
<li id="document-margin-top">
|
<li>
|
||||||
<div class="item-content">
|
<a id="margin-settings" class="item-link item-content" data-page="#margins-view">
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title"><%= scope.textTop %></div>
|
<div class="item-title-row">
|
||||||
<div class="item-after splitter">
|
<div class="item-title"><%= scope.textMargins %></div>
|
||||||
<% 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>
|
|
||||||
<li id="document-margin-bottom">
|
|
||||||
<div class="item-content">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title"><%= scope.textBottom %></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>
|
|
||||||
<li id="document-margin-left">
|
|
||||||
<div class="item-content">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title"><%= scope.textLeft %></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>
|
|
||||||
<li id="document-margin-right">
|
|
||||||
<div class="item-content">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title"><%= scope.textRight %></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>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -696,3 +644,83 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Margin settings view -->
|
||||||
|
<div id="margins-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.textMargins %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pages">
|
||||||
|
<div class="page" data-page="margins-view">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li id="document-margin-top">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textTop %></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>
|
||||||
|
<li id="document-margin-bottom">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textBottom %></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>
|
||||||
|
<li id="document-margin-left">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textLeft %></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>
|
||||||
|
<li id="document-margin-right">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textRight %></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>
|
||||||
|
</div>
|
||||||
Loading…
Reference in a new issue