Halfway removing the fullscreenmessage
This commit is contained in:
pietervdvn
parent
81f0a21076
commit
e1a4c75391
9 changed files with 88 additions and 92 deletions
|
|
@ -85,8 +85,8 @@ export default class AllTranslationAssets {
|
|||
fsIncludeCurrentLocation: new Translation( {"en":"Include current location","es":"Incluir localización actual","ca":"Incloure localització actual","nl":"Start op de huidige locatie","fr":"Inclure l'emplacement actuel","de":"Aktuelle Position einbeziehen"} ),
|
||||
},
|
||||
morescreen: { intro: new Translation( {"en":"<h3>More thematic maps?</h3>Do you enjoy collecting geodata? <br/>There are more themes available.","ca":"<h3>Més peticions</h3>T'agrada captar dades? <br/>Hi ha més capes disponibles.","es":"<h3>Más peticiones</h3>Te gusta captar datos? <br/>Hay más capas disponibles.","fr":"<h3>Plus de thèmes </h3>Vous aimez collecter des données? <br/>Il y a plus de thèmes disponibles.","nl":"<h3>Meer thematische kaarten</h3>Vind je het leuk om geodata te verzamelen? <br/> Hier vind je meer kaartthemas.","gl":"<h3>Máis tarefas</h3>Góstache captar datos? <br/>Hai máis capas dispoñíbeis.","de":"<h3>Weitere Quests</h3>Sammeln Sie gerne Geodaten? <br/>Es sind weitere Themen verfügbar."} ),
|
||||
requestATheme: new Translation( {"en":"If you want a custom-built quest, request it <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>here</a>","ca":"Si vols que et fem una petició pròpia , demana-la <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","es":"Si quieres que te hagamos una petición propia , pídela <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","nl":"Wil je een eigen kaartthema, vraag dit <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>hier aan</a>","fr":"Si vous voulez une autre carte thématique, demande-la <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>ici</a>","gl":"Se queres que che fagamos unha tarefa propia , pídea <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>hier</a> anfragen"} ),
|
||||
streetcomplete: new Translation( {"en":"Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","ca":"Una altra aplicació similar és <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","es":"Otra aplicación similar es <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","fr":"Une autre application similaire est <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","nl":"Een andere, gelijkaardige Android-applicatie is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","gl":"Outra aplicación semellante é <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","de":"Eine andere, ähnliche Anwendung ist <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"} ),
|
||||
requestATheme: new Translation( {"en":"If you want a custom-built quest, request it <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>here</a>.","ca":"Si vols que et fem una petició pròpia , demana-la <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","es":"Si quieres que te hagamos una petición propia , pídela <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","nl":"Wil je een eigen kaartthema, vraag dit <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>hier aan</a>.","fr":"Si vous voulez une autre carte thématique, demande-la <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>ici</a>.","gl":"Se queres que che fagamos unha tarefa propia , pídea <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>hier</a> anfragen."} ),
|
||||
streetcomplete: new Translation( {"en":"Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>..","ca":"Una altra aplicació similar és <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","es":"Otra aplicación similar es <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","fr":"Une autre application similaire est <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","nl":"Een andere, gelijkaardige Android-applicatie is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","gl":"Outra aplicación semellante é <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","de":"Eine andere, ähnliche Anwendung ist <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>."} ),
|
||||
createYourOwnTheme: new Translation( {"en":"Create your own MapComplete theme from scratch","ca":"Crea la teva pròpia petició completa de MapComplete des de zero.","es":"Crea tu propia petición completa de MapComplete desde cero.","nl":"Maak je eigen MapComplete-kaart","fr":"Créez votre propre MapComplete carte","gl":"Crea o teu propio tema completo do MapComplete dende cero.","de":"Erstellen Sie Ihr eigenes MapComplete-Thema von Grund auf neu"} ),
|
||||
},
|
||||
readYourMessages: new Translation( {"en":"Please, read all your OpenStreetMap-messages before adding a new point.","ca":"Llegeix tots els teus missatges d'OpenStreetMap abans d'afegir nous punts.","es":"Lee todos tus mensajes de OpenStreetMap antes de añadir nuevos puntos.","nl":"Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen.","fr":"Merci de lire tous vos messages sur OpenStreetMap avant d'ajouter un nouveau point.","gl":"Le todos a túas mensaxes do OpenStreetMap antes de engadir novos puntos.","de":"Bitte lesen Sie alle Ihre OpenStreetMap-Nachrichten, bevor Sie einen neuen Punkt hinzufügen"} ),
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ export class InitUiElements {
|
|||
.onClick(() => {/*Catch the click*/
|
||||
})]),
|
||||
help
|
||||
, true
|
||||
, isOpened
|
||||
).AttachTo("messagesbox");
|
||||
const openedTime = new Date().getTime();
|
||||
State.state.locationControl.addCallback(() => {
|
||||
|
|
@ -249,20 +249,21 @@ export class InitUiElements {
|
|||
private static InitLayerSelection() {
|
||||
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
|
||||
|
||||
const layerControlPanel = new LayerControlPanel(() => State.state.layerControlIsOpened.setData(false))
|
||||
.SetStyle("display:block;padding:0.75em;border-radius:1em;");
|
||||
const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);")
|
||||
const layerControlPanel = new LayerControlPanel(
|
||||
() => State.state.layerControlIsOpened.setData(false))
|
||||
.SetClass("block p-1 rounded-full");
|
||||
const closeButton = Svg.close_svg()
|
||||
.SetClass("layer-selection-toggle")
|
||||
.SetStyle(" background: var(--subtle-detail-color);")
|
||||
const checkbox = new CheckBox(
|
||||
new Combine([
|
||||
closeButton,
|
||||
layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
|
||||
.SetClass("hidden-on-mobile")
|
||||
layerControlPanel])
|
||||
.SetClass("flex flex-row")
|
||||
,
|
||||
Svg.layers_svg().SetClass("layer-selection-toggle"),
|
||||
State.state.layerControlIsOpened
|
||||
);
|
||||
|
||||
checkbox.AttachTo("layer-selection");
|
||||
).AttachTo("layer-selection");
|
||||
|
||||
|
||||
State.state.locationControl
|
||||
|
|
|
|||
2
Svg.ts
2
Svg.ts
|
|
@ -255,7 +255,7 @@ export default class Svg {
|
|||
public static ring_ui() { return new FixedUiElement(Svg.ring_img);}
|
||||
|
||||
public static search = " <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"> <g id=\"search\"> <path id=\"magnifying-glass\" d=\"M1.63 9.474L4.006 7.1l.17-.1a3.45 3.45 0 0 1-.644-2.01A3.478 3.478 0 1 1 7.01 8.47 3.43 3.43 0 0 1 5 7.822l-.098.17-2.375 2.373c-.19.188-.543.142-.79-.105s-.293-.6-.104-.79zm5.378-2.27A2.21 2.21 0 1 0 4.8 4.994 2.21 2.21 0 0 0 7.01 7.21z\"/> </g> </svg>"
|
||||
public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl')
|
||||
public static search_img = Img.AsImageElement(Svg.search)
|
||||
public static search_svg() { return new FixedUiElement(Svg.search);}
|
||||
public static search_ui() { return new FixedUiElement(Svg.search_img);}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,5 +28,4 @@ export default class LazyElement extends UIElement {
|
|||
return this._content.InnerRender();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -9,33 +9,62 @@ import Ornament from "./Ornament";
|
|||
*/
|
||||
export default class ScrollableFullScreen extends UIElement {
|
||||
private _component: UIElement;
|
||||
|
||||
private elementsToRestore: Set<HTMLElement> = new Set<HTMLElement>();
|
||||
|
||||
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
|
||||
super();
|
||||
this.dumbMode = false;
|
||||
const returnToTheMap = Svg.back_svg().onClick(() => {
|
||||
onClose();
|
||||
}) .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
|
||||
console.log("Clicked back!");
|
||||
this.RestoreLeaflet();
|
||||
if (onClose() !== undefined) {
|
||||
console.error("WARNING: onClose is not defined")
|
||||
onClose();
|
||||
}
|
||||
}).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
|
||||
|
||||
title.SetClass("block w-full")
|
||||
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
|
||||
.SetClass("block sm:hidden h-5")
|
||||
|
||||
|
||||
this._component = new Combine([
|
||||
|
||||
this._component =
|
||||
new Combine([
|
||||
new Combine([
|
||||
new Combine([returnToTheMap, title])
|
||||
.AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
|
||||
.AddClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
|
||||
new Combine(["<span>", content, "</span>", ornament])
|
||||
.SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
|
||||
.SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
|
||||
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
|
||||
]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
|
||||
]).SetClass("block flex flex-col relative bg-white")
|
||||
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto");
|
||||
|
||||
}
|
||||
|
||||
|
||||
InnerRender(): string {
|
||||
return this._component.Render();
|
||||
}
|
||||
|
||||
protected InnerUpdate(htmlElement: HTMLElement) {
|
||||
|
||||
do {
|
||||
// A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
|
||||
if (htmlElement.style.transform !== "") {
|
||||
this.elementsToRestore.add(htmlElement);
|
||||
htmlElement.classList.add("no-transform")
|
||||
}
|
||||
htmlElement = htmlElement.parentElement;
|
||||
} while (htmlElement != null)
|
||||
|
||||
super.InnerUpdate(htmlElement);
|
||||
}
|
||||
|
||||
private RestoreLeaflet() {
|
||||
this.elementsToRestore.forEach(
|
||||
el => el.classList.remove("no-transform")
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -31,9 +31,7 @@ export default class LayerControlPanel extends UIElement {
|
|||
|
||||
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
|
||||
|
||||
this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
|
||||
onClose
|
||||
});
|
||||
this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose);
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
|
|
|||
|
|
@ -1,56 +1,4 @@
|
|||
|
||||
<<<<<<< HEAD
|
||||
.featureinfobox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.featureinfobox-icons img {
|
||||
max-height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.featureinfobox-icons {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.featureinfobox-icons span {
|
||||
display: inline-block;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
|
||||
.featureinfobox-titlebar {
|
||||
border-bottom: 2px solid var(--foreground-color);
|
||||
box-shadow: 0 10px 10px -10px var(--shadow-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.featureinfobox-titlebar-title {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-grow: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.featureinfobox-back-to-the-map {
|
||||
padding: 0.5em;
|
||||
border-radius: 999em;
|
||||
margin-right: 0.4em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: var(--subtle-detail-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
=======
|
||||
>>>>>>> master
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-height: 600px) and (min-width: 600px) {
|
||||
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
|
||||
.landscape\:max-h-screen {
|
||||
|
|
@ -127,7 +75,7 @@
|
|||
border-radius: 0.5em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
margin: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
|
|
|||
47
index.css
47
index.css
|
|
@ -3,18 +3,44 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
@variants responsive {
|
||||
.max-h-65vh {
|
||||
max-height: 65vh;
|
||||
@variants responsive {
|
||||
.max-h-65vh {
|
||||
max-height: 65vh;
|
||||
}
|
||||
|
||||
.max-h-20vh {
|
||||
max-height: 20vh;
|
||||
}
|
||||
|
||||
.z-above-map{
|
||||
z-index: 10000
|
||||
}
|
||||
|
||||
.z-above-map-higher {
|
||||
z-index: 10100
|
||||
}
|
||||
|
||||
.z-above-map-high {
|
||||
z-index: 10200 !important;
|
||||
}
|
||||
|
||||
.z-above-map-highest{
|
||||
z-index: 50000
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.max-h-20vh {
|
||||
max-height: 20vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 640px), only screen and (max-height: 640px) {
|
||||
.no-transform {
|
||||
/*This is a workaround to let popup contents escape the popup on mobile*/
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--subtle-detail-color: #e5f5ff;
|
||||
--subtle-detail-color-contrast: black;
|
||||
|
|
@ -53,9 +79,6 @@ a {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#topleft-tools svg {
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
|
|
@ -109,8 +132,6 @@ a {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#layer-selection {
|
||||
z-index: 9000;
|
||||
background-color: var(--background-color);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<div id="messagesboxmobile"></div>
|
||||
</div>
|
||||
|
||||
<div id="topleft-tools">
|
||||
<div id="topleft-tools" class="z-index-above-map">
|
||||
<div id="userbadge-and-search" class="p-3">
|
||||
<div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
|
||||
<div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue