almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-28 19:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: better styling for star button in caption panel

Browse source 
Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-01-27 16:50:27 +01:00
parent 8603774778
commit 250579eaa2
11 changed files with 30 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
umap/static/umap/base.css
View file

@ -46,7 +46,7 @@ h3, h4, h5 {
margin-bottom: 14px; margin-bottom: 14px;
} }
p { p {
line-height: 21px; line-height: 1.4;
margin-top: 14px; margin-top: 14px;
margin-bottom: 14px; margin-bottom: 14px;
} }

12
umap/static/umap/css/bar.css
View file

@ -1,7 +1,6 @@
.umap-main-edit-toolbox [type=button] { .umap-main-edit-toolbox [type=button] {
color: #fff; color: #fff;
font-size: 1em; font-size: 1em;
border: none;
background-color: var(--color-darkGray); background-color: var(--color-darkGray);
width: auto; width: auto;
margin-bottom: 0; margin-bottom: 0;
@ -11,7 +10,7 @@
} }
.leaflet-container [type=button].umap-help-link { .leaflet-container [type=button].umap-help-link {
padding-bottom: 3px; padding: 0 var(--text-margin);
background-color: inherit; background-color: inherit;
} }
.leaflet-container .edit-save, .leaflet-container .edit-save,
@ -20,8 +19,6 @@
.leaflet-container .connected-peers .leaflet-container .connected-peers
{ {
display: block; display: block;
border: none;
border-radius: 20px;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
padding: 0 20px; padding: 0 20px;
@ -37,11 +34,6 @@
color: var(--color-darkGray); color: var(--color-darkGray);
} }
.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-cancel:hover,
.leaflet-container .edit-disable:hover { .leaflet-container .edit-disable:hover {
border: 0.5px solid rgba(153, 153, 153, 0.80); border: 0.5px solid rgba(153, 153, 153, 0.80);
@ -120,7 +112,7 @@
column-gap: 10px; column-gap: 10px;
} }
.umap-right-edit-toolbox { .umap-right-edit-toolbox {
align-items: baseline; align-items: center;
} }
.umap-main-edit-toolbox .logo { .umap-main-edit-toolbox .logo {

22
umap/static/umap/css/form.css
View file

@ -76,15 +76,14 @@ select[multiple="multiple"] {
.button, .button,
[type="button"], [type="button"],
input[type="submit"] { input[type="submit"] {
display: block; display: flex;
align-items: center;
margin-bottom: 14px; margin-bottom: 14px;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
padding: 7px 14px; padding: 3px 12px;
min-height: 32px;
line-height: 32px;
border: none; border: none;
text-decoration: none; text-decoration: none;
background-color: white; background-color: white;
@ -132,6 +131,11 @@ button.flat:hover,
.dark [type="button"].flat:hover { .dark [type="button"].flat:hover {
text-decoration: underline; text-decoration: underline;
} }
.dark button.round,
button.round {
border-radius: 20px;
border: 0.5px solid rgba(153, 153, 153, 0.40);
}
.help-text, .helptext { .help-text, .helptext {
display: block; display: block;
padding: 7px 7px; padding: 7px 7px;
@ -572,17 +576,11 @@ input.blur {
border-start-end-radius: 0; border-start-end-radius: 0;
border-end-end-radius: 0; border-end-end-radius: 0;
} }
.blur + .button:before,
.blur + [type="button"]:before {
content: '✔';
}
.blur + .button, .blur + .button,
.blur + [type="button"] { .blur + [type="button"] {
width: 40px; width: 40px;
height: 18px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: 18px;
border-start-start-radius: 0; border-start-start-radius: 0;
border-end-start-radius: 0; border-end-start-radius: 0;
box-sizing: border-box; box-sizing: border-box;
@ -591,6 +589,10 @@ input[type=hidden].blur + .button,
input[type=hidden].blur + [type="button"] { input[type=hidden].blur + [type="button"] {
display: none; display: none;
} }
.blur-container {
display: flex;
align-items: stretch;
}
.copiable-input { .copiable-input {
display: flex; display: flex;
align-items: end; align-items: end;

4
umap/static/umap/css/icon.css
View file

@ -17,11 +17,11 @@
background-image: url('../img/24.svg'); background-image: url('../img/24.svg');
--tile: -36px; --tile: -36px;
height: 36px; height: 36px;
line-height: 36px;
width: 36px; width: 36px;
} }
.icon + span { .icon + span {
margin-inline-start: 10px; margin-inline-start: 5px;
margin-inline-end: 5px;
} }
html[dir="rtl"] .icon { html[dir="rtl"] .icon {
transform: scaleX(-1); transform: scaleX(-1);

3
umap/static/umap/css/panel.css
View file

@ -42,7 +42,8 @@
padding: var(--panel-gutter); padding: var(--panel-gutter);
} }
.panel h3 { .panel h3 {
line-height: 120%; display: flex;
align-items: center;
} }
.panel .counter::before { .panel .counter::before {
counter-increment: step; counter-increment: step;

2
umap/static/umap/js/modules/caption.js
View file

@ -10,7 +10,7 @@ const TEMPLATE = `
<h3><span class="map-name" data-ref="name"></span></h3> <h3><span class="map-name" data-ref="name"></span></h3>
<p class="dates" data-ref="dates"></p> <p class="dates" data-ref="dates"></p>
<p data-ref="author"></p> <p data-ref="author"></p>
<button type="button" data-ref="star"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button> <p><button type="button" class="round" data-ref="star" title="${translate('Star this map')}"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button></p>
</hgroup> </hgroup>
</div> </div>
<div class="umap-map-description text" data-ref="description"></div> <div class="umap-map-description text" data-ref="description"></div>

10
umap/static/umap/js/modules/form/fields.js
View file

@ -217,7 +217,7 @@ Fields.BlurInput = class extends Fields.Input {
} }
getTemplate() { getTemplate() {
return `${super.getTemplate()}<span class="button blur-button"></span>` return `<div class="blur-container">${super.getTemplate()}<button type="button">✔</button></div>`
} }
build() { build() {
@ -856,10 +856,10 @@ Fields.IconUrl = class extends Fields.BlurInput {
} }
buildInput(parent, value) { buildInput(parent, value) {
const input = Utils.loadTemplate('<input class="blur" />') const [element, { input }] = Utils.loadTemplateWithRefs(
const button = Utils.loadTemplate('<span class="button blur-button"></span>') '<div class="blur-container"><input class="blur" data-ref="input" /><button type="button">✔</button></div>'
parent.appendChild(input) )
parent.appendChild(button) parent.appendChild(element)
if (value) input.value = value if (value) input.value = value
input.addEventListener('blur', () => { input.addEventListener('blur', () => {
// Do not clear this.input when focus-blur // Do not clear this.input when focus-blur

6
umap/static/umap/js/modules/ui/bar.js
View file

@ -7,8 +7,8 @@ const TOP_BAR_TEMPLATE = `
<div class="umap-main-edit-toolbox with-transition dark"> <div class="umap-main-edit-toolbox with-transition dark">
<div class="umap-left-edit-toolbox" data-ref="left"> <div class="umap-left-edit-toolbox" data-ref="left">
<div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div> <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="map-name flat" type="button" data-ref="name"></button>
<button class="share-status" type="button" data-ref="share"></button> <button class="share-status flat" type="button" data-ref="share"></button>
</div> </div>
<div class="umap-right-edit-toolbox" data-ref="right"> <div class="umap-right-edit-toolbox" data-ref="right">
<button class="connected-peers round" type="button" data-ref="peers"> <button class="connected-peers round" type="button" data-ref="peers">
@ -19,7 +19,7 @@ const TOP_BAR_TEMPLATE = `
<i class="icon icon-16 icon-profile"></i> <i class="icon icon-16 icon-profile"></i>
<span class="username" data-ref="username"></span> <span class="username" data-ref="username"></span>
</button> </button>
<button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button> <button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
<button class="edit-cancel round" type="button" data-ref="cancel"> <button class="edit-cancel round" type="button" data-ref="cancel">
<i class="icon icon-16 icon-restore"></i> <i class="icon icon-16 icon-restore"></i>
<span class="">${translate('Cancel edits')}</span> <span class="">${translate('Cancel edits')}</span>

2
umap/static/umap/js/modules/umap.js
View file

@ -1364,7 +1364,7 @@ export default class Umap extends ServerStored {
el.classList.toggle('icon-star', !this.properties.starred) el.classList.toggle('icon-star', !this.properties.starred)
}) })
Utils.eachElement('.map-stars', (el) => { Utils.eachElement('.map-stars', (el) => {
el.textContent = this.properties.stars || translate('Star this map') el.textContent = this.properties.stars || 0
}) })
}, },
} }

1
umap/static/umap/map.css
View file

@ -700,7 +700,6 @@ a.umap-control-caption,
.umap-caption hgroup p, .umap-caption hgroup p,
.umap-caption hgroup button { .umap-caption hgroup button {
margin: 0; margin: 0;
padding: 0;
} }
.umap-browser .main-toolbox { .umap-browser .main-toolbox {
padding-left: 4px; /* Align with toolbox below */ padding-left: 4px; /* Align with toolbox below */

2
umap/tests/integration/test_edit_map.py
View file

@ -191,7 +191,7 @@ def test_sortkey_impacts_datalayerindex(map, live_server, page):
page.locator('input[name="sortKey"]').fill("key") page.locator('input[name="sortKey"]').fill("key")
# Click the checkmark to apply the changes # Click the checkmark to apply the changes
page.locator(".panel .umap-field-sortKey .blur-button").click() page.locator(".panel .umap-field-sortKey .blur-container button").click()
# Features should be sorted by key (First, Second, Third) # Features should be sorted by key (First, Second, Third)
first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0) first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0)