contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add share button (supported browsers only), refactoring of fullscreenmessage, fancier scrolling

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-23 02:55:18 +01:00
parent 2d25393962
commit 4700e71d2e
13 changed files with 117 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

2
InitUiElements.ts
View file

@ -299,7 +299,7 @@ export class InitUiElements {
]
if (State.state.featureSwitchShareScreen.data) {
tabs.push({header: Svg.share, content: new ShareScreen()});
tabs.push({header: Svg.share_img, content: new ShareScreen()});
}
if (State.state.featureSwitchMoreQuests.data) {

2
State.ts
View file

@ -23,7 +23,7 @@ export default class State {
// The singleton of the global state
public static state: State;
public static vNumber = "0.2.1e";
public static vNumber = "0.2.2";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {

2
Svg.ts
View file

@ -194,7 +194,7 @@ export default class Svg {
public static search_svg() { return new FixedUiElement(Svg.search);}
public static search_ui() { return new FixedUiElement(Svg.search_img);}
public static share = " <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" width=\"100\" height=\"100\" viewBox=\"0 0 26.458333 26.458334\" version=\"1.1\" id=\"svg8\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\" sodipodi:docname=\"share.svg\"> <defs id=\"defs2\" /> <sodipodi:namedview id=\"base\" pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1.0\" inkscape:pageopacity=\"0.0\" inkscape:pageshadow=\"2\" inkscape:zoom=\"4\" inkscape:cx=\"-15.237738\" inkscape:cy=\"36.323203\" inkscape:document-units=\"px\" inkscape:current-layer=\"layer1\" showgrid=\"false\" units=\"px\" showguides=\"true\" inkscape:guide-bbox=\"true\" inkscape:window-width=\"1920\" inkscape:window-height=\"1001\" inkscape:window-x=\"0\" inkscape:window-y=\"1050\" inkscape:window-maximized=\"1\"> <sodipodi:guide position=\"13.229167,23.859748\" orientation=\"1,0\" id=\"guide815\" inkscape:locked=\"false\" /> <sodipodi:guide position=\"14.944824,13.229167\" orientation=\"0,1\" id=\"guide817\" inkscape:locked=\"false\" /> <sodipodi:guide position=\"19.182291,3.4395834\" orientation=\"1,0\" id=\"guide852\" inkscape:locked=\"false\" /> </sodipodi:namedview> <metadata id=\"metadata5\"> <rdf:RDF> <cc:Work rdf:about=\"\"> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /> <dc:title /> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\" transform=\"translate(0,-270.54165)\"> <path style=\"fill: none !important;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" d=\"m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669\" id=\"path819\" inkscape:connector-curvature=\"0\" sodipodi:nodetypes=\"ccc\" /> <circle style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\" id=\"path820\" cx=\"7.2434282\" cy=\"283.69574\" r=\"3.9119694\" /> <circle style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\" id=\"path820-3\" cx=\"19.48818\" cy=\"289.22873\" r=\"3.9119689\" /> <circle style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\" id=\"path820-3-6\" cx=\"19.48818\" cy=\"277.56281\" r=\"3.9119689\" /> </g> </svg> "
public static share = " <svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" id=\"svg8\" version=\"1.1\" viewBox=\"0 0 20.06869 19.489862\" height=\"73.662468\" width=\"75.850166\"> <defs id=\"defs2\" /> <metadata id=\"metadata5\"> <rdf:RDF> <cc:Work rdf:about=\"\"> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform=\"translate(-3.3314588,-273.65084)\" id=\"layer1\"> <path id=\"path819\" d=\"m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669\" style=\"fill: none !important;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke:#000000\" /> <circle r=\"3.9119694\" cy=\"283.69574\" cx=\"7.2434282\" id=\"path820\" style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" /> <circle r=\"3.9119689\" cy=\"289.22873\" cx=\"19.48818\" id=\"path820-3\" style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\" /> <circle r=\"3.9119689\" cy=\"277.56281\" cx=\"19.48818\" id=\"path820-3-6\" style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" /> </g> </svg> "
public static share_img = Img.AsImageElement(Svg.share)
public static share_svg() { return new FixedUiElement(Svg.share);}
public static share_ui() { return new FixedUiElement(Svg.share_img);}

50
UI/FullScreenMessageBoxHandler.ts
View file

@ -16,26 +16,15 @@ export class FullScreenMessageBox extends UIElement {
this.HideOnEmpty(true);
this.returnToTheMap =
new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
.SetStyle("background:var(--catch-detail-color);" +
"position: fixed;" +
"z-index: 10000;" +
"bottom: 0;" +
"left: 0;" +
`height: var(--return-to-the-map-height);` +
"width: 100vw;" +
"color: var(--catch-detail-color-contrast);" +
"font-weight: bold;" +
"pointer-events: all;" +
"cursor: pointer;" +
"padding-top: 1.2em;" +
"text-align: center;" +
"padding-bottom: 1.2em;" +
"box-sizing:border-box")
new Combine([
// Wrapped another time to prevent the value of 'em' to fluctuate
Translations.t.general.returnToTheMap.Clone()
])
.onClick(() => {
State.state.fullScreenMessage.setData(undefined);
onClear();
});
})
.SetClass("to-the-map")
}
@ -45,25 +34,18 @@ export class FullScreenMessageBox extends UIElement {
return "";
}
this._content = State.state.fullScreenMessage.data;
const innerWrap = new Combine([this._content]).SetStyle(
"display: block;" +
"padding: 1em;" +
"padding-bottom: 6em; "
);
const uielement = new Combine([innerWrap]).SetStyle(
"display:block;" +
`margin-bottom: var(--return-to-the-map-height);` +
"box-sizing:border-box;" +
`height:calc(100vh - var(--return-to-the-map-height));` +
"overflow-y: auto;" +
"max-width:100vw;" +
"overflow-x:hidden;" +
"background:var(--background-color);" +
"color: var(--foreground-color);"
);
return new Combine([uielement, this.returnToTheMap])
const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")
return new Combine([innerWrap, this.returnToTheMap])
.SetStyle("display:block; height: 100%;")
.Render();
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
htmlElement.style.setProperty("--variable-title-height", height+"px")
}
}

1
UI/Popup/FeatureInfoBox.ts
View file

@ -53,4 +53,5 @@ export class FeatureInfoBox extends UIElement {
.Render();
}
}

7
UI/SpecialVisualizations.ts
View file

@ -193,8 +193,7 @@ export default class SpecialVisualizations {
args: [
{
name: "url",
doc: "The url to share",
defaultValue: "{current_url()}"
doc: "The url to share (defualt: current URL)",
}
],
constr: (tagSource: UIEventSource<any>, args) => {
@ -202,7 +201,7 @@ export default class SpecialVisualizations {
const title = State.state.layoutToUse.data.title.txt;
let name = tagSource.data.name;
if(name){
name += `${name} (${title})`
name = `${name} (${title})`
}else{
name = title;
}
@ -212,7 +211,7 @@ export default class SpecialVisualizations {
text: State.state.layoutToUse.data.shortDescription.txt
})
} else {
return new Combine(["<button type='button' class='share-button' style='background:red;'>", Svg.share_svg() ,"</button>"])
return new FixedUiElement("")
}
}

89
assets/svg/share.svg
View file

@ -1,60 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
viewBox="0 0 26.458333 26.458334"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="share.svg">
version="1.1"
viewBox="0 0 20.06869 19.489862"
height="73.662468"
width="75.850166">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="4"
inkscape:cx="-15.237738"
inkscape:cy="36.323203"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1001"
inkscape:window-x="0"
inkscape:window-y="1050"
inkscape:window-maximized="1">
<sodipodi:guide
position="13.229167,23.859748"
orientation="1,0"
id="guide815"
inkscape:locked="false" />
<sodipodi:guide
position="14.944824,13.229167"
orientation="0,1"
id="guide817"
inkscape:locked="false" />
<sodipodi:guide
position="19.182291,3.4395834"
orientation="1,0"
id="guide852"
inkscape:locked="false" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
@ -63,38 +20,34 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-270.54165)">
transform="translate(-3.3314588,-273.65084)"
id="layer1">
<path
style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
id="path819"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke:#000000" />
<circle
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820"
cx="7.2434282"
r="3.9119694"
cy="283.69574"
r="3.9119694" />
cx="7.2434282"
id="path820"
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820-3"
cx="19.48818"
r="3.9119689"
cy="289.22873"
r="3.9119689" />
<circle
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820-3-6"
cx="19.48818"
id="path820-3"
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926" />
<circle
r="3.9119689"
cy="277.56281"
r="3.9119689" />
cx="19.48818"
id="path820-3-6"
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

2
assets/tagRenderings/icons.json
View file

@ -13,7 +13,7 @@
"condition": "wikipedia~*"
},
"phonelink": {
"render": "<a href='tel:{phone}' target='_blank'><img src='./assets/svg/phone.svg'/></a>",
"render": "<a href='tel:{phone}'><img src='./assets/svg/phone.svg'/></a>",
"condition": "phone~*"
},
"sharelink": {

57
css/fullscreenmessagebox.css Normal file
View file

@ -0,0 +1,57 @@
.fullscreenmessage-content {
max-height: calc(100vh - var(--return-to-the-map-height));
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--background-color);
display: block;
}
.fullscreenmessage-content .featureinfobox {
padding: 1em;
position: relative;
}
.fullscreenmessage-content .featureinfobox-content {
padding: 1em;
top: var(--variable-title-height);
/* 2em extra: padding from the title */
max-height: calc(100vh - var(--variable-title-height) - var(--return-to-the-map-height) - 2em) !important;
display: block;
position: absolute;
overflow-y: auto;
}
.fullscreenmessage-content .featureinfobox-titlebar {
position: fixed;
top: 0;
left: 0;
z-index: 10001;
background-color: var(--background-color);
padding: 0.5em;
width: 100%;
box-sizing: border-box;
border-bottom: 2px solid var(--foreground-color);
}
.to-the-map span {
font-size: xx-large;
}
.to-the-map {
background: var(--catch-detail-color);
height: var(--return-to-the-map-height);
position: fixed;
z-index: 10000;
bottom: 0;
left: 0;
width: 100vw;
color: var(--catch-detail-color-contrast);
font-weight: bold;
pointer-events: all;
cursor: pointer;
padding-top: 1.2em;
text-align: center;
padding-bottom: 1.2em;
box-sizing: border-box;
}

1
css/mobile.css
View file

@ -68,6 +68,7 @@ Contains tweaks for small screens
position: absolute;
z-index: 10000;
width: 100vw;
height: 100vh;
}
#welcomeMessage {

2
css/tagrendering.css
View file

@ -16,6 +16,7 @@
.featureinfobox-icons span {
display: inline-block;
padding-right: 0.1em;
}
.featureinfobox-titlebar{
@ -29,6 +30,7 @@
display:block;
max-height: 75vh;
overflow-y: auto;
overflow-x: hidden;
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
.featureinfobox-content {

11
index.css
View file

@ -10,6 +10,7 @@
--shadow-color: #00000066;
--return-to-the-map-height: 5em;
--variable-title-height: 0px; /*Set by javascript dynamically*/
}
html, body {
@ -509,15 +510,17 @@ a {
text-decoration: none;
display: inline-block;
border-radius: 3em;
width: 4em;
height: 3em;
height: 2.5em;
width: 2.5em;
box-sizing: border-box;
padding:0;
}
.share-button svg {
max-height: 2.0em;
width: 2.0em;
height: 1.5em;
width: 1.5em;
padding: 0.5em;
padding-left: 0.4em;
fill: var(--subtle-detail-color-contrast);
stroke: var(--subtle-detail-color-contrast);
}

1
index.html
View file

@ -14,6 +14,7 @@
<link rel="stylesheet" href="./css/openinghourstable.css"/>
<link rel="stylesheet" href="./css/tagrendering.css"/>
<link rel="stylesheet" href="./css/imageUploadFlow.css"/>
<link rel="stylesheet" href="./css/fullscreenmessagebox.css"/>
<!-- $$$CUSTOM-CSS -->
<link rel="manifest" href="./manifest.manifest">
<link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">