Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: move ui to dedicated modules #1847

Merged
merged 4 commits into from
May 22, 2024
Merged

chore: move ui to dedicated modules #1847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ddc570
chore: move alert to dedicated module
yohanboniface May 22, 2024
2ed9bc6
chore: move tooltip to a dedicated module
yohanboniface May 22, 2024
8e446db
chore: move panel.js to ui/ subfolder
yohanboniface May 22, 2024
776d92e
chore: add minimal dialog class to replace custom made help box
yohanboniface May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs-users/fr/tutorials/5-multimedia-tooltips.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Panneau d’aide au formatage."
data-caption="Panneau d’aide au formatage."
data-selector=".umap-help-box"
data-selector=".umap-dialog"
data-width="510"
data-height="326"
data-padding="5"
Expand Down
152 changes: 0 additions & 152 deletions umap/static/umap/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,146 +756,6 @@ input[type=hidden].blur + [type="button"] {
}


/* *********** */
/* Alerts */
/* *********** */
#umap-alert-container {
min-height: 46px;
line-height: 46px;
padding-left: 10px;
width: calc(100% - 500px);
position: absolute;
top: -46px;
left: 250px; /* Keep save/cancel button accessible. */
right: 250px;
box-shadow: 0 1px 7px #999999;
visibility: hidden;
background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
font-weight: bold;
color: #fff;
font-size: 0.8em;
z-index: 1012;
border-radius: 2px;
}
#umap-alert-container.error {
background-color: #c60f13;
}
.umap-alert #umap-alert-container {
visibility: visible;
top: 23px;
}
.umap-alert-container .umap-action {
margin-left: 10px;
background-color: #fff;
color: #000;
padding: 5px;
border-radius: 4px;
}
.umap-alert-container .umap-action:hover {
color: #000;
}
.umap-alert-container .error .umap-action {
background-color: #666;
color: #eee;
}
.umap-alert-container .error .umap-action:hover {
color: #fff;
}
.umap-alert-container input {
padding: 5px;
border-radius: 4px;
width: 100%;
}

/* *********** */
/* Tooltip */
/* *********** */
#umap-tooltip-container {
line-height: 20px;
padding: 5px 10px;
width: auto;
position: absolute;
box-shadow: 0 1px 7px #999999;
display: none;
background-color: rgba(40, 40, 40, 0.8);
color: #eeeeec;
font-size: 0.8em;
border-radius: 2px;
z-index: 1011;
font-weight: normal;
max-width: 300px;
}
.umap-tooltip #umap-tooltip-container {
display: block;
}
#umap-tooltip-container.tooltip-top:after {
top: 100%;
left: calc(50% - 11px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: rgba(30, 30, 30, 0.8);
border-width: 11px;
margin-left: calc(-50% + 21px);
}
#umap-tooltip-container.tooltip-bottom:before {
top: -22px;
left: calc(50% - 11px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: rgba(30, 30, 30, 0.7);
border-width: 11px;
transform: rotate(180deg);
}
#umap-tooltip-container.tooltip.tooltip-left:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #333;
border-width: 11px;
margin-top: -10px;
}



/* *********** */
/* Close link */
/* *********** */
#umap-alert-container .umap-close-link {
color: #fff;
float: right;
padding-right: 10px;
width: 100px;
line-height: 1;
margin: .5rem;
background-color: #202425;
font-size: .7rem;
}
#umap-alert-container .umap-close-icon {
background-position: -74px -55px;
}
#umap-alert-container .umap-alert-actions {
display: flex;
margin: 1rem;
}
#umap-alert-container .umap-alert-actions .umap-action {
margin-bottom: 0;
}


/* *********** */
/* Various */
/* *********** */
Expand All @@ -913,15 +773,3 @@ input[type=hidden].blur + [type="button"] {
height: 100vh;
opacity: 0.5;
}


/* *********** */
/* Mobile */
/* *********** */
@media all and (orientation:portrait) {
#umap-alert-container {
width: 100%;
left: 0;
right: 0;
}
}
75 changes: 75 additions & 0 deletions umap/static/umap/css/alert.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
#umap-alert-container {
min-height: 46px;
line-height: 46px;
padding-left: 10px;
width: calc(100% - 500px);
position: absolute;
top: -46px;
left: 250px; /* Keep save/cancel button accessible. */
right: 250px;
box-shadow: 0 1px 7px #999999;
visibility: hidden;
background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
font-weight: bold;
color: #fff;
font-size: 0.8em;
z-index: 1012;
border-radius: 2px;
}
#umap-alert-container.error {
background-color: #c60f13;
}
.umap-alert #umap-alert-container {
visibility: visible;
top: 23px;
}
#umap-alert-container .umap-action {
margin-left: 10px;
background-color: #fff;
color: #000;
padding: 5px;
border-radius: 4px;
}
#umap-alert-container .umap-action:hover {
color: #000;
}
#umap-alert-container .error .umap-action {
background-color: #666;
color: #eee;
}
#umap-alert-container .error .umap-action:hover {
color: #fff;
}
#umap-alert-container input {
padding: 5px;
border-radius: 4px;
width: 100%;
}
#umap-alert-container .umap-close-link {
color: #fff;
float: right;
padding-right: 10px;
width: 100px;
line-height: 1;
margin: .5rem;
background-color: #202425;
font-size: .7rem;
}
#umap-alert-container .umap-close-icon {
background-position: -74px -55px;
}
#umap-alert-container .umap-alert-actions {
display: flex;
margin: 1rem;
}
#umap-alert-container .umap-alert-actions .umap-action {
margin-bottom: 0;
}

@media all and (orientation:portrait) {
#umap-alert-container {
width: 100%;
left: 0;
right: 0;
}
}
17 changes: 17 additions & 0 deletions umap/static/umap/css/dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.umap-dialog {
z-index: 10001;
margin: auto;
margin-top: 100px;
width: 50vw;
max-width: 100vw;
max-height: 50vh;
padding: 20px;
border: 1px solid #222;
background-color: var(--background-color);
color: var(--text-color);
border-radius: 5px;
}
.umap-dialog .umap-close-link {
float: right;
width: 100px;
}
2 changes: 1 addition & 1 deletion umap/static/umap/css/panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
overflow-x: auto;
z-index: 1010;
background-color: var(--background-color);
color: var(--text-color);
opacity: 0.98;
cursor: initial;
border-radius: 5px;
border: 1px solid var(--color-lightGray);
}
.panel.dark {
border: 1px solid #222;
color: #efefef;
}
.panel.full {
width: initial;
Expand Down
59 changes: 59 additions & 0 deletions umap/static/umap/css/tooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
#umap-tooltip-container {
line-height: 20px;
padding: 5px 10px;
width: auto;
position: absolute;
box-shadow: 0 1px 7px #999999;
display: none;
background-color: rgba(40, 40, 40, 0.8);
color: #eeeeec;
font-size: 0.8em;
border-radius: 2px;
z-index: 1011;
font-weight: normal;
max-width: 300px;
}
.umap-tooltip #umap-tooltip-container {
display: block;
}
#umap-tooltip-container.tooltip-top:after {
top: 100%;
left: calc(50% - 11px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: rgba(30, 30, 30, 0.8);
border-width: 11px;
margin-left: calc(-50% + 21px);
}
#umap-tooltip-container.tooltip-bottom:before {
top: -22px;
left: calc(50% - 11px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: rgba(30, 30, 30, 0.7);
border-width: 11px;
transform: rotate(180deg);
}
#umap-tooltip-container.tooltip.tooltip-left:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #333;
border-width: 11px;
margin-top: -10px;
}

8 changes: 7 additions & 1 deletion umap/static/umap/js/modules/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import URLs from './urls.js'
import Browser from './browser.js'
import Facets from './facets.js'
import Caption from './caption.js'
import { Panel, EditPanel, FullPanel } from './panel.js'
import { Panel, EditPanel, FullPanel } from './ui/panel.js'
import Alert from './ui/alert.js'
import Dialog from './ui/dialog.js'
import Tooltip from './ui/tooltip.js'
import * as Utils from './utils.js'
import { SCHEMA } from './schema.js'
import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js'
Expand All @@ -21,6 +24,9 @@ window.U = {
Browser,
Facets,
Panel,
Alert,
Dialog,
Tooltip,
EditPanel,
FullPanel,
Utils,
Expand Down
Loading
Loading