From 5ac746da4c162f3fba440dfcadd823e2546d9ce0 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Mon, 11 Mar 2024 14:44:28 +0500 Subject: [PATCH 1/6] [SE] Update styles of embed worksheet list --- .../embed/resources/less/application.less | 80 +++++++++---------- 1 file changed, 37 insertions(+), 43 deletions(-) diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index b3fa8b561c..555f2e4c63 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -4,53 +4,47 @@ // Worksheets // ------------------------- .viewer { - display: flex; - flex-direction: column; - - .sdk-view { - position: relative; - flex-grow: 1; - } + display: flex; + flex-direction: column; - ul.worksheet-list { - flex-grow: 0; - flex-shrink: 0; - margin: 0; - padding: 0 9px; - border-top: 1px solid #5A5A5A; - border-bottom: 1px solid #BABABA; - #gradient > .vertical(#B6B6B6, #CACACA); - box-shadow: 0 4px 4px -4px #333 inset; + .sdk-view { + position: relative; + flex-grow: 1; + } + ul.worksheet-list { + margin: 0; + background-color: #F7F7F7; + display: flex; + padding: 0 0 0 24px; + white-space: nowrap; + box-shadow: inset 0 1px 0 #cacaca; + overflow: scroll; + -ms-overflow-style: none; + scrollbar-width: none; - li { - float: left; - cursor: pointer; - list-style: none; - margin: 0 2px 2px 3px; - padding: 0 13px; - color: #FFFFFF; - #gradient > .vertical(#9A9A9A, #828282); - box-shadow: 0 4px 4px -4px #333 inset; - -webkit-border-bottom-right-radius: 4px; -// -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 4px; -// -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; + &::-webkit-scrollbar { + display: none; + } - border-bottom: 1px solid #929292; - border-top-color: transparent; + li { + display: inline-block; + border-radius: 0; + padding: 4px 10px 0; + line-height: 24px; + margin-right: -1px; + margin-left: 0; + border-top: 1px solid #cacaca; + border-right: 1px solid #cacaca; + border-left: 1px solid #cacaca; + color: rgba(0, 0, 0, 0.8); - &.active { - margin-top: -1px; - padding: 0 12px; - border: 1px solid #929292; - border-top-color: transparent; - background: #DDDDDD; - color: #000; - box-shadow: none; - } - } + &.active { + box-shadow: inset 0 4px 0 #49795d; + background-color: #DDDDDD; + color: #000; + font-weight: bold; + } } + } } \ No newline at end of file From 01e41577109e007ed60312247286ee2fd441196b Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Mon, 11 Mar 2024 19:20:35 +0500 Subject: [PATCH 2/6] [SE] Fix styles and escape HTML in title, show scroll --- .../embed/js/ApplicationController.js | 29 +++++++++++++++++-- .../embed/resources/less/application.less | 11 ++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/apps/spreadsheeteditor/embed/js/ApplicationController.js b/apps/spreadsheeteditor/embed/js/ApplicationController.js index 8fa6ad95c1..8f4cc3d5ee 100644 --- a/apps/spreadsheeteditor/embed/js/ApplicationController.js +++ b/apps/spreadsheeteditor/embed/js/ApplicationController.js @@ -195,11 +195,36 @@ SSE.ApplicationController = new(function(){ $box.find('li').off(); $box.empty(); - var tpl = '
  • {title}
    • '; + var tpl = '
  • {title}
    • '; for (var i = 0; i < maxPages; i++) { if (api.asc_isWorksheetHidden(i)) continue; - var item = tpl.replace(/\{index}/, i).replace(/\{title}/,api.asc_getWorksheetName(i).replace(/\s/g,' ')); + var styleAttr = ""; + var color = api.asc_getWorksheetTabColor(i); + if (color) { + styleAttr = 'style="box-shadow: inset 0 4px 0 rgba({r}, {g}, {b}, {a})"' + .replace(/\{r}/, color.r) + .replace(/\{g}/, color.g) + .replace(/\{b}/, color.b) + .replace(/\{a}/, color.a); + } + + // escape html + var name = api.asc_getWorksheetName(i).replace(/[&<>"']/g, function (match) { + return { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }[match]; + }); + + var item = tpl + .replace(/\{index}/, i) + .replace(/\{title}/, name) + .replace(/\{style}/, styleAttr); + $(item).appendTo($box).on('click', handleWorksheet); } diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index 555f2e4c63..8f04e7982b 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -20,17 +20,11 @@ white-space: nowrap; box-shadow: inset 0 1px 0 #cacaca; overflow: scroll; - -ms-overflow-style: none; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } li { display: inline-block; border-radius: 0; - padding: 4px 10px 0; + padding: 0 10px 0; line-height: 24px; margin-right: -1px; margin-left: 0; @@ -38,12 +32,13 @@ border-right: 1px solid #cacaca; border-left: 1px solid #cacaca; color: rgba(0, 0, 0, 0.8); + font-size: 11px; + font-weight: bold; &.active { box-shadow: inset 0 4px 0 #49795d; background-color: #DDDDDD; color: #000; - font-weight: bold; } } } From b69b5caa94d574cdfb526e6d53cb47456b8c4589 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Mon, 11 Mar 2024 23:07:10 +0500 Subject: [PATCH 3/6] [SE] Fix the size jumping of active and inactive button --- .../embed/js/ApplicationController.js | 3 ++- .../embed/resources/less/application.less | 12 +++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/embed/js/ApplicationController.js b/apps/spreadsheeteditor/embed/js/ApplicationController.js index 8f4cc3d5ee..5f6920b1de 100644 --- a/apps/spreadsheeteditor/embed/js/ApplicationController.js +++ b/apps/spreadsheeteditor/embed/js/ApplicationController.js @@ -195,7 +195,7 @@ SSE.ApplicationController = new(function(){ $box.find('li').off(); $box.empty(); - var tpl = '
  • {title}
    • '; + var tpl = '
  • {title}
    • '; for (var i = 0; i < maxPages; i++) { if (api.asc_isWorksheetHidden(i)) continue; @@ -222,6 +222,7 @@ SSE.ApplicationController = new(function(){ var item = tpl .replace(/\{index}/, i) + .replace(/\{tabtitle}/, name) .replace(/\{title}/, name) .replace(/\{style}/, styleAttr); diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index 8f04e7982b..c654166197 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -33,12 +33,22 @@ border-left: 1px solid #cacaca; color: rgba(0, 0, 0, 0.8); font-size: 11px; - font-weight: bold; + cursor: pointer; + letter-spacing: 0.01em; + text-align: center; &.active { box-shadow: inset 0 4px 0 #49795d; background-color: #DDDDDD; color: #000; + font-weight: bold; + } + + &::after { + content: attr(tabtitle); + font-weight: bold; + display: block; + height: 0; } } } From 740836159ff2e6f367b10e827b038fbb088890d8 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Mon, 11 Mar 2024 23:32:24 +0500 Subject: [PATCH 4/6] [SE] Multi-row sheet selection buttons --- apps/spreadsheeteditor/embed/resources/less/application.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index c654166197..da2fd5c484 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -19,7 +19,7 @@ padding: 0 0 0 24px; white-space: nowrap; box-shadow: inset 0 1px 0 #cacaca; - overflow: scroll; + flex-wrap: wrap; li { display: inline-block; @@ -28,7 +28,7 @@ line-height: 24px; margin-right: -1px; margin-left: 0; - border-top: 1px solid #cacaca; + border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; border-left: 1px solid #cacaca; color: rgba(0, 0, 0, 0.8); @@ -49,6 +49,7 @@ font-weight: bold; display: block; height: 0; + color: transparent; } } } From 4cfda5a3df0302e2270256dea204549a16a44d94 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Fri, 15 Mar 2024 18:14:37 +0500 Subject: [PATCH 5/6] Custom scrollbar --- .../embed/resources/less/application.less | 77 ++++++++++++++++++- 1 file changed, 73 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index da2fd5c484..c2f1a6adee 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -13,13 +13,83 @@ } ul.worksheet-list { - margin: 0; background-color: #F7F7F7; display: flex; - padding: 0 0 0 24px; + padding: 0; + margin: 0; white-space: nowrap; box-shadow: inset 0 1px 0 #cacaca; - flex-wrap: wrap; + overflow-x: auto; + overflow-y: hidden; + + @media screen and (min--moz-device-pixel-ratio:0) { + scrollbar-color: #e8e8e8 #eeeeee; + scrollbar-width: thin; + } + + &::-webkit-scrollbar-thumb { + height: 14px; + border: #c0c0c0 1px solid; + background-color: #e8e8e8; + background-position: center; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' stroke ='rgb(173,173,173)' height='5px'>"); + } + + &:horizontal:increment:hover, &:horizontal:increment:active { + background-image: url("data:image/svg+xml;utf8,"); + } + + &:horizontal:decrement { + background-image: url("data:image/svg+xml;utf8,"); + } + + &:horizontal:decrement:hover, &:horizontal:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); + } + } li { display: inline-block; @@ -28,7 +98,6 @@ line-height: 24px; margin-right: -1px; margin-left: 0; - border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; border-left: 1px solid #cacaca; color: rgba(0, 0, 0, 0.8); From 3aa0f9f391ae4f9878864e70da0b2e071f080fc1 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Fri, 15 Mar 2024 22:09:19 +0500 Subject: [PATCH 6/6] [SE] Scroll bar height decrease --- apps/spreadsheeteditor/embed/resources/less/application.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index c2f1a6adee..a688e21c97 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -53,7 +53,7 @@ } &::-webkit-scrollbar { - height: 16px; + height: 14px; border-top: #c0c0c0 1px solid; background-color: #eeeeee; }