@geogirafe/lib-geoportal 1.1.0-dev.2450216121 → 1.1.0-dev.2450277666
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,7 +16,7 @@ class ThemeComponent extends GirafeHTMLElement {
|
|
|
16
16
|
</style><style>
|
|
17
17
|
.themes{background-color:var(--bkg-color);border:1px solid #444;border-radius:3px;flex-flow:column;width:58rem;max-height:70vh;margin-top:0;padding:1rem;display:flex;position:absolute;overflow-y:auto}#close-themes-menu{z-index:-1;background:0 0;width:100vw;height:100vh;display:none;position:absolute;top:0;left:0}#active-themes{flex-flow:wrap;flex:1;justify-content:flex-start;display:flex}.theme-card{border:var(--app-standard-border);background-color:#0000;border-radius:6px;flex-direction:column;align-items:center;width:7rem;height:9rem;margin:.25rem;padding:.25rem;display:flex;&:hover{cursor:pointer;background-color:var(--bkg-color-grad2)}& img.theme-favorite{content:url(icons/favorite-no.svg);align-self:flex-start;width:1.5rem;height:1.5rem;&:hover{content:url(icons/favorite-add.svg)}&.yes{content:url(icons/favorite-yes.svg);&:hover{content:url(icons/favorite-remove.svg)}}&.placeholder{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)}}& img.delete-icon{content:url(icons/close.svg);align-self:flex-end;width:1.5rem;height:1.5rem;margin-top:-1.5rem;&.placeholder{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)}}& img.theme-icon{max-width:5rem;max-height:2.5rem;margin-top:1.25rem;margin-bottom:1.25rem}&.selected{background-color:var(--bkg-color-grad1);border:solid 1px var(--text-color)}& span.theme-name{text-align:center;word-break:break-word;max-width:6rem;color:var(--text-color);max-height:2.2rem;line-height:1.1rem;overflow:hidden}}.theme,.custom-theme,.new-theme{cursor:pointer;background-color:#0000;border:none;border-radius:.5rem;align-content:flex-end;width:8rem;margin:.5rem;padding:0;position:relative}.themes>button>span,.custom-theme>button>span,.new-theme>button>span{text-align:center;width:95%;color:var(--text-color);display:inline-block}.themes>button>span,.custom-theme>button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.theme>img,.custom-theme>button>img,.new-theme>img{max-width:100%}button.select{cursor:pointer;background-color:#0000;border:none;width:100%;padding:0}button.select>img{height:3rem;margin-bottom:1rem}button.delete{position:absolute;top:0;right:0}.theme.selected,.custom-theme.selected{background-color:var(--bkg-color-grad2)}.theme-icon{--svg-filter:none}#themes-type-chooser{flex:1;justify-content:space-between;display:flex}.gg-tabs{flex-grow:1;margin:0}
|
|
18
18
|
</style>
|
|
19
|
-
<button class="gg-icon-button gg-big-withtext" tip="Theme selection" onclick="${() => this.toggleThemesList()}" part="themes-button"><img alt="menu-icon" src="icons/themes.svg" class="${(!this.state.loading ? (this.openedOnce ? '' : 'gg-spin-wait') : 'hidden')}"> <img alt="loading-icon" src="icons/loading.svg" class="${(this.state.loading ? 'gg-spin' : 'hidden')}"> <span i18n="Themes">Themes</span></button><div class="${(this.menuOpen ? 'themes' : 'hidden')}" part="themes-content"><div id="themes-type-chooser"><div class="gg-tabs">${Object.values(ThemeTypes).map((themeType) => uHtml ` <button id="${'choose-themes-type-' + themeType}" i18n="${'themes-type-' + themeType}" class="${this.isThemeTypeActive(themeType) ? 'gg-tab active' : 'gg-tab'}" .active="${this.isThemeTypeActive(themeType)}" onclick="${() => this.activateThemeType(themeType)}"></button> `)}</div></div><div id="active-themes">${Object.values(this.activeThemes).map(theme => uHtmlFor(theme, theme.id) `<div role="button" tabindex="0" class="${this.isThemeActive(theme) ? 'theme-card selected' : 'theme-card'}" onkeyup="${() => this.onThemeChanged(theme)}" onclick="${() => this.onThemeChanged(theme)}" part="theme-card"><img class="${this.isThemeFavorite(theme) ? 'theme-favorite yes' : 'theme-favorite'}" tip="themes-add-remove-favorites" alt="themes-add-remove-favorites" src="" onclick="${(e) => this.onThemeFavoriteChanged(theme, e)}" onkeyup="${(e) => this.onThemeFavoriteChanged(theme, e)}"> <img class="${this.isCustomTheme(theme) ? 'delete-icon' : 'delete-icon placeholder'}" onclick="${(e) => this.onDeleteCustomTheme(theme, e)}" onkeyup="${(e) => this.onDeleteCustomTheme(theme, e)}" alt="delete-icon" src=""> <img class="theme-icon" alt="${'Icon for ' + theme.name}" src="${theme.icon}" part="theme-icon"> <span i18n="${theme.name}" class="theme-name" part="theme-name">${theme.name}</span></div>`)}<div role="button" tabindex="0" class="${this.isThemeTypeActive('custom') ? 'theme-card' : 'hidden'}" onclick="${() => this.onAddCustomTheme()}" onkeyup="${() => this.onAddCustomTheme()}"><img class="theme-favorite placeholder" src="" alt="" disabled="disabled"> <img class="theme-icon" alt="Create custom theme" src="${this.newIcon}" tip="Save the current layer configuration as new theme"> <span i18n="Create custom theme" class="theme-name">Create custom theme</span></div></div></div><div id="close-themes-menu" onclick="${() => this.onBlur()}"></div>`;
|
|
19
|
+
<button class="gg-icon-button gg-big-withtext" tip="Theme selection" onclick="${() => this.toggleThemesList()}" part="themes-button"><img alt="menu-icon" src="icons/themes.svg" class="${(!this.state.loading ? (this.openedOnce ? '' : 'gg-spin-wait') : 'hidden')}"> <img alt="loading-icon" src="icons/loading.svg" class="${(this.state.loading ? 'gg-spin' : 'hidden')}"> <span i18n="Themes">Themes</span></button><div class="${(this.menuOpen ? 'themes' : 'hidden')}" part="themes-content"><div id="themes-type-chooser"><div class="gg-tabs">${Object.values(ThemeTypes).map((themeType) => uHtml ` <button id="${'choose-themes-type-' + themeType}" i18n="${'themes-type-' + themeType}" class="${this.isThemeTypeActive(themeType) ? 'gg-tab active' : 'gg-tab'}" .active="${this.isThemeTypeActive(themeType)}" onclick="${() => this.activateThemeType(themeType)}"></button> `)}</div></div><div id="active-themes">${Object.values(this.activeThemes).map(theme => uHtmlFor(theme, theme.id) `<div role="button" tabindex="0" class="${this.isThemeActive(theme) ? 'theme-card selected' : 'theme-card'}" onkeyup="${() => this.onThemeChanged(theme)}" onclick="${() => this.onThemeChanged(theme)}" part="theme-card"><img class="${this.isThemeFavorite(theme) ? 'theme-favorite yes' : 'theme-favorite'}" part="theme-favorite" tip="themes-add-remove-favorites" alt="themes-add-remove-favorites" src="" onclick="${(e) => this.onThemeFavoriteChanged(theme, e)}" onkeyup="${(e) => this.onThemeFavoriteChanged(theme, e)}"> <img class="${this.isCustomTheme(theme) ? 'delete-icon' : 'delete-icon placeholder'}" part="theme-delete" onclick="${(e) => this.onDeleteCustomTheme(theme, e)}" onkeyup="${(e) => this.onDeleteCustomTheme(theme, e)}" alt="delete-icon" src=""> <img class="theme-icon" alt="${'Icon for ' + theme.name}" src="${theme.icon}" part="theme-icon"> <span i18n="${theme.name}" class="theme-name" part="theme-name">${theme.name}</span></div>`)}<div role="button" tabindex="0" class="${this.isThemeTypeActive('custom') ? 'theme-card' : 'hidden'}" onclick="${() => this.onAddCustomTheme()}" onkeyup="${() => this.onAddCustomTheme()}"><img class="theme-favorite placeholder" src="" alt="" disabled="disabled"> <img class="theme-icon" alt="Create custom theme" src="${this.newIcon}" tip="Save the current layer configuration as new theme"> <span i18n="Create custom theme" class="theme-name">Create custom theme</span></div></div></div><div id="close-themes-menu" onclick="${() => this.onBlur()}"></div>`;
|
|
20
20
|
};
|
|
21
21
|
newIcon = NewIcon;
|
|
22
22
|
menuOpen = false;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"1.1.0-dev.
|
|
1
|
+
{"version":"1.1.0-dev.2450277666", "build":"2450277666", "date":"13/04/2026"}
|