forked from MapComplete/MapComplete
UX: work on layout
This commit is contained in:
Pieter Vander Vennet
parent
a87e3376e0
commit
d6a20b7222
43 changed files with 5086 additions and 838 deletions
|
|
@ -1626,41 +1626,6 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "last_edit",
|
||||
"labels": [
|
||||
"added_by_default"
|
||||
],
|
||||
"description": "Gives some metainfo about the last edit and who did edit it - rendering only",
|
||||
"condition": {
|
||||
"and": [
|
||||
"_last_edit:contributor~*",
|
||||
"_last_edit:changeset~*"
|
||||
]
|
||||
},
|
||||
"metacondition": {
|
||||
"or": [
|
||||
"__featureSwitchIsTesting=true",
|
||||
"__featureSwitchIsDebugging=true",
|
||||
"mapcomplete-show_debug=yes",
|
||||
"_csCount>=10"
|
||||
]
|
||||
},
|
||||
"render": {
|
||||
"special": {
|
||||
"type": "link",
|
||||
"href": "{_backend}/changeset/{_last_edit:changeset}",
|
||||
"text": {
|
||||
"en": "Last edited on {_last_edit:timestamp} by {_last_edit:contributor}",
|
||||
"nl": "Laatst gewijzigd op {_last_edit:timestamp} door {_last_edit:contributor} ",
|
||||
"de": "Zuletzt bearbeitet am {_last_edit:timestamp} von {_last_edit:contributor}",
|
||||
"ca": "Darrera edició el {_last_edit:timestamp} per {_last_edit:contributor}",
|
||||
"cs": "Naposledy upravil {_last_edit:timestamp} {_last_edit:contributor}"
|
||||
},
|
||||
"class": "subtle font-small"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "all_tags",
|
||||
"description": "Shows a table with all the tags of the feature",
|
||||
|
|
@ -2671,6 +2636,24 @@
|
|||
"*": "{linked_data_from_website()}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "share",
|
||||
"labels": [
|
||||
"added_by_default"
|
||||
],
|
||||
"metacondition": "_supports_sharing=yes",
|
||||
"render": {
|
||||
"special": {
|
||||
"type": "share_link",
|
||||
"text": {
|
||||
"en": "Share this location",
|
||||
"nl": "Deel deze locatie",
|
||||
"de": "Standort teilen"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"id": "qr_code",
|
||||
"labels": [
|
||||
|
|
@ -2690,19 +2673,37 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"id": "share",
|
||||
"id": "last_edit",
|
||||
"labels": [
|
||||
"added_by_default"
|
||||
],
|
||||
"metacondition": "_supports_sharing=yes",
|
||||
"description": "Gives some metainfo about the last edit and who did edit it - rendering only",
|
||||
"condition": {
|
||||
"and": [
|
||||
"_last_edit:contributor~*",
|
||||
"_last_edit:changeset~*"
|
||||
]
|
||||
},
|
||||
"metacondition": {
|
||||
"or": [
|
||||
"__featureSwitchIsTesting=true",
|
||||
"__featureSwitchIsDebugging=true",
|
||||
"mapcomplete-show_debug=yes",
|
||||
"_csCount>=10"
|
||||
]
|
||||
},
|
||||
"render": {
|
||||
"special": {
|
||||
"type": "share_link",
|
||||
"type": "link",
|
||||
"href": "{_backend}/changeset/{_last_edit:changeset}",
|
||||
"text": {
|
||||
"en": "Share this location",
|
||||
"nl": "Deel deze locatie",
|
||||
"de": "Standort teilen"
|
||||
}
|
||||
"en": "Last edited on {_last_edit:timestamp} by {_last_edit:contributor}",
|
||||
"nl": "Laatst gewijzigd op {_last_edit:timestamp} door {_last_edit:contributor} ",
|
||||
"de": "Zuletzt bearbeitet am {_last_edit:timestamp} von {_last_edit:contributor}",
|
||||
"ca": "Darrera edició el {_last_edit:timestamp} per {_last_edit:contributor}",
|
||||
"cs": "Naposledy upravil {_last_edit:timestamp} {_last_edit:contributor}"
|
||||
},
|
||||
"class": "subtle font-small"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
|
||||
<g id="surface1">
|
||||
<path d="M 280.75 123.625 L 218.375 123.625 L 218.375 27.8125 C 218.375 19.0625 211.375 11.875 202.75 11.875 L 171.5625 11.875 C 163 11.875 155.9375 19.0625 155.9375 27.8125 L 155.9375 123.625 L 93.5625 123.625 L 187.125 251.375 Z M 351 171.5625 C 338.0625 171.5625 327.625 182.3125 327.625 195.5 L 327.625 315.25 L 46.8125 315.25 L 46.8125 195.5 C 46.8125 182.25 36.3125 171.5625 23.4375 171.5625 C 10.5 171.5625 0 182.25 0 195.5 L 0 339.1875 C 0 352.375 10.5 363.125 23.375 363.125 L 350.9375 363.125 C 363.875 363.125 374.3125 352.375 374.3125 339.1875 L 374.3125 195.5 C 374.375 182.25 363.875 171.5625 351 171.5625 Z M 351 171.5625 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 841 B |
|
|
@ -1,2 +0,0 @@
|
|||
SPDX-FileCopyrightText: Engr.eponce
|
||||
SPDX-License-Identifier: CC-BY-SA-4.0
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="374px"
|
||||
height="365px"
|
||||
viewBox="0 0 374 365"
|
||||
version="1.1"
|
||||
id="svg11"
|
||||
sodipodi:docname="share.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs15" />
|
||||
<sodipodi:namedview
|
||||
id="namedview13"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.0958904"
|
||||
inkscape:cx="187.03268"
|
||||
inkscape:cy="182.5"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="995"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg11" />
|
||||
<path
|
||||
id="path2"
|
||||
style="color:#000000;fill:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||
d="M 301.09766 0.47265625 C 260.83203 0.47265625 228.19141 33.1875 228.19141 73.546875 C 228.19141 79.329826 228.8815 84.948384 230.14844 90.34375 L 126.28711 138.35938 C 112.97544 124.01509 93.990177 115.03125 72.902344 115.03125 C 32.640625 115.03125 0 147.74609 0 188.10156 C -9.4739031e-15 228.46094 32.640625 261.17578 72.902344 261.17578 C 93.990661 261.17578 112.97735 252.19308 126.28906 237.84766 L 228.48438 285.09375 C 228.30377 287.19139 228.19141 289.30857 228.19141 291.45312 C 228.19141 331.8125 260.83203 364.52734 301.09766 364.52734 C 341.35937 364.52734 374 331.8125 374 291.45312 C 374 251.09766 341.35937 218.38281 301.09766 218.38281 C 279.27697 218.38281 259.71055 228.00393 246.34961 243.22852 L 145.3125 196.51562 C 145.62871 193.75286 145.80859 190.94925 145.80859 188.10156 C 145.80859 185.2553 145.62846 182.45285 145.3125 179.69141 L 254.10547 129.39648 C 266.79684 140.13431 283.18811 146.61719 301.09766 146.61719 C 341.35937 146.61719 374 113.90234 374 73.546875 C 374 33.1875 341.35937 0.47265625 301.09766 0.47265625 z " />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
|
||||
<g id="surface1">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,100%,0%);fill-opacity:1;" d="M 0 374.617188 C 0 373.621094 187.496094 -0.375 187.804688 0 C 188.847656 1.261719 375.34375 374.710938 375 374.851562 C 374.777344 374.941406 332.519531 356.800781 281.097656 334.539062 L 187.601562 294.066406 L 94.257812 334.535156 C 42.917969 356.789062 0.707031 375 0.457031 375 C 0.207031 375 0 374.828125 0 374.617188 Z M 0 374.617188 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 629 B |
|
|
@ -1,2 +0,0 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
|
||||
<g id="surface1">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 280.75 129.625 L 218.375 129.625 L 218.375 225.4375 C 218.375 234.1875 211.375 241.375 202.75 241.375 L 171.5625 241.375 C 163 241.375 155.9375 234.1875 155.9375 225.4375 L 155.9375 129.625 L 93.5625 129.625 L 187.125 1.875 Z M 280.75 129.625 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 23.3125 171.5625 C 36.25 171.5625 46.6875 182.3125 46.6875 195.5 L 46.6875 315.25 L 327.5 315.25 L 327.5 195.5 C 327.5 182.25 338 171.5625 350.875 171.5625 C 363.8125 171.5625 374.3125 182.25 374.3125 195.5 L 374.3125 339.1875 C 374.3125 352.375 363.8125 363.125 350.9375 363.125 L 23.375 363.125 C 10.4375 363.125 0 352.375 0 339.1875 L 0 195.5 C -0.0625 182.25 10.4375 171.5625 23.3125 171.5625 Z M 23.3125 171.5625 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
SPDX-FileCopyrightText: Pieter Vander Vennet
|
||||
SPDX-License-Identifier: CC0-1.0
|
||||
BIN
public/assets/source-sans-pro.regular.ttf
Normal file
BIN
public/assets/source-sans-pro.regular.ttf
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
|
@ -107,6 +107,7 @@ function genImages(dryrun = false) {
|
|||
"wikimedia-commons-white",
|
||||
"wikimedia_commons_white",
|
||||
"wikipedia",
|
||||
"github"
|
||||
].map((s) => s.toLowerCase())
|
||||
const dir = fs.readdirSync("./assets/svg")
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
|
|||
public readonly featureSwitchWelcomeMessage: UIEventSource<boolean>
|
||||
public readonly featureSwitchCommunityIndex: UIEventSource<boolean>
|
||||
public readonly featureSwitchExtraLinkEnabled: UIEventSource<boolean>
|
||||
public readonly featureSwitchMoreQuests: UIEventSource<boolean>
|
||||
public readonly featureSwitchBackToThemeOverview: UIEventSource<boolean>
|
||||
public readonly featureSwitchShareScreen: UIEventSource<boolean>
|
||||
public readonly featureSwitchGeolocation: UIEventSource<boolean>
|
||||
public readonly featureSwitchIsTesting: UIEventSource<boolean>
|
||||
|
|
@ -118,10 +118,10 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
|
|||
true,
|
||||
"Disables/Enables the extraLink button. By default, if in iframe mode and the welcome message is hidden, a popout button to the full mapcomplete instance is shown instead (unless disabled with this switch or another extraLink button is enabled)"
|
||||
)
|
||||
this.featureSwitchMoreQuests = FeatureSwitchUtils.initSwitch(
|
||||
"fs-more-quests",
|
||||
this.featureSwitchBackToThemeOverview = FeatureSwitchUtils.initSwitch(
|
||||
"fs-homepage-link",
|
||||
layoutToUse?.enableMoreQuests ?? true,
|
||||
"Disables/Enables the 'More Quests'-tab in the welcome message"
|
||||
"Disables/Enables the various links which go back to the index page with the theme overview"
|
||||
)
|
||||
this.featureSwitchShareScreen = FeatureSwitchUtils.initSwitch(
|
||||
"fs-share-screen",
|
||||
|
|
|
|||
|
|
@ -1,42 +1,14 @@
|
|||
import { Utils } from "../../Utils"
|
||||
/** This code is autogenerated - do not edit. Edit ./assets/layers/usersettings/usersettings.json instead */
|
||||
export class ThemeMetaTagging {
|
||||
public static readonly themeName = "usersettings"
|
||||
public static readonly themeName = "usersettings"
|
||||
|
||||
public metaTaggging_for_usersettings(feat: { properties: Record<string, string> }) {
|
||||
Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () =>
|
||||
feat.properties._description
|
||||
.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)
|
||||
?.at(1)
|
||||
)
|
||||
Utils.AddLazyProperty(
|
||||
feat.properties,
|
||||
"_d",
|
||||
() => feat.properties._description?.replace(/</g, "<")?.replace(/>/g, ">") ?? ""
|
||||
)
|
||||
Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_a", () =>
|
||||
((feat) => {
|
||||
const e = document.createElement("div")
|
||||
e.innerHTML = feat.properties._d
|
||||
return Array.from(e.getElementsByTagName("a")).filter(
|
||||
(a) => a.href.match(/mastodon|en.osm.town/) !== null
|
||||
)[0]?.href
|
||||
})(feat)
|
||||
)
|
||||
Utils.AddLazyProperty(feat.properties, "_mastodon_link", () =>
|
||||
((feat) => {
|
||||
const e = document.createElement("div")
|
||||
e.innerHTML = feat.properties._d
|
||||
return Array.from(e.getElementsByTagName("a")).filter(
|
||||
(a) => a.getAttribute("rel")?.indexOf("me") >= 0
|
||||
)[0]?.href
|
||||
})(feat)
|
||||
)
|
||||
Utils.AddLazyProperty(
|
||||
feat.properties,
|
||||
"_mastodon_candidate",
|
||||
() => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a
|
||||
)
|
||||
feat.properties["__current_backgroun"] = "initial_value"
|
||||
}
|
||||
}
|
||||
public metaTaggging_for_usersettings(feat: {properties: Record<string, string>}) {
|
||||
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) )
|
||||
Utils.AddLazyProperty(feat.properties, '_d', () => feat.properties._description?.replace(/</g,'<')?.replace(/>/g,'>') ?? '' )
|
||||
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href }) (feat) )
|
||||
Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat) )
|
||||
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a )
|
||||
feat.properties['__current_backgroun'] = 'initial_value'
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import StylesheetTestGui from "./UI/StylesheetTestGui.svelte"
|
||||
|
||||
new StylesheetTestGui({
|
||||
target: document.getElementById("maindiv"),
|
||||
target: document.getElementById("main"),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -148,15 +148,14 @@
|
|||
</ThemesList>
|
||||
|
||||
<UnofficialThemeList search={themeSearchText} {state} />
|
||||
|
||||
<LoginButton osmConnection={state.osmConnection} />
|
||||
</LoginToggle>
|
||||
|
||||
<h3 id="about">
|
||||
<Tr t={Translations.t.index.about} />
|
||||
</h3>
|
||||
<Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
|
||||
|
||||
<span class="links-as-button flex flex-col gap-y-1">
|
||||
<span class="link-underline flex flex-col gap-y-1">
|
||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
|
||||
<Github class="mr-2 h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
|
||||
|
|
@ -192,7 +191,7 @@
|
|||
<Tr t={Translations.t.privacy.title} />
|
||||
</a>
|
||||
</span>
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
<Tr t={tr.streetcomplete} />
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
</script>
|
||||
|
||||
{#if $showButton}
|
||||
<div class="flex">
|
||||
<button class="small soft flex grow items-center" on:click={openJosm}>
|
||||
<div class="flex flex-col">
|
||||
<button class="as-link" on:click={openJosm}>
|
||||
<Josm_logo class="h-6 w-6 pr-2" />
|
||||
<Tr t={t.editJosm} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Share from "../../assets/svg/Share.svelte"
|
||||
import { ariaLabel } from "../../Utils/ariaLabel"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Share from "@babeard/svelte-heroicons/solid/Share"
|
||||
|
||||
export let generateShareData: () => {
|
||||
text: string
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
</slot>
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={share}>
|
||||
<Share class="h-8 w-8 pr-2" />
|
||||
<button on:click={share} class="w-full">
|
||||
<Share class="h-8 w-8" />
|
||||
{text}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ import { FixedUiElement } from "../Base/FixedUiElement"
|
|||
import { Utils } from "../../Utils"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import SvelteUIElement from "../Base/SvelteUIElement"
|
||||
import Up from "../../assets/svg/Up.svelte"
|
||||
import Circle from "../../assets/svg/Circle.svelte"
|
||||
import ChevronUp from "@babeard/svelte-heroicons/solid/ChevronUp"
|
||||
import ChevronDown from "@babeard/svelte-heroicons/solid/ChevronDown"
|
||||
|
||||
export default class Histogram<T> extends VariableUiElement {
|
||||
export default class Histogram extends VariableUiElement {
|
||||
private static defaultPalette = [
|
||||
"#ff5858",
|
||||
"#ffad48",
|
||||
|
|
@ -36,9 +37,9 @@ export default class Histogram<T> extends VariableUiElement {
|
|||
sortMode.map((m) => {
|
||||
switch (m) {
|
||||
case "name":
|
||||
return new SvelteUIElement(Up)
|
||||
return new SvelteUIElement(ChevronUp)
|
||||
case "name-rev":
|
||||
return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
|
||||
return new SvelteUIElement(ChevronDown)
|
||||
default:
|
||||
return new SvelteUIElement(Circle)
|
||||
}
|
||||
|
|
@ -58,9 +59,9 @@ export default class Histogram<T> extends VariableUiElement {
|
|||
sortMode.map((m) => {
|
||||
switch (m) {
|
||||
case "count":
|
||||
return new SvelteUIElement(Up)
|
||||
return new SvelteUIElement(ChevronUp)
|
||||
case "count-rev":
|
||||
return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
|
||||
return new SvelteUIElement(ChevronDown)
|
||||
default:
|
||||
return new SvelteUIElement(Circle)
|
||||
}
|
||||
|
|
@ -145,7 +146,7 @@ export default class Histogram<T> extends VariableUiElement {
|
|||
]).SetClass("block w-full"),
|
||||
]),
|
||||
{
|
||||
contentStyle: keys.map((_) => ["width: 20%"]),
|
||||
contentStyle: keys.map(() => ["width: 20%"]),
|
||||
}
|
||||
).SetClass("w-full zebra-table")
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,10 +21,21 @@
|
|||
selectedElement.properties.id
|
||||
)
|
||||
|
||||
let layer: LayerConfig =
|
||||
selectedElement.properties.id === "settings"
|
||||
? UserRelatedState.usersettingsConfig
|
||||
: state.layout.getMatchingLayer(tags.data)
|
||||
function getLayer(properties: Record<string, string>){
|
||||
if(properties.id === "settings"){
|
||||
return UserRelatedState.usersettingsConfig
|
||||
}
|
||||
if (properties.id === "new_point_dialog") {
|
||||
return state.layout.layers.find((l) => l.id === "last_click")
|
||||
}
|
||||
if (properties.id === "location_track") {
|
||||
return state.layout.layers.find((l) => l.id === "gps_track")
|
||||
}
|
||||
return state.layout.getMatchingLayer(properties)
|
||||
}
|
||||
|
||||
let layer: LayerConfig = getLayer(selectedElement.properties)
|
||||
|
||||
|
||||
let stillMatches = tags.map(
|
||||
(tags) => !layer?.source?.osmTags || layer.source.osmTags?.matchesProperties(tags)
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
import Translations from "../i18n/Translations"
|
||||
import { Utils } from "../../Utils"
|
||||
import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
|
||||
import Share from "../../assets/svg/Share.svelte"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import Img from "../Base/Img"
|
||||
import Qr from "../../Utils/Qr"
|
||||
import Share from "@babeard/svelte-heroicons/solid/Share"
|
||||
|
||||
export let state: ThemeViewState
|
||||
const tr = Translations.t.general.sharescreen
|
||||
|
|
|
|||
|
|
@ -12,10 +12,9 @@
|
|||
import { GeoLocationState } from "../../Logic/State/GeoLocationState"
|
||||
import If from "../Base/If.svelte"
|
||||
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import Add from "../../assets/svg/Add.svelte"
|
||||
import Location_refused from "../../assets/svg/Location_refused.svelte"
|
||||
import Location from "../../assets/svg/Location.svelte"
|
||||
import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
|
||||
import ChevronDoubleLeft from "@babeard/svelte-heroicons/mini/ChevronDoubleLeft"
|
||||
|
||||
/**
|
||||
* The theme introduction panel
|
||||
|
|
@ -150,11 +149,14 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
|
||||
<If condition={state.featureSwitches.featureSwitchBackToThemeOverview}>
|
||||
|
||||
<div class="link-underline w-full m-2 mx-4 flex">
|
||||
<!-- bottom buttons, a bit hidden away: switch layout -->
|
||||
<a class="flex" href={Utils.HomepageLink()}>
|
||||
<Add class="h-6 w-6" />
|
||||
<a class="flex justify-end items-center w-fit" href={Utils.HomepageLink()}>
|
||||
<ChevronDoubleLeft class="w-4 h-4" />
|
||||
<Tr t={Translations.t.general.backToIndex} />
|
||||
</a>
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
import Invalid from "../../assets/svg/Invalid.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Confirm from "../../assets/svg/Confirm.svelte"
|
||||
import Upload from "../../assets/svg/Upload.svelte"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import Close from "../../assets/svg/Close.svelte"
|
||||
import { placeholder } from "../../Utils/placeholder"
|
||||
import { ariaLabel } from "../../Utils/ariaLabel"
|
||||
import { selectDefault } from "../../Utils/selectDefault"
|
||||
import ArrowUpTray from "@babeard/svelte-heroicons/solid/ArrowUpTray"
|
||||
|
||||
export let trace: (title: string) => string
|
||||
export let state: {
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
currentStep.setData("please_confirm")
|
||||
}}
|
||||
>
|
||||
<Upload class="h-12 w-12" />
|
||||
<ArrowUpTray class="h-12 w-12" />
|
||||
<Tr t={t.title} />
|
||||
</button>
|
||||
{:else if $currentStep === "please_confirm"}
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
</button>
|
||||
|
||||
<button class="primary flex flex-grow gap-x-2" on:click={() => uploadTrace()}>
|
||||
<Upload class="h-8 w-8" />
|
||||
<ArrowUpTray class="h-8 w-8" />
|
||||
<Tr t={t.confirm} />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
class="no-weblate my-1 flex grid-cols-2 flex-wrap items-center justify-between rounded border-2 border-dashed border-gray-300 px-1"
|
||||
>
|
||||
<button class="link m-0 ml-1 cursor-pointer justify-self-start" on:click={() => select()}>
|
||||
<button class="as-link" on:click={() => select()}>
|
||||
<TagRenderingAnswer
|
||||
{state}
|
||||
config={titleConfig}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
import FavouriteSummary from "./FavouriteSummary.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { Utils } from "../../Utils"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import type { Feature, Point } from "geojson"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import LoginButton from "../Base/LoginButton.svelte"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
|
||||
/**
|
||||
* A panel showing all your favourites
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
<FavouriteSummary {feature} {state} />
|
||||
{/each}
|
||||
|
||||
<div class="mt-8">
|
||||
<button class="flex p-2" on:click={() => downloadGeojson()}>
|
||||
<DownloadIcon class="h-6 w-6" />
|
||||
<div class="mt-8 flex">
|
||||
<button on:click={() => downloadGeojson()}>
|
||||
<ArrowDownTray class="h-6 w-6" />
|
||||
<Tr t={Translations.t.favouritePoi.downloadGeojson} />
|
||||
</button>
|
||||
<button class="flex p-2" on:click={() => downloadGPX()}>
|
||||
<DownloadIcon class="h-6 w-6" />
|
||||
<button on:click={() => downloadGPX()}>
|
||||
<ArrowDownTray class="h-6 w-6" />
|
||||
<Tr t={Translations.t.favouritePoi.downloadGpx} />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
</FileSelector>
|
||||
<div class="text-sm">
|
||||
<button
|
||||
class="link small"
|
||||
class="as-link"
|
||||
style="margin: 0; padding: 0"
|
||||
on:click={() => {
|
||||
state.guistate.openUsersettings("picture-license")
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
</div>
|
||||
{:else if currentState === "start"}
|
||||
<button
|
||||
class="flex items-center"
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
currentState = "confirm"
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisua
|
|||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { Feature, LineString } from "geojson"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import SvelteUIElement from "../Base/SvelteUIElement"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
|
||||
export class ExportAsGpxViz implements SpecialVisualization {
|
||||
funcName = "export_as_gpx"
|
||||
|
|
@ -26,7 +29,7 @@ export class ExportAsGpxViz implements SpecialVisualization {
|
|||
return undefined
|
||||
}
|
||||
return new SubtleButton(
|
||||
Svg.download_svg(),
|
||||
new SvelteUIElement(ArrowDownTray),
|
||||
new Combine([
|
||||
t.downloadFeatureAsGpx.SetClass("font-bold text-lg"),
|
||||
t.downloadGpxHelper.SetClass("subtle"),
|
||||
|
|
|
|||
|
|
@ -26,22 +26,23 @@
|
|||
<LoginToggle ignoreLoading={true} {state}>
|
||||
{#if $isFavourite}
|
||||
<div class="flex h-fit items-start">
|
||||
<HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
|
||||
<div class="flex w-full flex-col">
|
||||
<button class="flex flex-col items-start" on:click={() => markFavourite(false)}>
|
||||
<button on:click={() => markFavourite(false)}>
|
||||
<HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
|
||||
<div class="flex flex-col items-start">
|
||||
<Tr t={t.button.unmark} />
|
||||
<Tr cls="normal-font subtle" t={t.button.unmarkNotDeleted} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Tr cls="font-bold thanks m-2 p-2 block" t={t.button.isFavourite} />
|
||||
{:else}
|
||||
<div class="flex items-start">
|
||||
<HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
|
||||
<button class="flex w-full flex-col items-start" on:click={() => markFavourite(true)}>
|
||||
<button on:click={() => markFavourite(true)}>
|
||||
<HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
|
||||
<div class="flex w-full flex-col items-start">
|
||||
|
||||
<Tr t={t.button.markAsFavouriteTitle} />
|
||||
<Tr cls="normal-font subtle" t={t.button.markDescription} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</LoginToggle>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
{:else if currentStep === "start"}
|
||||
{#if moveWizardState.reasons.length === 1}
|
||||
<button
|
||||
class="flex"
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
reason.setData(moveWizardState.reasons[0])
|
||||
currentStep = "pick_location"
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="flex"
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
currentStep = "reason"
|
||||
}}
|
||||
|
|
@ -127,13 +127,12 @@
|
|||
)}
|
||||
>
|
||||
<button
|
||||
class="primary flex w-full"
|
||||
class="primary w-full"
|
||||
on:click={() => {
|
||||
moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)
|
||||
currentStep = "moved"
|
||||
}}
|
||||
>
|
||||
<Move class="mr-2 h-6 w-6" />
|
||||
<Tr t={t.confirmMove} />
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { PencilAltIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { ariaLabel } from "../../../Utils/ariaLabel.js"
|
||||
import { Translation } from "../../i18n/Translation"
|
||||
import Pencil from "@babeard/svelte-heroicons/solid/Pencil"
|
||||
|
||||
/**
|
||||
* A small, round button with an edit-icon (and aria-labels etc)
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
|
||||
<button
|
||||
on:click
|
||||
class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
|
||||
class="h-8 w-8 shrink-0 self-start rounded-full p-1 as-link"
|
||||
aria-labelledby={arialabel === undefined ? ariaLabelledBy : undefined}
|
||||
use:ariaLabel={arialabel}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
<Pencil class="h-4 w-4 hover-alert" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
($byLoggedInUser ? "border-interactive" : "")}
|
||||
>
|
||||
{#if showSub}
|
||||
<button class="link" on:click={() => selectFeature()}>
|
||||
<button class="as-link" on:click={() => selectFeature()}>
|
||||
<h3>{sub}</h3>
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
{:else}
|
||||
<button
|
||||
use:ariaLabel={Translations.t.reviews.rate.Subs({ n: i + 1 })}
|
||||
class="small soft no-image-background rounded-full"
|
||||
class="rounded-full as-link"
|
||||
style="padding: 0; border: none;"
|
||||
bind:this={container}
|
||||
on:click={(e) => {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ import { Translation } from "./i18n/Translation"
|
|||
import Translations from "./i18n/Translations"
|
||||
import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization"
|
||||
import { SubtleButton } from "./Base/SubtleButton"
|
||||
import Svg from "../Svg"
|
||||
import NoteCommentElement from "./Popup/Notes/NoteCommentElement"
|
||||
import List from "./Base/List"
|
||||
import StatisticsPanel from "./BigComponents/StatisticsPanel"
|
||||
|
|
@ -96,6 +95,8 @@ import DynLink from "./Base/DynLink.svelte"
|
|||
import Locale from "./i18n/Locale"
|
||||
import LanguageUtils from "../Utils/LanguageUtils"
|
||||
import MarkdownUtils from "../Utils/MarkdownUtils"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
import Trash from "@babeard/svelte-heroicons/mini/Trash"
|
||||
|
||||
class NearbyImageVis implements SpecialVisualization {
|
||||
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
|
||||
|
|
@ -490,7 +491,7 @@ export default class SpecialVisualizations {
|
|||
state,
|
||||
feature,
|
||||
layer,
|
||||
})
|
||||
}).SetClass("p-0 m-0")
|
||||
},
|
||||
},
|
||||
new ShareLinkViz(),
|
||||
|
|
@ -878,7 +879,7 @@ export default class SpecialVisualizations {
|
|||
const t = Translations.t.general.download
|
||||
|
||||
return new SubtleButton(
|
||||
Svg.download_svg(),
|
||||
new SvelteUIElement(ArrowDownTray),
|
||||
new Combine([
|
||||
t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
|
||||
t.downloadGeoJsonHelper.SetClass("subtle"),
|
||||
|
|
@ -930,7 +931,7 @@ export default class SpecialVisualizations {
|
|||
|
||||
constr: (state) => {
|
||||
return new SubtleButton(
|
||||
Svg.delete_icon_svg().SetStyle("height: 1.5rem"),
|
||||
new SvelteUIElement(Trash).SetClass("h-6"),
|
||||
Translations.t.general.removeLocationHistory
|
||||
).onClick(() => {
|
||||
state.historicalUserLocations.features.setData([])
|
||||
|
|
|
|||
|
|
@ -68,6 +68,9 @@
|
|||
<Community class="h-6 w-6" />
|
||||
Secondary action (disabled)
|
||||
</button>
|
||||
<button class="as-link">
|
||||
Mimick link
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" />
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,6 @@
|
|||
import Filter from "../assets/svg/Filter.svelte"
|
||||
import Add from "../assets/svg/Add.svelte"
|
||||
import Community from "../assets/svg/Community.svelte"
|
||||
import Download from "../assets/svg/Download.svelte"
|
||||
import Share from "../assets/svg/Share.svelte"
|
||||
import Favourites from "./Favourites/Favourites.svelte"
|
||||
import ImageOperations from "./Image/ImageOperations.svelte"
|
||||
import VisualFeedbackPanel from "./BigComponents/VisualFeedbackPanel.svelte"
|
||||
|
|
@ -76,6 +74,8 @@
|
|||
import CloseAnimation from "./Base/CloseAnimation.svelte"
|
||||
import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
|
||||
import Github from "../assets/svg/Github.svelte"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
import Share from "@babeard/svelte-heroicons/solid/Share"
|
||||
|
||||
export let state: ThemeViewState
|
||||
let layout = state.layout
|
||||
|
|
@ -496,7 +496,7 @@
|
|||
|
||||
<div class="flex" slot="title1">
|
||||
<If condition={state.featureSwitches.featureSwitchEnableExport}>
|
||||
<Download class="h-4 w-4" />
|
||||
<ArrowDownTray class="h-4 w-4" />
|
||||
<Tr t={Translations.t.general.download.title} />
|
||||
</If>
|
||||
</div>
|
||||
|
|
@ -565,7 +565,7 @@
|
|||
<Tr t={Translations.t.general.menu.aboutMapComplete} />
|
||||
</div>
|
||||
|
||||
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
|
||||
<div class="link-underline links-w-full m-2 flex flex-col gap-y-1" slot="content0">
|
||||
<Tr t={Translations.t.general.aboutMapComplete.intro} />
|
||||
|
||||
<a class="flex" href={Utils.HomepageLink()}>
|
||||
|
|
@ -594,7 +594,7 @@
|
|||
</a>
|
||||
|
||||
<button
|
||||
class="small soft flex"
|
||||
class="as-link"
|
||||
on:click={() => state.guistate.communityIndexPanelIsOpened.setData(true)}
|
||||
>
|
||||
<Community class="h-6 w-6" />
|
||||
|
|
@ -608,7 +608,7 @@
|
|||
</If>
|
||||
|
||||
<button
|
||||
class="small soft flex"
|
||||
class="as-link"
|
||||
on:click={() => state.guistate.privacyPanelIsOpened.setData(true)}
|
||||
>
|
||||
<EyeIcon class="h-6 w-6 pr-1" />
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<script>
|
||||
export let color = "#000000"
|
||||
</script>
|
||||
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <g id="surface1"> <path d="M 280.75 123.625 L 218.375 123.625 L 218.375 27.8125 C 218.375 19.0625 211.375 11.875 202.75 11.875 L 171.5625 11.875 C 163 11.875 155.9375 19.0625 155.9375 27.8125 L 155.9375 123.625 L 93.5625 123.625 L 187.125 251.375 Z M 351 171.5625 C 338.0625 171.5625 327.625 182.3125 327.625 195.5 L 327.625 315.25 L 46.8125 315.25 L 46.8125 195.5 C 46.8125 182.25 36.3125 171.5625 23.4375 171.5625 C 10.5 171.5625 0 182.25 0 195.5 L 0 339.1875 C 0 352.375 10.5 363.125 23.375 363.125 L 350.9375 363.125 C 363.875 363.125 374.3125 352.375 374.3125 339.1875 L 374.3125 195.5 C 374.375 182.25 363.875 171.5625 351 171.5625 Z M 351 171.5625 "/> </g> </svg>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +0,0 @@
|
|||
<script>
|
||||
export let color = "#000000"
|
||||
</script>
|
||||
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown width="374px" height="365px" viewBox="0 0 374 365" version="1.1" id="svg11" sodipodi:docname="share.svg" inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs15" /> <sodipodi:namedview id="namedview13" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:pageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" showgrid="false" inkscape:zoom="2.0958904" inkscape:cx="187.03268" inkscape:cy="182.5" inkscape:window-width="1920" inkscape:window-height="995" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg11" /> <path id="path2" style="color:{color};fill:{color};stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M 301.09766 0.47265625 C 260.83203 0.47265625 228.19141 33.1875 228.19141 73.546875 C 228.19141 79.329826 228.8815 84.948384 230.14844 90.34375 L 126.28711 138.35938 C 112.97544 124.01509 93.990177 115.03125 72.902344 115.03125 C 32.640625 115.03125 0 147.74609 0 188.10156 C -9.4739031e-15 228.46094 32.640625 261.17578 72.902344 261.17578 C 93.990661 261.17578 112.97735 252.19308 126.28906 237.84766 L 228.48438 285.09375 C 228.30377 287.19139 228.19141 289.30857 228.19141 291.45312 C 228.19141 331.8125 260.83203 364.52734 301.09766 364.52734 C 341.35937 364.52734 374 331.8125 374 291.45312 C 374 251.09766 341.35937 218.38281 301.09766 218.38281 C 279.27697 218.38281 259.71055 228.00393 246.34961 243.22852 L 145.3125 196.51562 C 145.62871 193.75286 145.80859 190.94925 145.80859 188.10156 C 145.80859 185.2553 145.62846 182.45285 145.3125 179.69141 L 254.10547 129.39648 C 266.79684 140.13431 283.18811 146.61719 301.09766 146.61719 C 341.35937 146.61719 374 113.90234 374 73.546875 C 374 33.1875 341.35937 0.47265625 301.09766 0.47265625 z " /> </svg>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<script>
|
||||
export let color = "#000000"
|
||||
</script>
|
||||
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <g id="surface1"> <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,100%,0%);fill-opacity:1;" d="M 0 374.617188 C 0 373.621094 187.496094 -0.375 187.804688 0 C 188.847656 1.261719 375.34375 374.710938 375 374.851562 C 374.777344 374.941406 332.519531 356.800781 281.097656 334.539062 L 187.601562 294.066406 L 94.257812 334.535156 C 42.917969 356.789062 0.707031 375 0.457031 375 C 0.207031 375 0 374.828125 0 374.617188 Z M 0 374.617188 "/> </g> </svg>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<script>
|
||||
export let color = "#000000"
|
||||
</script>
|
||||
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <g id="surface1"> <path style=" stroke:none;fill-rule:nonzero;fill:{color};fill-opacity:1;" d="M 280.75 129.625 L 218.375 129.625 L 218.375 225.4375 C 218.375 234.1875 211.375 241.375 202.75 241.375 L 171.5625 241.375 C 163 241.375 155.9375 234.1875 155.9375 225.4375 L 155.9375 129.625 L 93.5625 129.625 L 187.125 1.875 Z M 280.75 129.625 "/> <path style=" stroke:none;fill-rule:nonzero;fill:{color};fill-opacity:1;" d="M 23.3125 171.5625 C 36.25 171.5625 46.6875 182.3125 46.6875 195.5 L 46.6875 315.25 L 327.5 315.25 L 327.5 195.5 C 327.5 182.25 338 171.5625 350.875 171.5625 C 363.8125 171.5625 374.3125 182.25 374.3125 195.5 L 374.3125 339.1875 C 374.3125 352.375 363.8125 363.125 350.9375 363.125 L 23.375 363.125 C 10.4375 363.125 0 352.375 0 339.1875 L 0 195.5 C -0.0625 182.25 10.4375 171.5625 23.3125 171.5625 Z M 23.3125 171.5625 "/> </g> </svg>
|
||||
287
src/index.css
287
src/index.css
|
|
@ -35,8 +35,10 @@
|
|||
--interactive-foreground: black;
|
||||
--interactive-contrast: #ff00ff;
|
||||
|
||||
--button-background: black;
|
||||
--button-background: #383838;
|
||||
--button-background-hover: #686868;
|
||||
--button-foreground: white;
|
||||
--disabled: #DBDBDB;
|
||||
|
||||
/**
|
||||
* Base colour of interactive elements, mainly the 'subtle button'
|
||||
|
|
@ -57,6 +59,11 @@
|
|||
--svg-color: #000000;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family:"Source Sans Pro";
|
||||
src:url("/assets/source-sans-pro.regular.ttf") format("woff");
|
||||
}
|
||||
|
||||
/***********************************************************************\
|
||||
* Various tweaks and settings to make some behaviours more predictable *
|
||||
\***********************************************************************/
|
||||
|
|
@ -69,7 +76,12 @@ body {
|
|||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
svg,
|
||||
|
|
@ -165,178 +177,86 @@ input[type="text"] {
|
|||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||
*/
|
||||
|
||||
button.small,
|
||||
.button.small {
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
height: fit-content;
|
||||
font-size: unset;
|
||||
border: 2px solid var(--button-background);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: normal;
|
||||
transition: all 250ms;
|
||||
--tw-text-opacity: 1;
|
||||
--tw-bg-opacity: 1;
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
/********* BUTTONS ***********/
|
||||
|
||||
button, .button {
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
margin: 0.25rem;
|
||||
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--foreground-color);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 30px;
|
||||
|
||||
background: var(--background-color);
|
||||
transition: all 200ms;
|
||||
|
||||
}
|
||||
|
||||
.button.theme-button {
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
button.w-full {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Margin should be removed on larger screens */
|
||||
@media (min-width: 768px) {
|
||||
button:hover:not(.disabled):not(.as-link), .button:hover:not(.disabled):not(.as-link) {
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
|
||||
button:focus, .button:focus {
|
||||
border-color: var(--interactive-contrast);
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--button-background);
|
||||
}
|
||||
|
||||
button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
|
||||
background-color: var(--button-background-hover);
|
||||
}
|
||||
|
||||
button.disabled {
|
||||
border-color: var(--disabled);
|
||||
color: var(--disabled);
|
||||
}
|
||||
|
||||
button.primary.disabled, .button.primary.disabled {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--disabled);
|
||||
}
|
||||
|
||||
|
||||
.low-interaction button:hover:not(.disabled):not(.as-link), .low-interaction .button:hover:not(.disabled):not(.as-link) {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--interactive-background);
|
||||
}
|
||||
|
||||
button.as-link {
|
||||
background-color: unset;
|
||||
display: inline-flex;
|
||||
justify-content: start;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
text-decoration: underline;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Experimental support for foldable devices */
|
||||
@media (horizontal-viewport-segments: 2) {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
line-height: 1.25rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.4rem;
|
||||
padding-left: 0.6rem;
|
||||
padding-right: 0.6rem;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
border: 2px solid var(--button-background);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 250ms;
|
||||
--tw-text-opacity: 1;
|
||||
--tw-bg-opacity: 1;
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
/******* Other input elements ******/
|
||||
|
||||
.hover-alert:hover {
|
||||
color: var(--catch-detail-color-contrast)
|
||||
}
|
||||
|
||||
.button-shadow {
|
||||
box-shadow: 0 5px 10px #88888888;
|
||||
}
|
||||
|
||||
button.selected,
|
||||
.button.selected {
|
||||
background-color: var(--catch-detail-color);
|
||||
border-color: var(--catch-detail-color);
|
||||
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
}
|
||||
|
||||
button.selected svg path,
|
||||
.button.selected svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
button:not(.no-image-background):not(.soft) svg path,
|
||||
.button:not(.no-image-background):not(.soft) svg path {
|
||||
fill: var(--interactive-foreground) !important;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.interactive button,
|
||||
.interactive .button {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
button:hover:not(.no-image-background) img,
|
||||
.button:hover:not(.no-image-background) img {
|
||||
background: var(--low-interaction-background);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
|
||||
button:hover:not(.no-image-background) svg path,
|
||||
.button:hover:not(.no-image-background) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
button.disabled:hover:not(.no-image-background) svg path,
|
||||
.button.disabled:hover:not(.no-image-background) svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
}
|
||||
|
||||
button.primary,
|
||||
.button.primary {
|
||||
color: var(--button-foreground);
|
||||
background: var(--button-background);
|
||||
}
|
||||
|
||||
button.primary:not(.no-image-background) svg path,
|
||||
.button.primary:not(.no-image-background) svg path {
|
||||
fill: var(--button-foreground) !important;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
button.disabled.low-interaction,
|
||||
.button.disabled.low-interaction {
|
||||
background-color: var(--low-interaction-background-50);
|
||||
}
|
||||
|
||||
button.disabled,
|
||||
.button.disabled {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.disabled:hover,
|
||||
.button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
button.link {
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
button.link:hover {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.interactive button.disabled svg path,
|
||||
.interactive .button.disabled svg path {
|
||||
fill: var(--interactive-foreground) !important;
|
||||
}
|
||||
|
||||
.low-interaction button.disabled svg path,
|
||||
.low-interaction .button.disabled svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
}
|
||||
|
||||
.normal-background button.disabled svg path,
|
||||
.normal-background .button.disabled svg path {
|
||||
fill: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
.links-w-full a:not(.weblate-link) {
|
||||
.links-w-full a:not(.weblate-link), .links-w-full button.as-link {
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
|
@ -344,41 +264,6 @@ button.link:hover {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
button.soft,
|
||||
.button.soft {
|
||||
border: 2px solid var(--interactive-background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.soft:hover,
|
||||
.button.soft:hover {
|
||||
background-color: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
.links-as-button a {
|
||||
/*
|
||||
* Let a 'link' mimick a button, but not entirely
|
||||
*/
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
border: 2px solid var(--interactive-background);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.links-as-button a:hover {
|
||||
background-color: var(--interactive-background);
|
||||
color: var(--interactive-foregroundcolor);
|
||||
border-color: var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
.links-as-button a:hover svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 2px solid #00000000;
|
||||
color: var(--foreground-color) !important;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import { FixedUiElement } from "./UI/Base/FixedUiElement"
|
|||
import Combine from "./UI/Base/Combine"
|
||||
import { SubtleButton } from "./UI/Base/SubtleButton"
|
||||
import { Utils } from "./Utils"
|
||||
import Download from "./assets/svg/Download.svelte"
|
||||
import Constants from "./Models/Constants"
|
||||
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
|
||||
|
||||
function webgl_support() {
|
||||
try {
|
||||
|
|
@ -66,7 +66,7 @@ async function main() {
|
|||
new FixedUiElement(err.toString().split("\n").join("<br/>")).SetClass("block alert"),
|
||||
|
||||
customDefinition?.length > 0
|
||||
? new SubtleButton(new SvelteUIElement(Download), "Download the raw file").onClick(
|
||||
? new SubtleButton(new SvelteUIElement(ArrowDownTray), "Download the raw file").onClick(
|
||||
() =>
|
||||
Utils.offerContentsAsDownloadableFile(
|
||||
DetermineLayout.getCustomDefinition(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue