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' exports: 'Backbone'
}, },
notification: {
deps: [
'backbone'
]
},
core: { core: {
deps: [ deps: [
'backbone', 'backbone',

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

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

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

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

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

@ -188,8 +188,13 @@ define([
} }
]; ];
Common.SharedSettings.set('shapes', _styles); var elementsInRow = 4;
Common.NotificationCenter.trigger('shapes:load', _styles); 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) { setApi: function (api) {

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

@ -1,12 +1,14 @@
<!-- Root view --> <!-- Root view -->
<div id="add-shapes-root"> <div id="add-shapes-root">
<div class="page-content dataview shapes"> <div class="page-content dataview shapes">
<ul> <% _.each(shapes, function(row) { %>
<% _.each(shapes, function(shape) { %> <ul class="row">
<% _.each(row, function(shape) { %>
<li data-type="<%= shape.type %>"> <li data-type="<%= shape.type %>">
<div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div> <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
<% }); %>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
<!-- Root view --> <!-- Root view -->
<div id="add-table-root"> <div id="add-table-root">
<div class="page-content dataview table-styles"> <div class="page-content dataview table-styles">
<ul> <ul class="row">
<% _.each(styles, function(style) { %> <% _.each(styles, function(style) { %>
<li data-type="<%= style.templateId %>"> <li data-type="<%= style.templateId %>">
<img src="<%= style.imageUrl %>"> <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-animated-wrap">
<div class="tabs"> <div class="tabs">
<div id="tab-chart-type" class="page-content tab active dataview chart-types"> <div id="tab-chart-type" class="page-content tab active dataview chart-types">
<ul> <% _.each(types, function(row) { %>
<% _.each(types, function(type) { %> <ul class="row">
<% _.each(row, function(type) { %>
<li data-type="<%= type.type %>"> <li data-type="<%= type.type %>">
<div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div> <div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
<% }); %>
</div> </div>
<div id="tab-chart-style" class="page-content tab"> <div id="tab-chart-style" class="page-content tab">
<div class="list-block"> <div class="list-block">

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

@ -123,13 +123,15 @@
</div> </div>
<div class="page shape-replace"> <div class="page shape-replace">
<div class="page-content dataview shapes"> <div class="page-content dataview shapes">
<ul> <% _.each(shapes, function(row) { %>
<% _.each(shapes, function(shape) { %> <ul class="row">
<% _.each(row, function(shape) { %>
<li data-type="<%= shape.type %>"> <li data-type="<%= shape.type %>">
<div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div> <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
<% }); %>
</div> </div>
</div> </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" id="page-text-bullets">
<div class="page-content dataview bullets"> <div class="page-content dataview bullets">
<div class="list-block"> <div class="list-block">
<ul> <% _.each(bullets, function(row) { %>
<% _.each(bullets, function(bullet) { %> <ul class="row">
<% _.each(row, function(bullet) { %>
<li data-type="<%= bullet.type %>"> <li data-type="<%= bullet.type %>">
<% if (bullet.thumb.length < 1) { %> <% if (bullet.thumb.length < 1) { %>
<div class="thumb"><label>None</label></div> <div class="thumb"><label>None</label></div>
@ -370,6 +371,7 @@
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
<% }); %>
</div> </div>
</div> </div>
</div> </div>
@ -387,8 +389,9 @@
<div class="page" id="page-text-numbers"> <div class="page" id="page-text-numbers">
<div class="page-content dataview numbers"> <div class="page-content dataview numbers">
<div class="list-block"> <div class="list-block">
<ul> <% _.each(numbers, function(row) { %>
<% _.each(numbers, function(number) { %> <ul class="row">
<% _.each(row, function(number) { %>
<li data-type="<%= number.type %>"> <li data-type="<%= number.type %>">
<% if (number.thumb.length < 1) { %> <% if (number.thumb.length < 1) { %>
<div class="thumb"><label>None</label></div> <div class="thumb"><label>None</label></div>
@ -398,6 +401,7 @@
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
<% }); %>
</div> </div>
</div> </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.hBarStackedPer3d, thumb: 'chart-23.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'} { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'}
]; ];
return { return {
// el: '.view-main', // el: '.view-main',
@ -119,10 +120,15 @@ define([
// Render layout // Render layout
render: function () { 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({ this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'), android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'), phone : Common.SharedSettings.get('phone'),
types : _types types : groupsOfTypes
})); }));
return this; return this;

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

@ -55,25 +55,33 @@ define([
_editTextController; _editTextController;
var _bullets = [ var _bullets = [
{type: -1, thumb: ''}, [
{type: 1, thumb: 'bullet-01.png'}, {type: -1, thumb: ''},
{type: 2, thumb: 'bullet-02.png'}, {type: 1, thumb: 'bullet-01.png'},
{type: 3, thumb: 'bullet-03.png'}, {type: 2, thumb: 'bullet-02.png'},
{type: 4, thumb: 'bullet-04.png'}, {type: 3, thumb: 'bullet-03.png'}
{type: 5, thumb: 'bullet-05.png'}, ],
{type: 6, thumb: 'bullet-06.png'}, [
{type: 7, thumb: 'bullet-07.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 = [ var _numbers = [
{type: -1, thumb: ''}, [
{type: 4, thumb: 'number-01.png'}, {type: -1, thumb: ''},
{type: 5, thumb: 'number-02.png'}, {type: 4, thumb: 'number-01.png'},
{type: 6, thumb: 'number-03.png'}, {type: 5, thumb: 'number-02.png'},
{type: 1, thumb: 'number-04.png'}, {type: 6, thumb: 'number-03.png'}
{type: 2, thumb: 'number-05.png'}, ],
{type: 3, thumb: 'number-06.png'}, [
{type: 7, thumb: 'number-07.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 { 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 { .phone.ios .container-edit .page-content .list-block:first-child {
margin-top: -1px; 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-edit.popup .list-block ul,
.container-add.popup .list-block ul, .container-add.popup .list-block ul,
.container-settings.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 { .container-settings .categories > .buttons-row {
width: 100%; 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-edit .popover-inner,
.container-add .popover-inner, .container-add .popover-inner,
.container-settings .popover-inner { .container-settings .popover-inner {
@ -6052,6 +6065,9 @@ html.pixel-ratio-3 .item-content i .color-preview {
.dataview.page-content { .dataview.page-content {
background: #ffffff; background: #ffffff;
} }
.dataview .row {
justify-content: space-around;
}
.dataview ul { .dataview ul {
padding: 0 10px; padding: 0 10px;
list-style: none; list-style: none;
@ -6071,6 +6087,10 @@ html.pixel-ratio-3 .item-content i .color-preview {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.table-styles .row,
.table-styles .row li {
margin-bottom: 12px;
}
.table-styles li { .table-styles li {
margin: 0; margin: 0;
padding: 1px; padding: 1px;
@ -6118,15 +6138,6 @@ html.pixel-ratio-3 .bullets li,
html.pixel-ratio-3 .numbers li { html.pixel-ratio-3 .numbers li {
border: 0.33px solid #c4c4c4; 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, .bullets li .thumb,
.numbers li .thumb { .numbers li .thumb {
width: 100%; 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 { .phone.android .container-edit .page-content .list-block:first-child {
margin-top: -1px; 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-edit.popup .list-block ul,
.container-add.popup .list-block ul, .container-add.popup .list-block ul,
.container-settings.popup .list-block ul, .container-settings.popup .list-block ul,
@ -5789,9 +5797,13 @@ a.item-link,
#add-shape .page { #add-shape .page {
background-color: #fff; background-color: #fff;
} }
.dataview .row {
justify-content: space-around;
}
.dataview ul { .dataview ul {
padding: 0 10px; padding: 0 10px;
list-style: none; list-style: none;
justify-content: space-around;
} }
.dataview ul li { .dataview ul li {
display: inline-block; display: inline-block;
@ -5808,6 +5820,10 @@ a.item-link,
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.table-styles .row,
.table-styles .row li {
margin-bottom: 12px;
}
.table-styles li { .table-styles li {
margin: 0; margin: 0;
padding: 1px; padding: 1px;
@ -5855,15 +5871,6 @@ html.pixel-ratio-3 .bullets li,
html.pixel-ratio-3 .numbers li { html.pixel-ratio-3 .numbers li {
border: 0.33px solid #c4c4c4; 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, .bullets li .thumb,
.numbers li .thumb { .numbers li .thumb {
width: 100%; width: 100%;

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

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

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

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