chore: move editToolBar and captionBar to modules

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).
umap-project · Nov 18, 2024 · d75268f · d75268f
1 parent 7de3ebd
commit d75268f
Show file tree

Hide file tree

Showing 11 changed files with 514 additions and 489 deletions.
diff --git a/umap/static/umap/css/bar.css b/umap/static/umap/css/bar.css
@@ -0,0 +1,233 @@
+.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 .edit-save,
+.leaflet-container .edit-cancel,
+.leaflet-container .edit-disable,
+.leaflet-container .connected-peers
+{
+    display: block;
+    border: none;
+    font-size: 12px;
+    border-radius: 20px;
+    color: #f8f8f8;
+    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-disable:before,
+.leaflet-container .edit-save:before,
+.leaflet-container .edit-cancel:before,
+.leaflet-container .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 .connected-peers:before {
+    background-image: url('../img/16.svg');
+}
+
+.leaflet-container .edit-disable span,
+.leaflet-container .edit-save span,
+.leaflet-container .edit-cancel span,
+.leaflet-container .connected-peers span{
+    margin-inline-start: 10px;
+}
+.leaflet-container .edit-save:before {
+    background-position: -148px -2px;
+}
+.leaflet-container .edit-disable:before {
+    background-position: -50px -25px;
+}
+.leaflet-container .connected-peers:before {
+    background-position: -2px -95px;
+}
+.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);
+}
+.dark [type="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: #42ECE6;
+}
+.umap-is-dirty .edit-save:before {
+    background-position: -148px -26px;
+}
+.umap-is-dirty .dark [type="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 {
+    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-caption-bar-enabled {
+    --current-footer-height: var(--footer-height);
+}
diff --git a/umap/static/umap/js/modules/help.js b/umap/static/umap/js/modules/help.js
@@ -226,13 +226,6 @@ export default class Help {
     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) {
     for (const element of container.querySelectorAll('[data-help]')) {
       this.button(element, element.dataset.help.split(','))

diff --git a/umap/static/umap/js/modules/permissions.js b/umap/static/umap/js/modules/permissions.js
@@ -27,6 +27,10 @@ export class MapPermissions extends ServerStored {
     )
   }
 
+  render() {
+    this._umap.render(['properties.permissions'])
+  }
+
   isOwner() {
     return Boolean(this._umap.properties.user?.is_owner)
   }