mirror of
https://github.com/umap-project/umap.git
synced 2025-04-28 19:42:36 +02:00
chore: move editToolBar and captionBar to modules (#2272)
This also tries to rework a bit the "reflow" process, which how to edit the UI when something changes in the data. The idea is to build the whole HTML, then: - the `propagate` method tries to change the UI with targetted CSS selector, but anywhere - while `render` hide/show some elements This is not the destination, but just another step. We certainly need to refactor the SCHEMA to make the next step (as we want to associate some data change to UI change).
This commit is contained in:
Yohan Boniface
GitHub
commit
b678346d34
18 changed files with 533 additions and 1255 deletions
|
|
@ -254,8 +254,8 @@ input[type="submit"] {
|
||||||
}
|
}
|
||||||
.dark .button,
|
.dark .button,
|
||||||
.dark [type="button"] {
|
.dark [type="button"] {
|
||||||
background-color: #2a2e30;
|
background-color: var(--color-darkerGray);
|
||||||
color: #eeeeec;
|
color: var(--text-color);
|
||||||
border: 1px solid #1b1f20;
|
border: 1px solid #1b1f20;
|
||||||
}
|
}
|
||||||
.dark .button:hover,
|
.dark .button:hover,
|
||||||
|
|
@ -264,7 +264,7 @@ input[type="submit"] {
|
||||||
background-color: #2e3436;
|
background-color: #2e3436;
|
||||||
}
|
}
|
||||||
.dark a {
|
.dark a {
|
||||||
color: #eeeeec;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
button.flat,
|
button.flat,
|
||||||
[type="button"].flat,
|
[type="button"].flat,
|
||||||
|
|
|
||||||
202
umap/static/umap/css/bar.css
Normal file
202
umap/static/umap/css/bar.css
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
.umap-main-edit-toolbox [type=button] {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1em;
|
||||||
|
border: none;
|
||||||
|
background-color: var(--color-darkGray);
|
||||||
|
width: auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox [type=button]:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-container [type=button].umap-help-link {
|
||||||
|
padding-bottom: 3px;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.leaflet-container .edit-save,
|
||||||
|
.leaflet-container .edit-cancel,
|
||||||
|
.leaflet-container .edit-disable,
|
||||||
|
.leaflet-container .connected-peers
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.leaflet-container .connected-peers,
|
||||||
|
.dark [type=button].connected-peers:hover
|
||||||
|
{
|
||||||
|
background-color: var(--color-lightCyan);
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-container .edit-cancel,
|
||||||
|
.leaflet-container .edit-disable,
|
||||||
|
.leaflet-container .connected-peers{
|
||||||
|
border: 0.5px solid rgba(153, 153, 153, 0.40);
|
||||||
|
}
|
||||||
|
.leaflet-container .edit-cancel:hover,
|
||||||
|
.leaflet-container .edit-disable:hover {
|
||||||
|
border: 0.5px solid rgba(153, 153, 153, 0.80);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.leaflet-container .edit-save {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid rgba(153, 153, 153, 0.40);
|
||||||
|
background: rgba(153, 153, 153, 0.10);
|
||||||
|
}
|
||||||
|
.leaflet-container .icon-save {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dark button.edit-save:hover {
|
||||||
|
background: rgba(153, 153, 153, 0.10);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.umap-is-dirty .edit-save {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0.5px solid rgba(66, 236, 230, 0.40);
|
||||||
|
background: rgba(66, 236, 230, 0.10);
|
||||||
|
color: var(--color-brightCyan);
|
||||||
|
}
|
||||||
|
.umap-is-dirty .icon-save {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.umap-is-dirty .icon-save-disabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.umap-is-dirty .dark button.edit-save:hover {
|
||||||
|
border-color: rgba(66, 236, 230, 0.80);
|
||||||
|
background: rgba(66, 236, 230, 0.10);
|
||||||
|
}
|
||||||
|
.leaflet-container .edit-save,
|
||||||
|
.leaflet-container .edit-cancel,
|
||||||
|
.leaflet-container .edit-disable,
|
||||||
|
.umap-edit-enabled .edit-enable {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.umap-edit-enabled .edit-save,
|
||||||
|
.umap-edit-enabled .edit-disable,
|
||||||
|
.umap-edit-enabled.umap-is-dirty .edit-cancel {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.umap-is-dirty .edit-disable {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.umap-caption-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox {
|
||||||
|
/* Show a transition from top to bottom when opening it */
|
||||||
|
top: calc(var(--header-height) * -1);
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: var(--header-height);
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: start;
|
||||||
|
line-height: var(--control-size);
|
||||||
|
cursor: auto;
|
||||||
|
border-bottom: 1px solid #222;
|
||||||
|
z-index: var(--zindex-panels);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
.umap-left-edit-toolbox,
|
||||||
|
.umap-right-edit-toolbox {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
}
|
||||||
|
.umap-right-edit-toolbox {
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.umap-main-edit-toolbox .logo {
|
||||||
|
width: 39px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox .logo a {
|
||||||
|
background-image: url('../img/logo_small.svg');
|
||||||
|
background-position: 0 center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
width: 39px;
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-indent: -9999px;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox .map-name {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox .share-status {
|
||||||
|
font-style: italic;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.map-name:after {
|
||||||
|
content: '\00a0';
|
||||||
|
padding-inline-start: 3px;
|
||||||
|
width: 1ch;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.umap-is-dirty .map-name:after {
|
||||||
|
content: '*';
|
||||||
|
}
|
||||||
|
.umap-edit-enabled .umap-main-edit-toolbox {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.umap-caption-bar h3,
|
||||||
|
.umap-main-edit-toolbox h3 {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.umap-caption-bar button {
|
||||||
|
margin-inline-start: 10px;
|
||||||
|
}
|
||||||
|
.umap-caption-bar button + button:before {
|
||||||
|
content: '|';
|
||||||
|
padding-inline-end: 10px;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox .umap-user:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.umap-main-edit-toolbox .umap-user:after {
|
||||||
|
content: '|';
|
||||||
|
padding-inline-start: 20px;
|
||||||
|
display: inline-block; /* Prevents underline on hover. */
|
||||||
|
}
|
||||||
|
.umap-caption-bar {
|
||||||
|
display: none;
|
||||||
|
height: var(--footer-height);
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: var(--gutter);
|
||||||
|
text-align: start;
|
||||||
|
line-height: 100%;
|
||||||
|
cursor: auto;
|
||||||
|
border-top: 1px solid var(--color-lightGray);
|
||||||
|
opacity: 0.93;
|
||||||
|
z-index: var(--zindex-panels);
|
||||||
|
}
|
||||||
|
.umap-caption-bar-enabled .umap-caption-bar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.umap-caption-bar-enabled {
|
||||||
|
--current-footer-height: var(--footer-height);
|
||||||
|
}
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
}
|
}
|
||||||
.icon-16 {
|
.icon-16 {
|
||||||
background-image: url('../img/16.svg');
|
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
|
@ -43,6 +42,14 @@ html[dir="rtl"] .icon {
|
||||||
.dark .icon-24 {
|
.dark .icon-24 {
|
||||||
background-image: url('../img/24-white.svg');
|
background-image: url('../img/24-white.svg');
|
||||||
}
|
}
|
||||||
|
.icon-16.icon-black,
|
||||||
|
.icon-16 {
|
||||||
|
background-image: url('../img/16.svg');
|
||||||
|
}
|
||||||
|
.icon-24.icon-black,
|
||||||
|
.icon-24 {
|
||||||
|
background-image: url('../img/24.svg');
|
||||||
|
}
|
||||||
.icon-add {
|
.icon-add {
|
||||||
background-position: var(--tile) var(--tile);
|
background-position: var(--tile) var(--tile);
|
||||||
}
|
}
|
||||||
|
|
@ -106,6 +113,9 @@ html[dir="rtl"] .icon {
|
||||||
.icon-marker {
|
.icon-marker {
|
||||||
background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
|
background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
|
||||||
}
|
}
|
||||||
|
.icon-peers {
|
||||||
|
background-position: calc(var(--tile) * 3) calc(var(--tile) * 2);
|
||||||
|
}
|
||||||
.icon-polygon {
|
.icon-polygon {
|
||||||
background-position: var(--tile) calc(var(--tile) * 3);
|
background-position: var(--tile) calc(var(--tile) * 3);
|
||||||
}
|
}
|
||||||
|
|
@ -124,6 +134,13 @@ html[dir="rtl"] .icon {
|
||||||
.expanded .icon-resize {
|
.expanded .icon-resize {
|
||||||
background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
|
background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
|
||||||
}
|
}
|
||||||
|
.icon-save {
|
||||||
|
background-position: calc(var(--tile) * 6) var(--tile);
|
||||||
|
}
|
||||||
|
/* FIXME move to a 16-disabled.svg sprite ? */
|
||||||
|
.icon-save-disabled {
|
||||||
|
background-position: calc(var(--tile) * 6) 0;
|
||||||
|
}
|
||||||
.icon-search {
|
.icon-search {
|
||||||
background-position: var(--tile) calc(var(--tile) * 5);
|
background-position: var(--tile) calc(var(--tile) * 5);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,9 +37,6 @@
|
||||||
<path id="table-5" d="m54 819.36v2h12v-2zm0 3v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1z" fill="#f2f2f2"/>
|
<path id="table-5" d="m54 819.36v2h12v-2zm0 3v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1z" fill="#f2f2f2"/>
|
||||||
<path id="path3684" d="m63.714 866.36-1.1428 1.1429 2.2857 2.2857 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#f2f2f2" stroke="#999" stroke-width=".25"/>
|
<path id="path3684" d="m63.714 866.36-1.1428 1.1429 2.2857 2.2857 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#f2f2f2" stroke="#999" stroke-width=".25"/>
|
||||||
<text id="text4457-6" x="41.647079" y="916.79706" fill="#000000" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4459-6" x="41.647079" y="916.79706" font-family="sans-serif" font-size="30.476px" style="line-height:1.25"> </tspan></text>
|
<text id="text4457-6" x="41.647079" y="916.79706" fill="#000000" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4459-6" x="41.647079" y="916.79706" font-family="sans-serif" font-size="30.476px" style="line-height:1.25"> </tspan></text>
|
||||||
<g id="text4356-2" transform="translate(44 -124)" fill="#fff">
|
|
||||||
<path id="path4384-2" d="m35.742 999.44 3.0762-3.0762-3.0664-3.0664 1.1914-1.1914 3.0664 3.0664 3.0566-3.0566 1.1719 1.1816-3.0469 3.0566 3.0664 3.0664-1.1914 1.1914-3.0664-3.0664-3.0762 3.0762-1.1816-1.1816" fill="#f2f2f2"/>
|
|
||||||
</g>
|
|
||||||
<path id="path3684-2" d="m63.714 890.36-1.1428 1.1428 2.2857 2.2858 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#b3b3b3"/>
|
<path id="path3684-2" d="m63.714 890.36-1.1428 1.1428 2.2857 2.2858 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#b3b3b3"/>
|
||||||
<g id="g4717" transform="translate(-54.789 -114.48)">
|
<g id="g4717" transform="translate(-54.789 -114.48)">
|
||||||
<path id="path3862" transform="translate(-1.2108 854.84)" d="m141.27 173.42-6.7559 2.6797 0.95313 6.3457 5.8711 3.127 4.1484-7.873zm-1.4473 2.4883 2.9902 1.6016-0.5918 2.4316-3.3574 1.5039-1.7383-3.8106z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
<path id="path3862" transform="translate(-1.2108 854.84)" d="m141.27 173.42-6.7559 2.6797 0.95313 6.3457 5.8711 3.127 4.1484-7.873zm-1.4473 2.4883 2.9902 1.6016-0.5918 2.4316-3.3574 1.5039-1.7383-3.8106z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
||||||
|
|
@ -196,5 +193,14 @@
|
||||||
<path id="path11" d="m12 914.86a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5zm0 1a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5z" style="paint-order:fill markers stroke"/>
|
<path id="path11" d="m12 914.86a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5zm0 1a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5z" style="paint-order:fill markers stroke"/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
<g id="g2-6" transform="matrix(1.22 0 0 1.22 75.51 864.01)" fill="none" stroke="#999" stroke-linecap="round" stroke-linejoin="round" stroke-width=".7">
|
||||||
|
<path id="path1-7" d="m2.5 4c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5z"/>
|
||||||
|
<path id="path2-75" d="m4 5.3501h-3v2.39"/>
|
||||||
|
<path id="path3-3" d="m11.5 4c0.8284 0 1.5-0.67157 1.5-1.5s-0.6716-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.6716 1.5 1.5 1.5z"/>
|
||||||
|
<path id="path4-5" d="m10 5.3501h3v2.39"/>
|
||||||
|
<path id="path5-6" d="m7 7.75c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5z"/>
|
||||||
|
<path id="path6-6" d="m8.5 9.3501h-3v2.39"/>
|
||||||
|
<path id="path7-2" d="m5.5 9.3501h3v2.39"/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
|
@ -1,7 +1,7 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
<svg width="168" height="168" id="svg2" version="1.1" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
<svg width="168" height="168" id="svg2" version="1.1" inkscape:version="1.4 (e7c3feb100, 2024-10-09)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||||
<defs id="defs4">
|
<defs id="defs4">
|
||||||
<clipPath id="clip0_241_10857">
|
<clipPath id="clip0_241_10857">
|
||||||
<rect width="18.049999" height="19.01" fill="#ffffff" id="rect586" x="0" y="0" />
|
<rect width="18.049999" height="19.01" fill="#ffffff" id="rect586" x="0" y="0" />
|
||||||
|
|
@ -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" />
|
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path1259" />
|
||||||
</mask>
|
</mask>
|
||||||
</defs>
|
</defs>
|
||||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="3.8200527" inkscape:cx="86.517131" inkscape:cy="92.276214" 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.587678" inkscape:cx="79.049488" inkscape:cy="68.779959" 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" />
|
<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="-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)" />
|
<sodipodi:guide orientation="0,1" position="0,96" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||||
|
|
@ -56,9 +56,6 @@
|
||||||
<g transform="translate(32,-48.000118)" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" id="text3784-6" />
|
<g transform="translate(32,-48.000118)" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" id="text3784-6" />
|
||||||
<path style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 63.71429,866.36213 -1.14285,1.14286 2.28571,2.28572 L 66,868.64785 Z M 62,868.07641 l -6.285714,6.28574 2.285715,2.2857 6.285719,-6.28572 z M 55.714286,874.36215 54,878.36214 l 4.000001,-1.71429 z" id="path3684" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
|
<path style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 63.71429,866.36213 -1.14285,1.14286 2.28571,2.28572 L 66,868.64785 Z M 62,868.07641 l -6.285714,6.28574 2.285715,2.2857 6.285719,-6.28572 z M 55.714286,874.36215 54,878.36214 l 4.000001,-1.71429 z" id="path3684" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
|
||||||
<text xml:space="preserve" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" x="41.647079" y="916.79706" id="text4457-6"><tspan y="916.79706" x="41.647079" sodipodi:role="line" id="tspan4459-6" style="font-size:30.4762px;line-height:1.25;font-family:sans-serif"> </tspan></text>
|
<text xml:space="preserve" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" x="41.647079" y="916.79706" id="text4457-6"><tspan y="916.79706" x="41.647079" sodipodi:role="line" id="tspan4459-6" style="font-size:30.4762px;line-height:1.25;font-family:sans-serif"> </tspan></text>
|
||||||
<g id="text4356-2" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none" transform="translate(44,-124.00004)">
|
|
||||||
<path inkscape:connector-curvature="0" id="path4384-2" style="font-variant:normal;font-stretch:normal;font-size:20px;font-family:Arial;-inkscape-font-specification:Arial;fill:#f2f2f2;fill-opacity:1" d="m 35.742187,999.43835 3.076172,-3.07617 -3.066406,-3.0664 1.191406,-1.19141 3.066407,3.06641 3.05664,-3.05664 1.171875,1.18164 -3.046875,3.05664 3.066406,3.0664 -1.191406,1.19138 L 40,997.54382 36.923828,1000.62 35.742187,999.43835" />
|
|
||||||
</g>
|
|
||||||
<path style="fill:#b3b3b3;fill-opacity:1;stroke:none" d="m 63.71429,890.36216 -1.14285,1.1428 2.28571,2.2858 L 66,892.64786 Z M 62,892.07646 55.714286,898.36218 58,900.64788 l 6.28572,-6.2857 z m -6.285714,6.28572 -1.714286,4 4,-1.7143 z" id="path3684-2" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
|
<path style="fill:#b3b3b3;fill-opacity:1;stroke:none" d="m 63.71429,890.36216 -1.14285,1.1428 2.28571,2.2858 L 66,892.64786 Z M 62,892.07646 55.714286,898.36218 58,900.64788 l 6.28572,-6.2857 z m -6.285714,6.28572 -1.714286,4 4,-1.7143 z" id="path3684-2" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
|
||||||
<g id="g4717" transform="translate(-54.789185,-114.477)">
|
<g id="g4717" transform="translate(-54.789185,-114.477)">
|
||||||
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 141.26953,173.42383 -6.75586,2.67969 0.95313,6.3457 5.87109,3.12695 4.14844,-7.87305 z m -1.44726,2.48828 2.99023,1.60156 -0.5918,2.43164 -3.35742,1.50391 -1.73828,-3.81055 z" transform="translate(-1.210815,854.83918)" id="path3862" inkscape:connector-curvature="0" />
|
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 141.26953,173.42383 -6.75586,2.67969 0.95313,6.3457 5.87109,3.12695 4.14844,-7.87305 z m -1.44726,2.48828 2.99023,1.60156 -0.5918,2.43164 -3.35742,1.50391 -1.73828,-3.81055 z" transform="translate(-1.210815,854.83918)" id="path3862" inkscape:connector-curvature="0" />
|
||||||
|
|
@ -218,5 +215,14 @@
|
||||||
<path id="path11" style="fill:#f2f2f2;stroke:#999999;stroke-width:0.2;stroke-dasharray:none;paint-order:fill markers stroke" d="m 12,914.86218 a 2.5,2.5 0 0 0 -2.5,2.5 2.5,2.5 0 0 0 2.5,2.5 2.5,2.5 0 0 0 2.5,-2.5 2.5,2.5 0 0 0 -2.5,-2.5 z m 0,1 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.5,1.5 1.5,1.5 0 0 1 -1.5,-1.5 1.5,1.5 0 0 1 1.5,-1.5 z" />
|
<path id="path11" style="fill:#f2f2f2;stroke:#999999;stroke-width:0.2;stroke-dasharray:none;paint-order:fill markers stroke" d="m 12,914.86218 a 2.5,2.5 0 0 0 -2.5,2.5 2.5,2.5 0 0 0 2.5,2.5 2.5,2.5 0 0 0 2.5,-2.5 2.5,2.5 0 0 0 -2.5,-2.5 z m 0,1 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.5,1.5 1.5,1.5 0 0 1 -1.5,-1.5 1.5,1.5 0 0 1 1.5,-1.5 z" />
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
<g style="fill:none;stroke:#999999;stroke-opacity:1" id="g2-6" transform="matrix(1.2199965,0,0,1.2199965,75.510009,864.01174)">
|
||||||
|
<path d="m 2.5,4 c 0.82843,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.67157,-1.5 -1.5,-1.5 -0.82843,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.67157,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path1-7" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 4,5.3501 h -3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path2-75" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 11.5,4 c 0.8284,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.6716,-1.5 -1.5,-1.5 -0.8284,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.6716,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path3-3" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 10,5.3501 h 3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path4-5" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 7,7.75 c 0.82843,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.67157,-1.5 -1.5,-1.5 -0.82843,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.67157,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path5-6" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 8.5,9.3501 h -3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path6-6" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
<path d="m 5.5,9.3501 h 3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path7-2" style="stroke:#999999;stroke-opacity:1" />
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 74 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 45 KiB |
|
|
@ -226,13 +226,6 @@ export default class Help {
|
||||||
return button
|
return button
|
||||||
}
|
}
|
||||||
|
|
||||||
getStartedLink(container) {
|
|
||||||
const button = DomUtil.createButton('umap-help-link', container, translate('Help'))
|
|
||||||
button.textContent = translate('Help')
|
|
||||||
button.addEventListener('click', () => this.showGetStarted())
|
|
||||||
return button
|
|
||||||
}
|
|
||||||
|
|
||||||
parse(container) {
|
parse(container) {
|
||||||
for (const element of container.querySelectorAll('[data-help]')) {
|
for (const element of container.querySelectorAll('[data-help]')) {
|
||||||
this.button(element, element.dataset.help.split(','))
|
this.button(element, element.dataset.help.split(','))
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,10 @@ export class MapPermissions extends ServerStored {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this._umap.render(['properties.permissions'])
|
||||||
|
}
|
||||||
|
|
||||||
isOwner() {
|
isOwner() {
|
||||||
return Boolean(this._umap.properties.user?.is_owner)
|
return Boolean(this._umap.properties.user?.is_owner)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ import { translate } from '../i18n.js'
|
||||||
import { uMapAlert as Alert } from '../../components/alerts/alert.js'
|
import { uMapAlert as Alert } from '../../components/alerts/alert.js'
|
||||||
import * as Utils from '../utils.js'
|
import * as Utils from '../utils.js'
|
||||||
import * as Icon from './icon.js'
|
import * as Icon from './icon.js'
|
||||||
import ContextMenu from '../ui/contextmenu.js'
|
|
||||||
|
|
||||||
// Those options are not saved on the server, so they can live here
|
// Those options are not saved on the server, so they can live here
|
||||||
// instead of in umap.properties
|
// instead of in umap.properties
|
||||||
|
|
@ -104,10 +103,6 @@ const ControlsMixin = {
|
||||||
},
|
},
|
||||||
|
|
||||||
renderControls: function () {
|
renderControls: function () {
|
||||||
const hasSlideshow = Boolean(this.options.slideshow?.active)
|
|
||||||
const barEnabled = this.options.captionBar || hasSlideshow
|
|
||||||
document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
|
|
||||||
document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
|
|
||||||
for (const control of Object.values(this._controls)) {
|
for (const control of Object.values(this._controls)) {
|
||||||
this.removeControl(control)
|
this.removeControl(control)
|
||||||
}
|
}
|
||||||
|
|
@ -150,198 +145,6 @@ const ControlsMixin = {
|
||||||
if (this._umap.getProperty('scaleControl')) this._controls.scale.addTo(this)
|
if (this._umap.getProperty('scaleControl')) this._controls.scale.addTo(this)
|
||||||
this._controls.tilelayers.setLayers()
|
this._controls.tilelayers.setLayers()
|
||||||
},
|
},
|
||||||
|
|
||||||
renderEditToolbar: function () {
|
|
||||||
const className = 'umap-main-edit-toolbox'
|
|
||||||
const container =
|
|
||||||
document.querySelector(`.${className}`) ||
|
|
||||||
DomUtil.create('div', `${className} with-transition dark`, this._controlContainer)
|
|
||||||
container.innerHTML = ''
|
|
||||||
const leftContainer = DomUtil.create('div', 'umap-left-edit-toolbox', container)
|
|
||||||
const rightContainer = DomUtil.create('div', 'umap-right-edit-toolbox', container)
|
|
||||||
const logo = DomUtil.create('div', 'logo', leftContainer)
|
|
||||||
DomUtil.createLink('', logo, 'uMap', '/', null, translate('Go to the homepage'))
|
|
||||||
const nameButton = DomUtil.createButton('map-name', leftContainer, '')
|
|
||||||
DomEvent.on(nameButton, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: translate('Edit the title of the map'),
|
|
||||||
anchor: nameButton,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const shareStatusButton = DomUtil.createButton(
|
|
||||||
'share-status',
|
|
||||||
leftContainer,
|
|
||||||
'',
|
|
||||||
this._umap.permissions.edit,
|
|
||||||
this._umap.permissions
|
|
||||||
)
|
|
||||||
DomEvent.on(shareStatusButton, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: translate('Update who can see and edit the map'),
|
|
||||||
anchor: shareStatusButton,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (this.options.editMode === 'advanced') {
|
|
||||||
DomEvent.on(nameButton, 'click', this._umap.editCaption, this._umap)
|
|
||||||
DomEvent.on(
|
|
||||||
shareStatusButton,
|
|
||||||
'click',
|
|
||||||
this._umap.permissions.edit,
|
|
||||||
this._umap.permissions
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (this.options.user?.id) {
|
|
||||||
const button = U.Utils.loadTemplate(`
|
|
||||||
<button class="umap-user flat" type="button">
|
|
||||||
<i class="icon icon-16 icon-profile"></i>
|
|
||||||
<span>${this.options.user.name}</span>
|
|
||||||
</button>
|
|
||||||
`)
|
|
||||||
rightContainer.appendChild(button)
|
|
||||||
const menu = new ContextMenu({ className: 'dark', fixed: true })
|
|
||||||
const actions = [
|
|
||||||
{
|
|
||||||
label: translate('New map'),
|
|
||||||
action: this._umap.urls.get('map_new'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: translate('My maps'),
|
|
||||||
action: this._umap.urls.get('user_dashboard'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: translate('My teams'),
|
|
||||||
action: this._umap.urls.get('user_teams'),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
if (this._umap.urls.has('user_profile')) {
|
|
||||||
actions.push({
|
|
||||||
label: translate('My profile'),
|
|
||||||
action: this._umap.urls.get('user_profile'),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
menu.openBelow(button, actions)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
|
|
||||||
if (connectedPeers !== 0) {
|
|
||||||
const connectedPeersCount = DomUtil.createButton(
|
|
||||||
'leaflet-control-connected-peers',
|
|
||||||
rightContainer,
|
|
||||||
''
|
|
||||||
)
|
|
||||||
DomEvent.on(connectedPeersCount, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: translate(
|
|
||||||
'{connectedPeers} peer(s) currently connected to this map',
|
|
||||||
{
|
|
||||||
connectedPeers: connectedPeers,
|
|
||||||
}
|
|
||||||
),
|
|
||||||
anchor: connectedPeersCount,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const updateConnectedPeersCount = () => {
|
|
||||||
connectedPeersCount.innerHTML = this._umap.sync.getNumberOfConnectedPeers()
|
|
||||||
}
|
|
||||||
updateConnectedPeersCount()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._umap.help.getStartedLink(rightContainer)
|
|
||||||
const controlEditCancel = DomUtil.createButton(
|
|
||||||
'leaflet-control-edit-cancel',
|
|
||||||
rightContainer,
|
|
||||||
DomUtil.add('span', '', null, translate('Cancel edits')),
|
|
||||||
() => this._umap.askForReset()
|
|
||||||
)
|
|
||||||
DomEvent.on(controlEditCancel, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: this._umap.help.displayLabel('CANCEL'),
|
|
||||||
anchor: controlEditCancel,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const controlEditDisable = DomUtil.createButton(
|
|
||||||
'leaflet-control-edit-disable',
|
|
||||||
rightContainer,
|
|
||||||
DomUtil.add('span', '', null, translate('View')),
|
|
||||||
this._umap.disableEdit,
|
|
||||||
this._umap
|
|
||||||
)
|
|
||||||
DomEvent.on(controlEditDisable, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: this._umap.help.displayLabel('PREVIEW'),
|
|
||||||
anchor: controlEditDisable,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const controlEditSave = DomUtil.createButton(
|
|
||||||
'leaflet-control-edit-save button',
|
|
||||||
rightContainer,
|
|
||||||
DomUtil.add('span', '', null, translate('Save')),
|
|
||||||
() => this._umap.saveAll()
|
|
||||||
)
|
|
||||||
DomEvent.on(controlEditSave, 'mouseover', () => {
|
|
||||||
this._umap.tooltip.open({
|
|
||||||
content: this._umap.help.displayLabel('SAVE'),
|
|
||||||
anchor: controlEditSave,
|
|
||||||
position: 'bottom',
|
|
||||||
delay: 500,
|
|
||||||
duration: 5000,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
renderCaptionBar: function () {
|
|
||||||
if (this.options.noControl) return
|
|
||||||
const container =
|
|
||||||
this._controlContainer.querySelector('.umap-caption-bar') ||
|
|
||||||
DomUtil.create('div', 'umap-caption-bar', this._controlContainer)
|
|
||||||
container.innerHTML = ''
|
|
||||||
const name = DomUtil.create('h3', 'map-name', container)
|
|
||||||
DomEvent.disableClickPropagation(container)
|
|
||||||
this._umap.addAuthorLink(container)
|
|
||||||
if (this._umap.getProperty('captionMenus')) {
|
|
||||||
DomUtil.createButton(
|
|
||||||
'umap-about-link flat',
|
|
||||||
container,
|
|
||||||
translate('Open caption'),
|
|
||||||
() => this._umap.openCaption()
|
|
||||||
)
|
|
||||||
DomUtil.createButton(
|
|
||||||
'umap-open-browser-link flat',
|
|
||||||
container,
|
|
||||||
translate('Browse data'),
|
|
||||||
() => this.openBrowser('data')
|
|
||||||
)
|
|
||||||
if (this.options.facetKey) {
|
|
||||||
DomUtil.createButton(
|
|
||||||
'umap-open-filter-link flat',
|
|
||||||
container,
|
|
||||||
translate('Filter data'),
|
|
||||||
() => this.openBrowser('filters')
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this._umap.onceDatalayersLoaded(() => {
|
|
||||||
this._umap.slideshow.renderToolbox(container)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ManageTilelayerMixin = {
|
const ManageTilelayerMixin = {
|
||||||
|
|
@ -482,8 +285,6 @@ export const LeafletMap = BaseMap.extend({
|
||||||
renderUI: function () {
|
renderUI: function () {
|
||||||
setOptions(this, this._umap.properties)
|
setOptions(this, this._umap.properties)
|
||||||
this.initTileLayers()
|
this.initTileLayers()
|
||||||
this.renderCaptionBar()
|
|
||||||
this.renderEditToolbar()
|
|
||||||
// Needs tilelayer to exist for minimap
|
// Needs tilelayer to exist for minimap
|
||||||
this.renderControls()
|
this.renderControls()
|
||||||
this.handleLimitBounds()
|
this.handleLimitBounds()
|
||||||
|
|
@ -576,6 +377,5 @@ export const LeafletMap = BaseMap.extend({
|
||||||
|
|
||||||
initEditTools: function () {
|
initEditTools: function () {
|
||||||
this.editTools = new U.Editable(this._umap)
|
this.editTools = new U.Editable(this._umap)
|
||||||
this.renderEditToolbar()
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -26,13 +26,9 @@ export default class Slideshow extends WithTemplate {
|
||||||
this.play()
|
this.play()
|
||||||
}, this)
|
}, this)
|
||||||
}
|
}
|
||||||
leafletMap.on(
|
leafletMap.on('edit:enabled', () => {
|
||||||
'edit:enabled',
|
|
||||||
function () {
|
|
||||||
this.stop()
|
this.stop()
|
||||||
},
|
})
|
||||||
this
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
set current(feature) {
|
set current(feature) {
|
||||||
|
|
@ -85,9 +81,13 @@ export default class Slideshow extends WithTemplate {
|
||||||
spinner.style.animation = 'none'
|
spinner.style.animation = 'none'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isEnabled() {
|
||||||
|
return Boolean(this.properties.active)
|
||||||
|
}
|
||||||
|
|
||||||
play() {
|
play() {
|
||||||
if (this._id) return
|
if (this._id) return
|
||||||
if (this._umap.editEnabled || !this._umap.properties.slideshow.active) return
|
if (this._umap.editEnabled || !this.isEnabled()) return
|
||||||
L.DomUtil.addClass(document.body, this.CLASSNAME)
|
L.DomUtil.addClass(document.body, this.CLASSNAME)
|
||||||
this._id = window.setInterval(L.bind(this.loop, this), this.properties.delay)
|
this._id = window.setInterval(L.bind(this.loop, this), this.properties.delay)
|
||||||
this.startSpinner()
|
this.startSpinner()
|
||||||
|
|
|
||||||
193
umap/static/umap/js/modules/ui/bar.js
Normal file
193
umap/static/umap/js/modules/ui/bar.js
Normal file
|
|
@ -0,0 +1,193 @@
|
||||||
|
import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
|
||||||
|
import { translate } from '../i18n.js'
|
||||||
|
import { WithTemplate } from '../utils.js'
|
||||||
|
import ContextMenu from './contextmenu.js'
|
||||||
|
|
||||||
|
const TOP_BAR_TEMPLATE = `
|
||||||
|
<div class="umap-main-edit-toolbox with-transition dark">
|
||||||
|
<div class="umap-left-edit-toolbox" data-ref="left">
|
||||||
|
<div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
|
||||||
|
<button class="map-name" type="button" data-ref="name"></button>
|
||||||
|
<button class="share-status" type="button" data-ref="share"></button>
|
||||||
|
</div>
|
||||||
|
<div class="umap-right-edit-toolbox" data-ref="right">
|
||||||
|
<button class="connected-peers round" type="button" data-ref="peers">
|
||||||
|
<i class="icon icon-16 icon-peers icon-black"></i>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
<button class="umap-user flat" type="button" data-ref="user">
|
||||||
|
<i class="icon icon-16 icon-profile"></i>
|
||||||
|
<span class="username" data-ref="username"></span>
|
||||||
|
</button>
|
||||||
|
<button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
|
||||||
|
<button class="edit-cancel round" type="button" data-ref="cancel">
|
||||||
|
<i class="icon icon-16 icon-restore"></i>
|
||||||
|
<span class="">${translate('Cancel edits')}</span>
|
||||||
|
</button>
|
||||||
|
<button class="edit-disable round" type="button" data-ref="view">
|
||||||
|
<i class="icon icon-16 icon-eye"></i>
|
||||||
|
<span class="">${translate('View')}</span>
|
||||||
|
</button>
|
||||||
|
<button class="edit-save button round" type="button" data-ref="save">
|
||||||
|
<i class="icon icon-16 icon-save"></i>
|
||||||
|
<i class="icon icon-16 icon-save-disabled"></i>
|
||||||
|
<span class="">${translate('Save')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
|
||||||
|
export class TopBar extends WithTemplate {
|
||||||
|
constructor(umap, parent) {
|
||||||
|
super()
|
||||||
|
this._umap = umap
|
||||||
|
this._menu = new ContextMenu({ className: 'dark', fixed: true })
|
||||||
|
this.loadTemplate(TOP_BAR_TEMPLATE)
|
||||||
|
this.parent = parent
|
||||||
|
}
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
this.parent.appendChild(this.element)
|
||||||
|
this.elements.name.addEventListener('mouseover', () => {
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: translate('Edit the title of the map'),
|
||||||
|
anchor: this.elements.name,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.elements.share.addEventListener('mouseover', () => {
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: translate('Update who can see and edit the map'),
|
||||||
|
anchor: this.elements.share,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if (this._umap.properties.editMode === 'advanced') {
|
||||||
|
this.elements.name.addEventListener('click', () => this._umap.editCaption())
|
||||||
|
this.elements.share.addEventListener('click', () => this._umap.permissions.edit())
|
||||||
|
}
|
||||||
|
this.elements.user.addEventListener('click', () => {
|
||||||
|
if (this._umap.properties.user?.id) {
|
||||||
|
const actions = [
|
||||||
|
{
|
||||||
|
label: translate('New map'),
|
||||||
|
action: this._umap.urls.get('map_new'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: translate('My maps'),
|
||||||
|
action: this._umap.urls.get('user_dashboard'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: translate('My teams'),
|
||||||
|
action: this._umap.urls.get('user_teams'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
if (this._umap.urls.has('user_profile')) {
|
||||||
|
actions.push({
|
||||||
|
label: translate('My profile'),
|
||||||
|
action: this._umap.urls.get('user_profile'),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this._menu.openBelow(this.elements.user, actions)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
|
||||||
|
this.elements.peers.addEventListener('mouseover', () => {
|
||||||
|
if (!connectedPeers) return
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: translate('{connectedPeers} peer(s) currently connected to this map', {
|
||||||
|
connectedPeers: connectedPeers,
|
||||||
|
}),
|
||||||
|
anchor: this.elements.peers,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.elements.help.addEventListener('click', () => this._umap.showGetStarted())
|
||||||
|
this.elements.cancel.addEventListener('click', () => this._umap.askForReset())
|
||||||
|
this.elements.cancel.addEventListener('mouseover', () => {
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: this._umap.help.displayLabel('CANCEL'),
|
||||||
|
anchor: this.elements.cancel,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.elements.view.addEventListener('click', () => this._umap.disableEdit())
|
||||||
|
this.elements.view.addEventListener('mouseover', () => {
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: this._umap.help.displayLabel('PREVIEW'),
|
||||||
|
anchor: this.elements.view,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.elements.save.addEventListener('click', () => this._umap.saveAll())
|
||||||
|
this.elements.save.addEventListener('mouseover', () => {
|
||||||
|
this._umap.tooltip.open({
|
||||||
|
content: this._umap.help.displayLabel('SAVE'),
|
||||||
|
anchor: this.elements.save,
|
||||||
|
position: 'bottom',
|
||||||
|
delay: 500,
|
||||||
|
duration: 5000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.redraw()
|
||||||
|
}
|
||||||
|
|
||||||
|
redraw() {
|
||||||
|
this.elements.peers.hidden = !this._umap.getProperty('syncEnabled')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const BOTTOM_BAR_TEMPLATE = `
|
||||||
|
<div class="umap-caption-bar">
|
||||||
|
<h3 class="map-name"></h3>
|
||||||
|
<span data-ref="author"></span>
|
||||||
|
<button class="umap-about-link flat" type="button" title="${translate('Open caption')}" data-ref="caption">${translate('Open caption')}</button>
|
||||||
|
<button class="umap-open-browser-link flat" type="button" title="${translate('Browse data')}" data-ref="browse">${translate('Browse data')}</button>
|
||||||
|
<button class="umap-open-browser-link flat" type="button" title="${translate('Filter data')}" data-ref="filter">${translate('Filter data')}</button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
export class BottomBar extends WithTemplate {
|
||||||
|
constructor(umap, slideshow, parent) {
|
||||||
|
super()
|
||||||
|
this._umap = umap
|
||||||
|
this._slideshow = slideshow
|
||||||
|
this.loadTemplate(BOTTOM_BAR_TEMPLATE)
|
||||||
|
this.parent = parent
|
||||||
|
}
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
this.parent.appendChild(this.element)
|
||||||
|
DomEvent.disableClickPropagation(this.element)
|
||||||
|
this._umap.addAuthorLink(this.elements.author)
|
||||||
|
this.elements.caption.addEventListener('click', () => this._umap.openCaption())
|
||||||
|
this.elements.browse.addEventListener('click', () => this._umap.openBrowser('data'))
|
||||||
|
this.elements.filter.addEventListener('click', () =>
|
||||||
|
this._umap.openBrowser('filters')
|
||||||
|
)
|
||||||
|
this._slideshow.renderToolbox(this.element)
|
||||||
|
this.redraw()
|
||||||
|
}
|
||||||
|
|
||||||
|
redraw() {
|
||||||
|
const hasSlideshow = this._slideshow.isEnabled()
|
||||||
|
const barEnabled = this._umap.properties.captionBar || hasSlideshow
|
||||||
|
document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
|
||||||
|
document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
|
||||||
|
const showMenus = this._umap.getProperty('captionMenus')
|
||||||
|
this.elements.caption.hidden = !showMenus
|
||||||
|
this.elements.browse.hidden = !showMenus
|
||||||
|
this.elements.filter.hidden = !showMenus || !this._umap.properties.facetKey
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -13,6 +13,7 @@ import { LeafletMap } from './rendering/map.js'
|
||||||
import URLs from './urls.js'
|
import URLs from './urls.js'
|
||||||
import { Panel, EditPanel, FullPanel } from './ui/panel.js'
|
import { Panel, EditPanel, FullPanel } from './ui/panel.js'
|
||||||
import Dialog from './ui/dialog.js'
|
import Dialog from './ui/dialog.js'
|
||||||
|
import { BottomBar, TopBar } from './ui/bar.js'
|
||||||
import Tooltip from './ui/tooltip.js'
|
import Tooltip from './ui/tooltip.js'
|
||||||
import ContextMenu from './ui/contextmenu.js'
|
import ContextMenu from './ui/contextmenu.js'
|
||||||
import { Request, ServerRequest } from './request.js'
|
import { Request, ServerRequest } from './request.js'
|
||||||
|
|
@ -102,12 +103,14 @@ export default class Umap extends ServerStored {
|
||||||
|
|
||||||
this.panel = new Panel(this, this._leafletMap)
|
this.panel = new Panel(this, this._leafletMap)
|
||||||
this.dialog = new Dialog({ className: 'dark' })
|
this.dialog = new Dialog({ className: 'dark' })
|
||||||
|
this.topBar = new TopBar(this, this._leafletMap._controlContainer)
|
||||||
|
this.bottomBar = new BottomBar(
|
||||||
|
this,
|
||||||
|
this.slideshow,
|
||||||
|
this._leafletMap._controlContainer
|
||||||
|
)
|
||||||
this.tooltip = new Tooltip(this._leafletMap._controlContainer)
|
this.tooltip = new Tooltip(this._leafletMap._controlContainer)
|
||||||
this.contextmenu = new ContextMenu()
|
this.contextmenu = new ContextMenu()
|
||||||
if (this.hasEditMode()) {
|
|
||||||
this.editPanel = new EditPanel(this, this._leafletMap)
|
|
||||||
this.fullPanel = new FullPanel(this, this._leafletMap)
|
|
||||||
}
|
|
||||||
this.server = new ServerRequest()
|
this.server = new ServerRequest()
|
||||||
this.request = new Request()
|
this.request = new Request()
|
||||||
this.facets = new Facets(this)
|
this.facets = new Facets(this)
|
||||||
|
|
@ -117,6 +120,13 @@ export default class Umap extends ServerStored {
|
||||||
this.share = new Share(this)
|
this.share = new Share(this)
|
||||||
this.rules = new Rules(this)
|
this.rules = new Rules(this)
|
||||||
|
|
||||||
|
if (this.hasEditMode()) {
|
||||||
|
this.editPanel = new EditPanel(this, this._leafletMap)
|
||||||
|
this.fullPanel = new FullPanel(this, this._leafletMap)
|
||||||
|
this._leafletMap.initEditTools()
|
||||||
|
this.topBar.setup()
|
||||||
|
}
|
||||||
|
|
||||||
this.datalayersFromQueryString = this.searchParams.get('datalayers')
|
this.datalayersFromQueryString = this.searchParams.get('datalayers')
|
||||||
if (this.datalayersFromQueryString) {
|
if (this.datalayersFromQueryString) {
|
||||||
this.datalayersFromQueryString = this.datalayersFromQueryString
|
this.datalayersFromQueryString = this.datalayersFromQueryString
|
||||||
|
|
@ -180,14 +190,11 @@ export default class Umap extends ServerStored {
|
||||||
await this.loadDataFromQueryString()
|
await this.loadDataFromQueryString()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.hasEditMode()) {
|
|
||||||
this._leafletMap.initEditTools()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.properties.noControl) {
|
if (!this.properties.noControl) {
|
||||||
this.initShortcuts()
|
this.initShortcuts()
|
||||||
this._leafletMap.on('contextmenu', (e) => this.onContextMenu(e))
|
this._leafletMap.on('contextmenu', (e) => this.onContextMenu(e))
|
||||||
this.onceDataLoaded(this.setViewFromQueryString)
|
this.onceDataLoaded(this.setViewFromQueryString)
|
||||||
|
this.bottomBar.setup()
|
||||||
this.propagate()
|
this.propagate()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -633,22 +640,6 @@ export default class Umap extends ServerStored {
|
||||||
this.fire('saved')
|
this.fire('saved')
|
||||||
}
|
}
|
||||||
|
|
||||||
propagate() {
|
|
||||||
let els = document.querySelectorAll('.map-name')
|
|
||||||
for (const el of els) {
|
|
||||||
el.textContent = this.getDisplayName()
|
|
||||||
}
|
|
||||||
const status = this.permissions.getShareStatusDisplay()
|
|
||||||
els = document.querySelectorAll('.share-status')
|
|
||||||
for (const el of els) {
|
|
||||||
if (status) {
|
|
||||||
el.textContent = translate('Visibility: {status}', {
|
|
||||||
status: status,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getDisplayName() {
|
getDisplayName() {
|
||||||
return this.properties.name || translate('Untitled map')
|
return this.properties.name || translate('Untitled map')
|
||||||
}
|
}
|
||||||
|
|
@ -1004,7 +995,13 @@ export default class Umap extends ServerStored {
|
||||||
],
|
],
|
||||||
]
|
]
|
||||||
const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
|
const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
|
||||||
callback: () => this.slideshow.load(),
|
callback: () => {
|
||||||
|
this.slideshow.load()
|
||||||
|
// FIXME when we refactor formbuilder: this callback is called in a 'postsync'
|
||||||
|
// event, which comes after the call of `setter` method, which will call the
|
||||||
|
// map.render method, which should do this redraw.
|
||||||
|
this.bottomBar.redraw()
|
||||||
|
},
|
||||||
umap: this,
|
umap: this,
|
||||||
})
|
})
|
||||||
slideshow.appendChild(slideshowBuilder.build())
|
slideshow.appendChild(slideshowBuilder.build())
|
||||||
|
|
@ -1261,10 +1258,8 @@ export default class Umap extends ServerStored {
|
||||||
}
|
}
|
||||||
|
|
||||||
render(fields) {
|
render(fields) {
|
||||||
if (fields.includes('numberOfConnectedPeers')) {
|
const impacted = this.propagate(fields)
|
||||||
this._leafletMap.renderEditToolbar()
|
if (impacted) return // No need to run a wider reflow
|
||||||
this.propagate()
|
|
||||||
}
|
|
||||||
|
|
||||||
const impacts = Utils.getImpactsFromSchema(fields)
|
const impacts = Utils.getImpactsFromSchema(fields)
|
||||||
for (const impact of impacts) {
|
for (const impact of impacts) {
|
||||||
|
|
@ -1272,7 +1267,8 @@ export default class Umap extends ServerStored {
|
||||||
case 'ui':
|
case 'ui':
|
||||||
this._leafletMap.renderUI()
|
this._leafletMap.renderUI()
|
||||||
this.browser.redraw()
|
this.browser.redraw()
|
||||||
this.propagate()
|
this.topBar.redraw()
|
||||||
|
this.bottomBar.redraw()
|
||||||
break
|
break
|
||||||
case 'data':
|
case 'data':
|
||||||
this.eachVisibleDataLayer((datalayer) => {
|
this.eachVisibleDataLayer((datalayer) => {
|
||||||
|
|
@ -1294,6 +1290,49 @@ export default class Umap extends ServerStored {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This method does a targeted update of the UI,
|
||||||
|
// it whould be merged with `render`` method and the
|
||||||
|
// SCHEMA at some point
|
||||||
|
propagate(fields = []) {
|
||||||
|
const impacts = {
|
||||||
|
'properties.name': () => {
|
||||||
|
Utils.eachElement('.map-name', (el) => {
|
||||||
|
el.textContent = this.getDisplayName()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
user: () => {
|
||||||
|
Utils.eachElement('.umap-user .username', (el) => {
|
||||||
|
if (this.properties.user?.id) {
|
||||||
|
el.textContent = this.properties.user.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
'properties.permissions': () => {
|
||||||
|
const status = this.permissions.getShareStatusDisplay()
|
||||||
|
if (status) {
|
||||||
|
Utils.eachElement('.share-status', (el) => {
|
||||||
|
el.textContent = translate('Visibility: {status}', {
|
||||||
|
status: status,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
numberOfConnectedPeers: () => {
|
||||||
|
Utils.eachElement('.connected-peers span', (el) => {
|
||||||
|
el.textContent = this.sync.getNumberOfConnectedPeers()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
let impacted = false
|
||||||
|
for (const [field, impact] of Object.entries(impacts)) {
|
||||||
|
if (!fields.length || fields.includes(field)) {
|
||||||
|
impact()
|
||||||
|
impacted = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return impacted
|
||||||
|
}
|
||||||
|
|
||||||
// TODO: allow to control the default datalayer
|
// TODO: allow to control the default datalayer
|
||||||
// (edit and viewing)
|
// (edit and viewing)
|
||||||
// cf https://github.com/umap-project/umap/issues/585
|
// cf https://github.com/umap-project/umap/issues/585
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,6 @@ export function checkId(string) {
|
||||||
return /^[A-Za-z0-9]{5}$/.test(string)
|
return /^[A-Za-z0-9]{5}$/.test(string)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function _getPropertyName(field) {
|
function _getPropertyName(field) {
|
||||||
const filtered_field = ['options.', 'properties.'].reduce(
|
const filtered_field = ['options.', 'properties.'].reduce(
|
||||||
(acc, prefix) => acc.replace(prefix, ''),
|
(acc, prefix) => acc.replace(prefix, ''),
|
||||||
|
|
@ -440,3 +438,9 @@ export function deepEqual(object1, object2) {
|
||||||
export function slugify(str) {
|
export function slugify(str) {
|
||||||
return (str || 'data').replace(/[^a-z0-9]/gi, '_').toLowerCase()
|
return (str || 'data').replace(/[^a-z0-9]/gi, '_').toLowerCase()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function eachElement(selector, callback) {
|
||||||
|
for (const el of document.querySelectorAll(selector)) {
|
||||||
|
callback(el)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -389,7 +389,7 @@ U.EditControl = L.Control.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
onAdd: function (map) {
|
onAdd: function (map) {
|
||||||
const container = L.DomUtil.create('div', 'leaflet-control-edit-enable')
|
const container = L.DomUtil.create('div', 'edit-enable')
|
||||||
const enableEditing = L.DomUtil.createButton(
|
const enableEditing = L.DomUtil.createButton(
|
||||||
'',
|
'',
|
||||||
container,
|
container,
|
||||||
|
|
|
||||||
|
|
@ -45,9 +45,6 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
|
||||||
.umap-edit-enabled {
|
.umap-edit-enabled {
|
||||||
--current-header-height: var(--header-height);
|
--current-header-height: var(--header-height);
|
||||||
}
|
}
|
||||||
.umap-caption-bar-enabled {
|
|
||||||
--current-footer-height: var(--footer-height);
|
|
||||||
}
|
|
||||||
.leaflet-top {
|
.leaflet-top {
|
||||||
top: var(--current-header-height);
|
top: var(--current-header-height);
|
||||||
}
|
}
|
||||||
|
|
@ -166,7 +163,7 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
|
||||||
min-height: 23px;
|
min-height: 23px;
|
||||||
height: 23px;
|
height: 23px;
|
||||||
}
|
}
|
||||||
.leaflet-control-edit-enable [type="button"]:before {
|
.edit-enable [type="button"]:before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
@ -175,7 +172,7 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
|
||||||
background-image: url('./img/16-white.svg');
|
background-image: url('./img/16-white.svg');
|
||||||
background-position: -48px -48px;
|
background-position: -48px -48px;
|
||||||
}
|
}
|
||||||
.leaflet-control-edit-enable [type="button"] {
|
.edit-enable [type="button"] {
|
||||||
width: initial;
|
width: initial;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
background-color: #353c3e;
|
background-color: #353c3e;
|
||||||
|
|
@ -187,7 +184,7 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.leaflet-control-toolbar .leaflet-toolbar-icon.dark:hover,
|
.leaflet-control-toolbar .leaflet-toolbar-icon.dark:hover,
|
||||||
.leaflet-control-edit-enable [type="button"]:hover {
|
.edit-enable [type="button"]:hover {
|
||||||
background-color: #4d5759;
|
background-color: #4d5759;
|
||||||
}
|
}
|
||||||
.umap-permanent-credits-container {
|
.umap-permanent-credits-container {
|
||||||
|
|
@ -476,245 +473,12 @@ ul.photon-autocomplete {
|
||||||
.umap-edit-actions li:hover {
|
.umap-edit-actions li:hover {
|
||||||
background-color: #353c3e;
|
background-color: #353c3e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ********************************* */
|
|
||||||
/* Edit main toolbox */
|
|
||||||
/* ********************************* */
|
|
||||||
.umap-main-edit-toolbox [type="button"] {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.2em;
|
|
||||||
border: none;
|
|
||||||
background-color: var(--color-darkGray);
|
|
||||||
width: auto;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox [type="button"]:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-container [type="button"].umap-help-link {
|
|
||||||
font-size: 12px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-save,
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel,
|
|
||||||
.leaflet-container .leaflet-control-edit-disable,
|
|
||||||
.leaflet-container .leaflet-control-connected-peers
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
border: none;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
color: #f8f8f8;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-connected-peers,
|
|
||||||
.dark [type="button"].leaflet-control-connected-peers:hover
|
|
||||||
{
|
|
||||||
background-color: var(--color-lightCyan);
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-container .leaflet-control-edit-disable:before,
|
|
||||||
.leaflet-container .leaflet-control-edit-save:before,
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel:before,
|
|
||||||
.leaflet-container .leaflet-control-connected-peers:before {
|
|
||||||
display: inline-block;
|
|
||||||
width: 19px;
|
|
||||||
height: 24px;
|
|
||||||
background-position: -50px -122px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: url('./img/16-white.svg');
|
|
||||||
vertical-align: middle;
|
|
||||||
content: ' ';
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-container .leaflet-control-connected-peers:before {
|
|
||||||
background-image: url('./img/16.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-container .leaflet-control-edit-disable span,
|
|
||||||
.leaflet-container .leaflet-control-edit-save span,
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel span,
|
|
||||||
.leaflet-container .leaflet-control-connected-peers span{
|
|
||||||
margin-inline-start: 10px;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-save:before {
|
|
||||||
background-position: -148px -2px;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-disable:before {
|
|
||||||
background-position: -50px -25px;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-connected-peers:before {
|
|
||||||
background-position: -2px -95px;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel,
|
|
||||||
.leaflet-container .leaflet-control-edit-disable,
|
|
||||||
.leaflet-container .leaflet-control-connected-peers{
|
|
||||||
border: 0.5px solid rgba(153, 153, 153, 0.40);
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel:hover,
|
|
||||||
.leaflet-container .leaflet-control-edit-disable:hover {
|
|
||||||
border: 0.5px solid rgba(153, 153, 153, 0.80);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-save {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 0.5px solid rgba(153, 153, 153, 0.40);
|
|
||||||
background: rgba(153, 153, 153, 0.10);
|
|
||||||
}
|
|
||||||
.dark [type="button"].leaflet-control-edit-save:hover {
|
|
||||||
background: rgba(153, 153, 153, 0.10);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.umap-is-dirty .leaflet-control-edit-save {
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0.5px solid rgba(66, 236, 230, 0.40);
|
|
||||||
background: rgba(66, 236, 230, 0.10);
|
|
||||||
color: #42ECE6;
|
|
||||||
}
|
|
||||||
.umap-is-dirty .leaflet-control-edit-save:before {
|
|
||||||
background-position: -148px -26px;
|
|
||||||
}
|
|
||||||
.umap-is-dirty .dark [type="button"].leaflet-control-edit-save:hover {
|
|
||||||
border-color: rgba(66, 236, 230, 0.80);
|
|
||||||
background: rgba(66, 236, 230, 0.10);
|
|
||||||
}
|
|
||||||
.leaflet-container .leaflet-control-edit-save,
|
|
||||||
.leaflet-container .leaflet-control-edit-cancel,
|
|
||||||
.leaflet-container .leaflet-control-edit-disable,
|
|
||||||
.umap-edit-enabled .leaflet-control-edit-enable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.umap-edit-enabled .leaflet-control-edit-save,
|
|
||||||
.umap-edit-enabled .leaflet-control-edit-disable,
|
|
||||||
.umap-edit-enabled.umap-is-dirty .leaflet-control-edit-cancel {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.umap-is-dirty .leaflet-control-edit-disable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.umap-caption-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox {
|
|
||||||
top: -46px;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 46px;
|
|
||||||
padding: 0 10px;
|
|
||||||
text-align: start;
|
|
||||||
line-height: var(--control-size);
|
|
||||||
cursor: auto;
|
|
||||||
border-bottom: 1px solid #222;
|
|
||||||
z-index: var(--zindex-panels);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
.umap-left-edit-toolbox,
|
|
||||||
.umap-right-edit-toolbox {
|
|
||||||
display: flex;
|
|
||||||
column-gap: 10px;
|
|
||||||
}
|
|
||||||
.umap-right-edit-toolbox {
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.umap-main-edit-toolbox .logo {
|
|
||||||
width: 39px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .logo a {
|
|
||||||
background-image: url('./img/logo_small.svg');
|
|
||||||
background-position: 0 center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
display: inline-block;
|
|
||||||
width: 39px;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-indent: -9999px;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .map-name {
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .share-status {
|
|
||||||
font-size: 1em;
|
|
||||||
font-style: italic;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.map-name:after {
|
|
||||||
content: '\00a0';
|
|
||||||
padding-inline-start: 3px;
|
|
||||||
width: 1ch;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.umap-is-dirty .map-name:after {
|
|
||||||
content: '*';
|
|
||||||
}
|
|
||||||
.umap-edit-enabled .umap-main-edit-toolbox {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.umap-caption-bar h3,
|
|
||||||
.umap-main-edit-toolbox h3 {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.umap-caption-bar button {
|
|
||||||
margin-inline-start: 10px;
|
|
||||||
}
|
|
||||||
.umap-caption-bar button + button:before {
|
|
||||||
content: '|';
|
|
||||||
padding-inline-end: 10px;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .umap-user {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .umap-user:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.umap-main-edit-toolbox .umap-user:after {
|
|
||||||
content: '|';
|
|
||||||
padding-inline-start: 20px;
|
|
||||||
display: inline-block; /* Prevents underline on hover. */
|
|
||||||
}
|
|
||||||
.umap-caption-bar-enabled .umap-caption-bar {
|
|
||||||
display: block;
|
|
||||||
height: var(--footer-height);
|
|
||||||
background-color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: var(--gutter);
|
|
||||||
text-align: start;
|
|
||||||
line-height: 100%;
|
|
||||||
cursor: auto;
|
|
||||||
border-top: 1px solid var(--color-lightGray);
|
|
||||||
opacity: 0.93;
|
|
||||||
z-index: var(--zindex-panels);
|
|
||||||
}
|
|
||||||
.umap-help {
|
.umap-help {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.umap-datalayer-version {
|
.umap-datalayer-version {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
border-bottom: 1px solid #202425;
|
border-bottom: 1px solid #202425;
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
--color-lightGray: #ddd;
|
--color-lightGray: #ddd;
|
||||||
--color-mediumGray: #3e4444;
|
--color-mediumGray: #3e4444;
|
||||||
--color-darkGray: #323737;
|
--color-darkGray: #323737;
|
||||||
|
--color-darkerGray: #2a2e30;
|
||||||
--color-light: white;
|
--color-light: white;
|
||||||
--color-dark: black;
|
--color-dark: black;
|
||||||
--color-limeGreen: #b9f5d2;
|
--color-limeGreen: #b9f5d2;
|
||||||
|
|
|
||||||
|
|
@ -35,4 +35,5 @@
|
||||||
<link rel="stylesheet" href="{% static 'umap/css/dialog.css' %}" />
|
<link rel="stylesheet" href="{% static 'umap/css/dialog.css' %}" />
|
||||||
<link rel="stylesheet" href="{% static 'umap/css/importers.css' %}" />
|
<link rel="stylesheet" href="{% static 'umap/css/importers.css' %}" />
|
||||||
<link rel="stylesheet" href="{% static 'umap/css/tableeditor.css' %}" />
|
<link rel="stylesheet" href="{% static 'umap/css/tableeditor.css' %}" />
|
||||||
|
<link rel="stylesheet" href="{% static 'umap/css/bar.css' %}" />
|
||||||
<link rel="stylesheet" href="{% static 'umap/theme.css' %}" />
|
<link rel="stylesheet" href="{% static 'umap/theme.css' %}" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue