From 8febbda75b0eff224c7e5514805cb669c061e1ae Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Mon, 14 Nov 2016 18:38:59 +0300 Subject: [PATCH] [DE mobile] Flex layout items in dataview. --- apps/documenteditor/mobile/app-dev.js | 5 --- apps/documenteditor/mobile/app.js | 5 --- .../mobile/app/controller/DocumentHolder.js | 14 +++---- .../mobile/app/controller/add/AddShape.js | 9 ++++- .../mobile/app/template/AddShape.template | 6 ++- .../mobile/app/template/AddTable.template | 2 +- .../mobile/app/template/EditChart.template | 6 ++- .../mobile/app/template/EditShape.template | 6 ++- .../mobile/app/template/EditText.template | 12 ++++-- .../mobile/app/view/edit/EditChart.js | 8 +++- .../mobile/app/view/edit/EditText.js | 40 +++++++++++-------- .../mobile/resources/css/app-ios.css | 29 +++++++++----- .../mobile/resources/css/app-material.css | 25 +++++++----- .../mobile/resources/less/app-ios.less | 23 ++++++++--- .../mobile/resources/less/app-material.less | 20 +++++++--- 15 files changed, 133 insertions(+), 77 deletions(-) diff --git a/apps/documenteditor/mobile/app-dev.js b/apps/documenteditor/mobile/app-dev.js index 3b4964c48..e9007d7ab 100644 --- a/apps/documenteditor/mobile/app-dev.js +++ b/apps/documenteditor/mobile/app-dev.js @@ -80,11 +80,6 @@ require.config({ ], exports: 'Backbone' }, - notification: { - deps: [ - 'backbone' - ] - }, core: { deps: [ 'backbone', diff --git a/apps/documenteditor/mobile/app.js b/apps/documenteditor/mobile/app.js index 1e37d2708..fe0c684f2 100644 --- a/apps/documenteditor/mobile/app.js +++ b/apps/documenteditor/mobile/app.js @@ -82,11 +82,6 @@ require.config({ ], exports: 'Backbone' }, - notification: { - deps: [ - 'backbone' - ] - }, core: { deps: [ 'backbone', diff --git a/apps/documenteditor/mobile/app/controller/DocumentHolder.js b/apps/documenteditor/mobile/app/controller/DocumentHolder.js index cdf587ed1..3123bb0e1 100644 --- a/apps/documenteditor/mobile/app/controller/DocumentHolder.js +++ b/apps/documenteditor/mobile/app/controller/DocumentHolder.js @@ -235,19 +235,19 @@ define([ event: 'addlink' }); } - - if (isLink) { - menuItems.push({ - caption: 'Open Link', - event: 'openlink' - }); - } } if (Common.SharedSettings.get('phone') && menuItems.length > 3) { menuItems = menuItems.slice(0, 3); } + if (isLink) { + menuItems.push({ + caption: 'Open Link', + event: 'openlink' + }); + } + return menuItems; } } diff --git a/apps/documenteditor/mobile/app/controller/add/AddShape.js b/apps/documenteditor/mobile/app/controller/add/AddShape.js index ba3adf732..39d7f81f5 100644 --- a/apps/documenteditor/mobile/app/controller/add/AddShape.js +++ b/apps/documenteditor/mobile/app/controller/add/AddShape.js @@ -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) { diff --git a/apps/documenteditor/mobile/app/template/AddShape.template b/apps/documenteditor/mobile/app/template/AddShape.template index f8a244a07..252e4163d 100644 --- a/apps/documenteditor/mobile/app/template/AddShape.template +++ b/apps/documenteditor/mobile/app/template/AddShape.template @@ -1,12 +1,14 @@
-
    - <% _.each(shapes, function(shape) { %> + <% _.each(shapes, function(row) { %> +
      + <% _.each(row, function(shape) { %>
      • <% }); %>
    + <% }); %>
\ No newline at end of file diff --git a/apps/documenteditor/mobile/app/template/AddTable.template b/apps/documenteditor/mobile/app/template/AddTable.template index dbf1c5771..69398316d 100644 --- a/apps/documenteditor/mobile/app/template/AddTable.template +++ b/apps/documenteditor/mobile/app/template/AddTable.template @@ -1,7 +1,7 @@
-
    +
      <% _.each(styles, function(style) { %>
    • diff --git a/apps/documenteditor/mobile/app/template/EditChart.template b/apps/documenteditor/mobile/app/template/EditChart.template index 178332ec5..acaa8caf0 100644 --- a/apps/documenteditor/mobile/app/template/EditChart.template +++ b/apps/documenteditor/mobile/app/template/EditChart.template @@ -307,13 +307,15 @@
      -
        - <% _.each(types, function(type) { %> + <% _.each(types, function(row) { %> +
          + <% _.each(row, function(type) { %>
          • <% }); %>
        + <% }); %>
      diff --git a/apps/documenteditor/mobile/app/template/EditShape.template b/apps/documenteditor/mobile/app/template/EditShape.template index cf9bbde3b..aacee4a09 100644 --- a/apps/documenteditor/mobile/app/template/EditShape.template +++ b/apps/documenteditor/mobile/app/template/EditShape.template @@ -123,13 +123,15 @@
      -
        - <% _.each(shapes, function(shape) { %> + <% _.each(shapes, function(row) { %> +
          + <% _.each(row, function(shape) { %>
          • <% }); %>
        + <% }); %>
      diff --git a/apps/documenteditor/mobile/app/template/EditText.template b/apps/documenteditor/mobile/app/template/EditText.template index ae17a12f6..df738b086 100644 --- a/apps/documenteditor/mobile/app/template/EditText.template +++ b/apps/documenteditor/mobile/app/template/EditText.template @@ -359,8 +359,9 @@
      -
        - <% _.each(bullets, function(bullet) { %> + <% _.each(bullets, function(row) { %> +
          + <% _.each(row, function(bullet) { %>
        • <% if (bullet.thumb.length < 1) { %>
          @@ -370,6 +371,7 @@
          • <% }); %>
        + <% }); %>
      @@ -387,8 +389,9 @@
      -
        - <% _.each(numbers, function(number) { %> + <% _.each(numbers, function(row) { %> +
          + <% _.each(row, function(number) { %>
        • <% if (number.thumb.length < 1) { %>
          @@ -398,6 +401,7 @@
          • <% }); %>
        + <% }); %>
      diff --git a/apps/documenteditor/mobile/app/view/edit/EditChart.js b/apps/documenteditor/mobile/app/view/edit/EditChart.js index 13e52648c..6ecb18cc4 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditChart.js +++ b/apps/documenteditor/mobile/app/view/edit/EditChart.js @@ -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 = $('
      ').append(this.template({ android : Common.SharedSettings.get('android'), phone : Common.SharedSettings.get('phone'), - types : _types + types : groupsOfTypes })); return this; diff --git a/apps/documenteditor/mobile/app/view/edit/EditText.js b/apps/documenteditor/mobile/app/view/edit/EditText.js index 53ee39e97..f9adda93c 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditText.js +++ b/apps/documenteditor/mobile/app/view/edit/EditText.js @@ -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: 4, thumb: 'bullet-04.png'}, - {type: 5, thumb: 'bullet-05.png'}, - {type: 6, thumb: 'bullet-06.png'}, - {type: 7, thumb: 'bullet-07.png'} + [ + {type: -1, thumb: ''}, + {type: 1, thumb: 'bullet-01.png'}, + {type: 2, thumb: 'bullet-02.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: 1, thumb: 'number-04.png'}, - {type: 2, thumb: 'number-05.png'}, - {type: 3, thumb: 'number-06.png'}, - {type: 7, thumb: 'number-07.png'} + [ + {type: -1, thumb: ''}, + {type: 4, thumb: 'number-01.png'}, + {type: 5, thumb: 'number-02.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 { diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index cd82049d7..8675686bb 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -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%; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 1cf63a6a2..f4affec33 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -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%; diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less index 69f2ec2c1..b22647010 100644 --- a/apps/documenteditor/mobile/resources/less/app-ios.less +++ b/apps/documenteditor/mobile/resources/less/app-ios.less @@ -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 { diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index 4bd7c611f..bafaac01f 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -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 {