pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 06:51:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2880 from ONLYOFFICE/feature/spreadsheet-embed-bottom-bar

Browse Source 
[SE] Update styles of embed worksheet list
This commit is contained in:
Julia Radzhabova
2024-03-18 13:50:57 +03:00
committed by GitHub
parent 56fc6f02fa 3aa0f9f391
commit f5de71bc23
2 changed files with 138 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/spreadsheeteditor/embed/js/ApplicationController.js
View File

@ -195,11 +195,37 @@ SSE.ApplicationController = new(function(){
$box.find('li').off();
$box.empty();
var tpl = '<li id="worksheet{index}">{title}</li>';
var tpl = '<li id="worksheet{index}" tabtitle="{tabtitle}" {style}>{title}</li>';
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,'&nbsp;'));
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 {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
}[match];
});
var item = tpl
.replace(/\{index}/, i)
.replace(/\{tabtitle}/, name)
.replace(/\{title}/, name)
.replace(/\{style}/, styleAttr);
$(item).appendTo($box).on('click', handleWorksheet);
}

151
apps/spreadsheeteditor/embed/resources/less/application.less
View File

@ -4,53 +4,122 @@
// Worksheets
// -------------------------
.viewer {
display: flex;
flex-direction: column;
.sdk-view {
position: relative;
flex-grow: 1;
}
ul.worksheet-list {
background-color: #F7F7F7;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
white-space: nowrap;
box-shadow: inset 0 1px 0 #cacaca;
overflow-x: auto;
overflow-y: hidden;
.sdk-view {
position: relative;
flex-grow: 1;
@media screen and (min--moz-device-pixel-ratio:0) {
scrollbar-color: #e8e8e8 #eeeeee;
scrollbar-width: thin;
}
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;
&::-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'><line y1='2.5' x1='0' y2='2.5' x2='13' stroke-width = '5' stroke-dasharray ='1px' /%3E%3C/svg%3E");
&:hover {
background-color: #c0c0c0;
}
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;
&:active {
background-color: #adadad;
}
border-bottom: 1px solid #929292;
border-top-color: transparent;
&.active {
margin-top: -1px;
padding: 0 12px;
border: 1px solid #929292;
border-top-color: transparent;
background: #DDDDDD;
color: #000;
box-shadow: none;
}
}
&:active, &:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' stroke ='rgb(247,247,247)' height='5px'><line y1='2.5' x1='0' y2='2.5' x2='13' stroke-width = '5' stroke-dasharray ='1px' /%3E%3C/svg%3E");
}
}
&::-webkit-scrollbar-track {
margin: 0 1px;
}
&::-webkit-scrollbar {
height: 14px;
border-top: #c0c0c0 1px solid;
background-color: #eeeeee;
}
&::-webkit-scrollbar-button:single-button {
height: 14px;
width: 16px;
border: #c0c0c0 1px solid;
background-color: #f0f0f0;
background-position: center;
background-repeat: no-repeat;
&:hover {
background-color: #c0c0c0;
}
&:active {
background-color: #adadad;
}
&:horizontal:increment {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,0 0,7 4,3.5'/></svg>");
}
&:horizontal:increment:hover, &:horizontal:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,0 0,7 4,3.5'/></svg>");
}
&:horizontal:decrement {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,3.5 4,7 4,0'/></svg>");
}
&:horizontal:decrement:hover, &:horizontal:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,3.5 4,7 4,0'/></svg>");
}
}
li {
display: inline-block;
border-radius: 0;
padding: 0 10px 0;
line-height: 24px;
margin-right: -1px;
margin-left: 0;
border-right: 1px solid #cacaca;
border-left: 1px solid #cacaca;
color: rgba(0, 0, 0, 0.8);
font-size: 11px;
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;
color: transparent;
}
}
}
}