Add sublte-button, add different icon for popout

This commit is contained in:
Pieter Vander Vennet 2020-07-29 16:46:45 +02:00
parent 7882747424
commit 497d5c1b49
5 changed files with 63 additions and 20 deletions

27
UI/Base/SubtleButton.ts Normal file
View file

@ -0,0 +1,27 @@
import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import Combine from "./Combine";
export class SubtleButton extends UIElement{
private imageUrl: string;
private message: UIElement;
constructor(imageUrl: string, message: string | UIElement) {
super(undefined);
this.message = Translations.W(message);
this.imageUrl = imageUrl;
}
InnerRender(): string {
return new Combine([
'<span class="subtle-button">',
`<img src='${this.imageUrl}'>`,
this.message,
'</span>'
]).Render();
}
}

View file

@ -7,6 +7,8 @@ import {Utils} from "../Utils";
import {link} from "fs";
import {UIEventSource} from "./UIEventSource";
import {VariableUiElement} from "./Base/VariableUIElement";
import Combine from "./Base/Combine";
import {SubtleButton} from "./Base/SubtleButton";
export class MoreScreen extends UIElement {
@ -23,26 +25,27 @@ export class MoreScreen extends UIElement {
const els: UIElement[] = []
for (const k in AllKnownLayouts.allSets) {
const layout = AllKnownLayouts.allSets[k]
if(layout.hideFromOverview){continue}
if (layout.hideFromOverview) {
continue
}
const linkText =
`https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}
`
const link = new FixedUiElement(
`
<span class="switch-layout">
<a href="${linkText}" target="_blank">
<img src='${layout.icon}'>
<div><b>${Utils.Upper(layout.name)}</b><br/>
${Translations.W(layout.description).Render()}</div>
</a>
</span>
`
);
`https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
const link =
new SubtleButton(layout.icon,
new Combine([
`<a href="${linkText}" target="_blank">`,
"<div>",
"<b>",
Translations.W(layout.title),
"</b>",
"<br/>",
Translations.W(layout.description),
"</div>",
"</a>"
]));
els.push(link)
}

7
assets/pop-out.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g><path d="M485,379.5l130.6,130.6l245.8-245.8l126.9,126.9l0.2-379L607.1,10l123.8,123.7L485,379.5L485,379.5z M986.4,546.3l-94.1-95.4l1.7,441.3l-784.7,0.4l0.8-782.7l438.9-2l-98-98H108C53.9,10,10,54,10,108v784c0,54.1,43.9,98,98,98h784c54.1,0,98-43.9,98-98L986.4,546.3z"/></g></g>
</svg>

After

Width:  |  Height:  |  Size: 768 B

View file

@ -4,6 +4,11 @@ html, body {
padding: 0;
}
a {
text-decoration: unset;
color:unset;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
@ -1187,7 +1192,7 @@ form {
/** Switch layout **/
.switch-layout a{
.subtle-button{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
@ -1201,7 +1206,7 @@ form {
}
.switch-layout a img{
.subtle-button img{
width: 3em;
max-height: 3em;
margin-right: 0.5em;

View file

@ -320,8 +320,9 @@ InitUiElements.OnlyIf(featureSwitchWelcomeMessage, () => {
InitUiElements.InitWelcomeMessage(layoutToUse, osmConnection, bm, fullScreenMessage)
});
if (window != window.top || featureSwitchIframe.data !== "false") {
new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pencil.svg'></span></a>`).AttachTo("top-right")
if ((window != window.top && featureSwitchWelcomeMessage.data === "false") || featureSwitchIframe.data !== "false") {
console.log("WELCOME? ",featureSwitchWelcomeMessage.data)
new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pop-out.svg'></span></a>`).AttachTo("top-right")
}