Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Flex layout items in dataview.

Browse source
This commit is contained in:
Alexander Yuzhin 2016-11-14 18:38:59 +03:00
parent 0e18a30fd2
commit 8febbda75b
15 changed files with 133 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/documenteditor/mobile/app-dev.js
View file

@ -80,11 +80,6 @@ require.config({
],
exports: 'Backbone'
},
notification: {
deps: [
'backbone'
]
},
core: {
deps: [
'backbone',

5
apps/documenteditor/mobile/app.js
View file

@ -82,11 +82,6 @@ require.config({
],
exports: 'Backbone'
},
notification: {
deps: [
'backbone'
]
},
core: {
deps: [
'backbone',

10
apps/documenteditor/mobile/app/controller/DocumentHolder.js
View file

@ -235,6 +235,11 @@ define([
event: 'addlink'
});
}
}
if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
menuItems = menuItems.slice(0, 3);
}
if (isLink) {
menuItems.push({
@ -242,11 +247,6 @@ define([
event: 'openlink'
});
}
}
if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
menuItems = menuItems.slice(0, 3);
}
return menuItems;
}

9
apps/documenteditor/mobile/app/controller/add/AddShape.js
View file

@ -188,8 +188,13 @@ define([
}
];
Common.SharedSettings.set('shapes', _styles);
Common.NotificationCenter.trigger('shapes:load', _styles);
var elementsInRow = 4;
var groups = _.chain(_styles).groupBy(function(element, index){
return Math.floor(index/elementsInRow);
}).toArray().value();
Common.SharedSettings.set('shapes', groups);
Common.NotificationCenter.trigger('shapes:load', groups);
},
setApi: function (api) {

6
apps/documenteditor/mobile/app/template/AddShape.template
View file

@ -1,12 +1,14 @@
<!-- Root view -->
<div id="add-shapes-root">
<div class="page-content dataview shapes">
<ul>
<% _.each(shapes, function(shape) { %>
<% _.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>

2
apps/documenteditor/mobile/app/template/AddTable.template
View file

@ -1,7 +1,7 @@
<!-- Root view -->
<div id="add-table-root">
<div class="page-content dataview table-styles">
<ul>
<ul class="row">
<% _.each(styles, function(style) { %>
<li data-type="<%= style.templateId %>">
<img src="<%= style.imageUrl %>">

6
apps/documenteditor/mobile/app/template/EditChart.template
View file

@ -307,13 +307,15 @@
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab-chart-type" class="page-content tab active dataview chart-types">
<ul>
<% _.each(types, function(type) { %>
<% _.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">

6
apps/documenteditor/mobile/app/template/EditShape.template
View file

@ -123,13 +123,15 @@
</div>
<div class="page shape-replace">
<div class="page-content dataview shapes">
<ul>
<% _.each(shapes, function(shape) { %>
<% _.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>

12
apps/documenteditor/mobile/app/template/EditText.template
View file

@ -359,8 +359,9 @@
<div class="page" id="page-text-bullets">
<div class="page-content dataview bullets">
<div class="list-block">
<ul>
<% _.each(bullets, function(bullet) { %>
<% _.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>
@ -370,6 +371,7 @@
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>
@ -387,8 +389,9 @@
<div class="page" id="page-text-numbers">
<div class="page-content dataview numbers">
<div class="list-block">
<ul>
<% _.each(numbers, function(number) { %>
<% _.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>
@ -398,6 +401,7 @@
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>

8
apps/documenteditor/mobile/app/view/edit/EditChart.js
View file

@ -80,6 +80,7 @@ define([
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'chart-23.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'}
];
return {
// el: '.view-main',
@ -119,10 +120,15 @@ define([
// Render layout
render: function () {
var elementsInRow = 3;
var groupsOfTypes = _.chain(_types).groupBy(function(element, index){
return Math.floor(index/elementsInRow);
}).toArray().value();
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
types : _types
types : groupsOfTypes
}));
return this;

12
apps/documenteditor/mobile/app/view/edit/EditText.js
View file

@ -55,25 +55,33 @@ define([
_editTextController;
var _bullets = [
[
{type: -1, thumb: ''},
{type: 1, thumb: 'bullet-01.png'},
{type: 2, thumb: 'bullet-02.png'},
{type: 3, thumb: 'bullet-03.png'},
{type: 3, thumb: 'bullet-03.png'}
],
[
{type: 4, thumb: 'bullet-04.png'},
{type: 5, thumb: 'bullet-05.png'},
{type: 6, thumb: 'bullet-06.png'},
{type: 7, thumb: 'bullet-07.png'}
]
];
var _numbers = [
[
{type: -1, thumb: ''},
{type: 4, thumb: 'number-01.png'},
{type: 5, thumb: 'number-02.png'},
{type: 6, thumb: 'number-03.png'},
{type: 6, thumb: 'number-03.png'}
],
[
{type: 1, thumb: 'number-04.png'},
{type: 2, thumb: 'number-05.png'},
{type: 3, thumb: 'number-06.png'},
{type: 7, thumb: 'number-07.png'}
]
];
return {

29
apps/documenteditor/mobile/resources/css/app-ios.css
View file

@ -5867,6 +5867,14 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
.phone.ios .container-edit .page-content .list-block:first-child {
margin-top: -1px;
}
.container-edit.popup,
.container-add.popup,
.container-settings.popup,
.container-edit.popover,
.container-add.popover,
.container-settings.popover {
width: 360px;
}
.container-edit.popup .list-block ul,
.container-add.popup .list-block ul,
.container-settings.popup .list-block ul,
@ -5942,6 +5950,11 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
.container-settings .categories > .buttons-row {
width: 100%;
}
.container-edit .categories > .buttons-row .button,
.container-add .categories > .buttons-row .button,
.container-settings .categories > .buttons-row .button {
padding: 0 1px;
}
.container-edit .popover-inner,
.container-add .popover-inner,
.container-settings .popover-inner {
@ -6052,6 +6065,9 @@ html.pixel-ratio-3 .item-content i .color-preview {
.dataview.page-content {
background: #ffffff;
}
.dataview .row {
justify-content: space-around;
}
.dataview ul {
padding: 0 10px;
list-style: none;
@ -6071,6 +6087,10 @@ html.pixel-ratio-3 .item-content i .color-preview {
right: 0;
bottom: 0;
}
.table-styles .row,
.table-styles .row li {
margin-bottom: 12px;
}
.table-styles li {
margin: 0;
padding: 1px;
@ -6118,15 +6138,6 @@ html.pixel-ratio-3 .bullets li,
html.pixel-ratio-3 .numbers li {
border: 0.33px solid #c4c4c4;
}
.bullets li.active,
.numbers li.active {
border: none;
filter: invert();
}
.bullets li.active .thumb,
.numbers li.active .thumb {
background-color: #d7b140;
}
.bullets li .thumb,
.numbers li .thumb {
width: 100%;

25
apps/documenteditor/mobile/resources/css/app-material.css
View file

@ -5631,6 +5631,14 @@ a.item-link,
.phone.android .container-edit .page-content .list-block:first-child {
margin-top: -1px;
}
.container-edit.popup,
.container-add.popup,
.container-settings.popup,
.container-edit.popover,
.container-add.popover,
.container-settings.popover {
width: 360px;
}
.container-edit.popup .list-block ul,
.container-add.popup .list-block ul,
.container-settings.popup .list-block ul,
@ -5789,9 +5797,13 @@ a.item-link,
#add-shape .page {
background-color: #fff;
}
.dataview .row {
justify-content: space-around;
}
.dataview ul {
padding: 0 10px;
list-style: none;
justify-content: space-around;
}
.dataview ul li {
display: inline-block;
@ -5808,6 +5820,10 @@ a.item-link,
right: 0;
bottom: 0;
}
.table-styles .row,
.table-styles .row li {
margin-bottom: 12px;
}
.table-styles li {
margin: 0;
padding: 1px;
@ -5855,15 +5871,6 @@ html.pixel-ratio-3 .bullets li,
html.pixel-ratio-3 .numbers li {
border: 0.33px solid #c4c4c4;
}
.bullets li.active,
.numbers li.active {
border: none;
filter: invert();
}
.bullets li.active .thumb,
.numbers li.active .thumb {
background-color: #c9a65a;
}
.bullets li .thumb,
.numbers li .thumb {
width: 100%;

23
apps/documenteditor/mobile/resources/less/app-ios.less
View file

@ -81,6 +81,8 @@
.container-settings {
&.popup,
&.popover {
width: 360px;
.list-block {
ul {
@ -123,6 +125,10 @@
> .buttons-row {
width: 100%;
.button {
padding: 0 1px;
}
}
}
.popover-inner {
@ -278,6 +284,10 @@
background: @white;
}
.row {
justify-content: space-around;
}
ul {
padding: 0 10px;
list-style: none;
@ -305,6 +315,12 @@
// Table styles
.table-styles {
.row {
&, li {
margin-bottom: 12px;
}
}
li {
margin: 0;
padding: 1px;
@ -369,12 +385,7 @@
}
&.active {
border: none;
filter: invert();
.thumb {
background-color:spin(@themeColor, 180);//lighten(@themeColor, 20%);
}
//
}
.thumb {

20
apps/documenteditor/mobile/resources/less/app-material.less
View file

@ -62,6 +62,8 @@
.container-settings {
&.popup,
&.popover {
width: 360px;
.list-block {
ul {
@ -238,9 +240,14 @@
// Data view
.dataview {
.row {
justify-content: space-around;
}
ul {
padding: 0 10px;
list-style: none;
justify-content: space-around;
li {
display: inline-block;
@ -264,6 +271,12 @@
// Table styles
.table-styles {
.row {
&, li {
margin-bottom: 12px;
}
}
li {
margin: 0;
padding: 1px;
@ -328,12 +341,7 @@
}
&.active {
border: none;
filter: invert();
.thumb {
background-color:spin(@themeColor, 180);//lighten(@themeColor, 20%);
}
//
}
.thumb {