chore: refactore panel header/toolbox
This commit is contained in:
Yohan Boniface
parent
8524cc785f
commit
87f611d0b5
10 changed files with 48 additions and 63 deletions
|
|
@ -683,7 +683,6 @@ input[type=hidden].blur + [type="button"] {
|
|||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 10px;
|
||||
border-left: 1px solid var(--color-lightGray);
|
||||
overflow-x: auto;
|
||||
z-index: 1010;
|
||||
|
|
@ -729,7 +728,8 @@ input[type=hidden].blur + [type="button"] {
|
|||
}
|
||||
#umap-panel .body {
|
||||
clear: both;
|
||||
height: calc(100% - 54px); /* Minus size of toolbox */
|
||||
height: calc(100% - 32px); /* Minus size of toolbox */
|
||||
padding: 10px;
|
||||
}
|
||||
#umap-panel .toolbox {
|
||||
padding: 5px 10px;
|
||||
|
|
@ -739,27 +739,30 @@ input[type=hidden].blur + [type="button"] {
|
|||
font-size: 10px;
|
||||
justify-content: flex-start;
|
||||
gap: 5px;
|
||||
background-color: var(--color-lightGray);
|
||||
border-bottom: 1px solid #bbb;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
#umap-panel.dark .toolbox {
|
||||
background-color: var(--color-darkGray);
|
||||
border-bottom: 1px solid #232729;
|
||||
}
|
||||
#umap-panel .toolbox li {
|
||||
color: #2e3436;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
display: inline;
|
||||
padding: 0 7px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid #b6b6b3;
|
||||
border-radius: 2px;
|
||||
}
|
||||
#umap-panel.dark .toolbox
|
||||
#umap-panel.dark .toolbox li {
|
||||
color: #d3dfeb;
|
||||
border: 1px solid #202425;
|
||||
}
|
||||
#umap-panel .toolbox li:hover {
|
||||
color: #2e3436;
|
||||
background-color: #d4d4d2;
|
||||
}
|
||||
#umap-panel.dark .toolbox li:hover {
|
||||
color: #eeeeec;
|
||||
background-color: #353c3e;
|
||||
}
|
||||
.dark input, .dark textarea {
|
||||
|
|
@ -896,28 +899,19 @@ input:invalid {
|
|||
.umap-close-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./img/16.svg');
|
||||
background-position: -28px -6px;
|
||||
background-position: -26px -6px;
|
||||
display: inline;
|
||||
padding: 0 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 24px;
|
||||
}
|
||||
.umap-resize-icon {
|
||||
background-position: -76px -150px;
|
||||
background-position: -74px -150px;
|
||||
}
|
||||
.dark .umap-resize-icon,
|
||||
.dark .umap-close-icon {
|
||||
background-image: url('./img/16-white.svg');
|
||||
}
|
||||
.dark .umap-close-link {
|
||||
border: 1px solid #202425;
|
||||
color: #eeeeec;
|
||||
padding: 0 7px;
|
||||
line-height: 32px;
|
||||
background-color: var(--color-darkGray);
|
||||
}
|
||||
.dark .umap-close-link:hover {
|
||||
background-color: #2e3436;
|
||||
}
|
||||
#umap-alert-container .umap-close-link {
|
||||
color: #fff;
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -186,7 +186,9 @@
|
|||
</g>
|
||||
<path id="path1286" d="m24.352 6.3088h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068002s0.068 0.1026 0.068 0.16417v4.2439c0 0.061569-0.02445 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024447-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.043541 0.1026-0.068002 0.16417-0.068002z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
|
||||
</g>
|
||||
<path id="path3-5" d="m80 967.11v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
||||
<path id="path4-3" d="m82.75 964.36v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
||||
<g id="g3" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25">
|
||||
<path id="path3-5" d="m88 967.36v5h-5v-1.579h3.4211v-3.421z" color="#000000"/>
|
||||
<path id="path4-3" d="m85 964.36v1.579h-3.4211v3.421h-1.5789v-5z" color="#000000"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
|
@ -178,7 +178,8 @@
|
|||
<path id="path16669" d="m36 963.88v8.3163" fill="none" marker-end="url(#Arrow1)" stroke="#464646" stroke-width="1.5"/>
|
||||
</g>
|
||||
<path id="copy" d="m58.25 962.61v3.5h4v4h3.5v-7.5zm-4 4v7.5h7.5v-7.5z" fill="#4d4d4d" style="paint-order:fill markers stroke"/>
|
||||
<path id="path3" d="m80.25 967.36v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
<path id="path4" d="m83 964.61v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
<path id="path3" d="m88 967.36v5h-5v-1.579h3.4211v-3.421z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
<path id="path4" d="m85 964.36v1.579h-3.4211v3.421h-1.5789v-5z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
<path id="path1" d="m134 964.36-4 4 4.2888 3.9769" fill="none" stroke="#4d4d4d" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
|
@ -16,7 +16,7 @@
|
|||
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path1259" />
|
||||
</mask>
|
||||
</defs>
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="15.215528" inkscape:cx="90.466791" inkscape:cy="146.59366" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="42.508098" inkscape:cx="85.854229" inkscape:cy="153.8648" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
|
||||
<sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
<sodipodi:guide orientation="0,1" position="0,96" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
|
|
@ -208,7 +208,9 @@
|
|||
</g>
|
||||
<path d="m 24.352274,6.3088036 h 0.03307 V 6.2757306 2.7293857 2.6963127 h -0.03307 -3.713451 -0.03307 v 0.033073 3.5463449 0.033073 h 0.03307 z M 20.373578,2.1497393 h 4.24394 c 0.06157,0 0.120624,0.024461 0.164174,0.068002 0.04355,0.043541 0.068,0.102595 0.068,0.1641723 v 4.2439399 c 0,0.061569 -0.02445,0.1206236 -0.068,0.164174 -0.04355,0.04355 -0.102605,0.067998 -0.164174,0.067998 h -4.24394 c -0.06158,0 -0.120631,-0.024447 -0.164172,-0.067998 -0.04354,-0.04355 -0.068,-0.1026054 -0.068,-0.164174 V 2.3819136 c 0,-0.061577 0.02446,-0.1206315 0.068,-0.1641723 0.04354,-0.043541 0.102595,-0.068002 0.164172,-0.068002 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0657188" id="path1286" />
|
||||
</g>
|
||||
<path style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;stroke:#999999;stroke-opacity:1;fill-opacity:1;stroke-width:0.25;stroke-dasharray:none" d="m 80,967.11218 v 4.75 h 4.75 v -1.5 h -3.25 v -3.25 z" id="path3-5" />
|
||||
<path style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;stroke:#999999;stroke-opacity:1;fill-opacity:1;stroke-width:0.25;stroke-dasharray:none" d="m 82.75,964.36218 v 1.5 h 3.25 v 3.25 h 1.5 v -4.75 z" id="path4-3" />
|
||||
<g id="g3">
|
||||
<path style="color:#000000;fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-dasharray:none;stroke-opacity:1" d="m 88.000002,967.3622 v 5 h -5 v -1.57895 h 3.421052 v -3.42105 z" id="path3-5" />
|
||||
<path style="color:#000000;fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-dasharray:none;stroke-opacity:1" d="m 85.000002,964.3622 v 1.57895 h -3.421053 v 3.42105 h -1.578947 v -5 z" id="path4-3" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
|
@ -10,7 +10,7 @@
|
|||
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path2351" />
|
||||
</mask>
|
||||
</defs>
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="30.569587" inkscape:cx="81.895121" inkscape:cy="155.43226" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="11.384339" inkscape:cx="110.37092" inkscape:cy="153.50035" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
|
||||
<sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
<sodipodi:guide orientation="0,1" position="0,120" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
|
|
@ -197,7 +197,8 @@
|
|||
<path style="fill:none;fill-rule:evenodd;stroke:#464646;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1)" d="m 36,963.87832 v 8.3163" id="path16669" sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
<path id="copy" style="fill:#4d4d4d;paint-order:fill markers stroke" d="m 58.25,962.61218 v 3.5 h 4 v 4 h 3.5 v -7.5 z m -4,4 v 7.5 h 7.5 v -7.5 z" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 80.25,967.36133 v 4.75 h 4.75 v -1.5 h -3.25 v -3.25 z" id="path3" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 83,964.61133 v 1.5 h 3.25 v 3.25 h 1.5 v -4.75 z" id="path4" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;stroke-width:1;-inkscape-stroke:none" d="m 88.000002,967.3622 v 5 h -5 v -1.57895 h 3.421052 v -3.42105 z" id="path3" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;stroke-width:1;-inkscape-stroke:none" d="m 85.000002,964.3622 v 1.57895 h -3.421053 v 3.42105 h -1.578947 v -5 z" id="path4" />
|
||||
<path style="fill:none;fill-rule:evenodd;stroke:#4d4d4d;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none" d="m 134,964.36218 -4,4 4.28879,3.97691" id="path1" sodipodi:nodetypes="ccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
|
@ -532,7 +532,7 @@ U.DataLayer.include({
|
|||
renderToolbox: function (container) {
|
||||
L.DomUtil.element(
|
||||
'i',
|
||||
{ className: 'drag-handle', title: L._('Drag to reorder') },
|
||||
{ className: 'drag-handle show-on-edit', title: L._('Drag to reorder') },
|
||||
container
|
||||
)
|
||||
const toggle = L.DomUtil.create('i', 'layer-toggle', container),
|
||||
|
|
@ -667,16 +667,7 @@ const ControlsMixin = {
|
|||
})
|
||||
container.appendChild(builder.build())
|
||||
|
||||
this.ui.openPanel({ data: { html: container }, actions: [this._aboutLink()] })
|
||||
},
|
||||
|
||||
_aboutLink: function () {
|
||||
const link = L.DomUtil.create('li', '')
|
||||
L.DomUtil.create('i', 'umap-icon-16 umap-caption', link)
|
||||
const label = L.DomUtil.create('span', '', link)
|
||||
label.textContent = label.title = L._('About')
|
||||
L.DomEvent.on(link, 'click', this.displayCaption, this)
|
||||
return link
|
||||
this.ui.openPanel({ data: { html: container } })
|
||||
},
|
||||
|
||||
displayCaption: function () {
|
||||
|
|
|
|||
|
|
@ -56,9 +56,9 @@ U.Popup.Panel = U.Popup.extend({
|
|||
|
||||
allButton: function () {
|
||||
const button = L.DomUtil.create('li', '')
|
||||
L.DomUtil.create('i', 'umap-icon-16 umap-list', button)
|
||||
L.DomUtil.create('i', 'umap-icon-16 umap-back', button)
|
||||
const label = L.DomUtil.create('span', '', button)
|
||||
label.textContent = label.title = L._('See all')
|
||||
button.title = L._('See all')
|
||||
// Fixme: remove me when this is merged and released
|
||||
// https://github.com/Leaflet/Leaflet/pull/9052
|
||||
L.DomEvent.disableClickPropagation(button)
|
||||
|
|
|
|||
|
|
@ -39,12 +39,10 @@ U.UI = L.Evented.extend({
|
|||
else body.innerHTML = e.data.html
|
||||
const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer)
|
||||
L.DomUtil.add('i', 'umap-close-icon', closeLink)
|
||||
const label = L.DomUtil.create('span', '', closeLink)
|
||||
label.title = label.textContent = L._('Close')
|
||||
closeLink.title = L._('Close')
|
||||
const resizeLink = L.DomUtil.create('li', 'umap-resize-link', actionsContainer)
|
||||
L.DomUtil.add('i', 'umap-resize-icon', resizeLink)
|
||||
const resizeLabel = L.DomUtil.create('span', '', resizeLink)
|
||||
resizeLabel.title = resizeLabel.textContent = L._('Toggle size')
|
||||
resizeLink.title = L._('Toggle size')
|
||||
if (e.actions) {
|
||||
for (let i = 0; i < e.actions.length; i++) {
|
||||
actionsContainer.appendChild(e.actions[i])
|
||||
|
|
|
|||
|
|
@ -835,16 +835,9 @@ ul.photon-autocomplete {
|
|||
}
|
||||
|
||||
|
||||
.leaflet-inplace-toolbar a {
|
||||
background-image: url('./img/16-white.svg');
|
||||
background-color: var(--color-darkGray)!important;
|
||||
}
|
||||
.leaflet-toolbar-tip {
|
||||
background-color: var(--color-darkGray);
|
||||
}
|
||||
.leaflet-inplace-toolbar a:hover {
|
||||
background-color: #353c3e!important;
|
||||
}
|
||||
.layer-toggle {
|
||||
background-position: -49px -31px;
|
||||
}
|
||||
|
|
@ -989,14 +982,10 @@ a.add-datalayer:hover {
|
|||
display: block;
|
||||
}
|
||||
i.drag-handle {
|
||||
display: none;
|
||||
background-position: -72px -73px;
|
||||
cursor: move;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.umap-edit-enabled [draggable] .drag-handle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.umap-browser .off .feature {
|
||||
display: none;
|
||||
|
|
@ -1093,9 +1082,6 @@ i.drag-handle {
|
|||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#umap-panel.umap-table-editor .toolbox li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.umap-table-editor .umap-close-link {
|
||||
right: auto;
|
||||
|
|
@ -1171,11 +1157,14 @@ i.drag-handle {
|
|||
vertical-align: middle;
|
||||
}
|
||||
.umap-add {
|
||||
background-position: -28px -27px;
|
||||
background-position: -27px -27px;
|
||||
}
|
||||
.umap-list {
|
||||
background-position: -28px -99px;
|
||||
}
|
||||
.umap-back {
|
||||
background-position: -122px -144px;
|
||||
}
|
||||
.umap-list-white {
|
||||
background-position: -92px -168px;
|
||||
}
|
||||
|
|
@ -1726,6 +1715,13 @@ span.popup-icon {
|
|||
.leaflet-inplace-toolbar {
|
||||
z-index: 10000!important;
|
||||
}
|
||||
.leaflet-inplace-toolbar a {
|
||||
background-image: url('./img/16-white.svg');
|
||||
background-color: var(--color-darkGray)!important;
|
||||
}
|
||||
.leaflet-inplace-toolbar a:hover {
|
||||
background-color: #353c3e!important;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ def test_data_browser_bbox_filter_should_be_persistent(
|
|||
expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
|
||||
expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
|
||||
# Close and reopen the browser to make sure this settings is persistent
|
||||
close = browser.get_by_text("Close")
|
||||
close = browser.get_by_title("Close")
|
||||
close.click()
|
||||
expect(browser).to_be_hidden()
|
||||
sleep(0.5)
|
||||
|
|
|
|||
Loading…
Reference in a new issue