Added expand and collapse buttons.

This commit is contained in:
Svetlana Rastegina 2021-03-10 12:43:34 +01:00 committed by Georgy Litvinov
parent 05959802f1
commit 784c6c38cd
7 changed files with 69 additions and 12 deletions

View file

@ -2789,18 +2789,52 @@ span.iconControlsNotEditable {
font-family: "Roboto";
font-size: 1.2rem;
border-bottom: 1px solid #8B4513;
padding-top: 5px;
padding-bottom: 5px;
padding-top: 7px;
padding-bottom: 7px;
}
.tocElementName a {
#wrapperTocButtons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
font-size: 1rem;
font-family: "Roboto";
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #8B4513;
color: #000000;
background-color: #ffffff!important;
}
#tocExpandAll:hover {
cursor: pointer;
color: #8B4513;
}
#tocCollapseAll:hover {
cursor: pointer;
color: #8B4513;
}
#tocExpandImageAll {
float: left;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
}
#tocCollapseImageAll {
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
float: right;
}
.tocElementSwitchImage {
padding-right: 10px;
cursor: pointer;
}
.tocElement >div.tocElement {
padding-left: 20px;
background-color: #ffffff;
}
.tocElement >div.tocElement >div.tocElementName {
padding-left: 12px;
padding-left: 14px;
background-image: none;
margin-left: 0px;
}
@ -2812,10 +2846,7 @@ span.iconControlsNotEditable {
font-size: 1rem;
}
.tocElementName {
background-image: url(../images/arrow-down-small.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
padding-left: 5px;
margin-left: 8px;
padding-top: 5px;
padding-bottom: 5px;

View file

@ -0,0 +1,6 @@
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8.21428H20" stroke="#8B4513"/>
<path d="M0 10.3571H20" stroke="#8B4513"/>
<path d="M6.09782 16.2857L9.64279 12.1923L13.1878 16.2857H6.09782Z" fill="#8B4513" stroke="#8B4513"/>
<path d="M6.09782 2.28571L9.64279 6.37909L13.1878 2.28571H6.09782Z" fill="#8B4513" stroke="#8B4513"/>
</svg>

After

Width:  |  Height:  |  Size: 393 B

View file

@ -0,0 +1,6 @@
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7.5H20" stroke="#8B4513"/>
<path d="M0 9.64285H20" stroke="#8B4513"/>
<path d="M6.09782 4.85714L9.64279 0.763763L13.1878 4.85714H6.09782Z" fill="#8B4513" stroke="#8B4513"/>
<path d="M6.09782 12.2857L9.64279 16.3791L13.1878 12.2857H6.09782Z" fill="#8B4513" stroke="#8B4513"/>
</svg>

After

Width:  |  Height:  |  Size: 390 B

View file

@ -0,0 +1,3 @@
<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.09926 1L6.5 7.23624L11.9007 1H1.09926Z" stroke="#8B4513"/>
</svg>

After

Width:  |  Height:  |  Size: 172 B

View file

@ -0,0 +1,3 @@
<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.09926 7L6.5 0.763763L11.9007 7H1.09926Z" stroke="#8B4513"/>
</svg>

After

Width:  |  Height:  |  Size: 173 B

View file

@ -73,7 +73,7 @@
}
$.extend(this, urlsBase);
var imgElement = nameContainer.firstElementChild;
imgElement.src = urlsBase + "/themes/iph/images/save.svg";
imgElement.src = urlsBase + "/themes/iph/images/arrow-top-small.svg";
}
@ -86,7 +86,7 @@
}
$.extend(this, urlsBase);
var imgElement = nameContainer.firstElementChild;
imgElement.src = urlsBase + "/themes/iph/images/print.svg";
imgElement.src = urlsBase + "/themes/iph/images/arrow-down-small.svg";
}

View file

@ -5,8 +5,16 @@
<button id="exportPdf"><img src="${urls.base}/themes/iph/images/exportPdf.svg"></button>
</div>
<#include "customsearchpanel.ftl" >
<div id="tocPlaceHolder">
<div id="tocPlaceHolder" style="display:none;">
<div id="tocName">Содержание</div>
<div id="wrapperTocButtons">
<div id="tocExpandAll" onclick="javascript:expandAllTOCElements('tocPlaceHolder');">Раскрыть
<img id="tocExpandImageAll" onclick="javascript:expandAllTOCElements('tocPlaceHolder');" src="${urls.base}/themes/iph/images/all-toc-expand.svg"/>
</div>
<div id="tocCollapseAll" onclick="javascript:collapseAllTOCElements('tocPlaceHolder');">Свернуть
<img id="tocCollapseImageAll" onclick="javascript:collapseAllTOCElements('tocPlaceHolder');" src="${urls.base}/themes/iph/images/all-toc-collapse.svg"/>
</div>
</div>
</div>
</div>