Skip to content

Commit

Permalink
Merge pull request #1847 from umap-project/ui-to-modules
Browse files Browse the repository at this point in the history
chore: move ui to dedicated modules
  • Loading branch information
davidbgk authored May 22, 2024
2 parents ef705a8 + 776d92e commit d6a20b3
Show file tree
Hide file tree
Showing 32 changed files with 487 additions and 466 deletions.
2 changes: 1 addition & 1 deletion docs-users/fr/tutorials/5-multimedia-tooltips.md
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
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
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
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
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
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
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

0 comments on commit d6a20b3

Please sign in to comment.