forked from MapComplete/MapComplete
Make mapcontrol-button svgs styleable by colour
This commit is contained in:
parent
403bd54b96
commit
15e21544ba
5 changed files with 86 additions and 23 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import {CenterFlexedElement} from "./UI/Base/CenterFlexedElement";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
import Toggle from "./UI/Input/Toggle";
|
||||
import {Basemap} from "./UI/BigComponents/Basemap";
|
||||
|
|
@ -197,25 +196,23 @@ export class InitUiElements {
|
|||
State.state.currentGPSLocation,
|
||||
State.state.leafletMap,
|
||||
State.state.layoutToUse
|
||||
)
|
||||
), {
|
||||
dontStyle : true
|
||||
}
|
||||
),
|
||||
undefined,
|
||||
State.state.featureSwitchGeolocation
|
||||
);
|
||||
|
||||
const plus = new MapControlButton(
|
||||
new CenterFlexedElement(
|
||||
Img.AsImageElement(Svg.plus_zoom, "", "width:1.25rem;height:1.25rem")
|
||||
)
|
||||
Svg.plus_zoom_svg()
|
||||
).onClick(() => {
|
||||
State.state.locationControl.data.zoom++;
|
||||
State.state.locationControl.ping();
|
||||
});
|
||||
|
||||
const min = new MapControlButton(
|
||||
new CenterFlexedElement(
|
||||
Img.AsImageElement(Svg.min_zoom, "", "width:1.25rem;height:1.25rem")
|
||||
)
|
||||
Svg.min_zoom_svg()
|
||||
).onClick(() => {
|
||||
State.state.locationControl.data.zoom--;
|
||||
State.state.locationControl.ping();
|
||||
|
|
@ -383,9 +380,7 @@ export class InitUiElements {
|
|||
|
||||
|
||||
const filterMapControlButton = new MapControlButton(
|
||||
new CenterFlexedElement(
|
||||
Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
|
||||
)
|
||||
Svg.filter_svg()
|
||||
);
|
||||
|
||||
const filterButton = new Toggle(
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Img from "../../UI/Base/Img";
|
|||
import {LocalStorageSource} from "../Web/LocalStorageSource";
|
||||
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
|
||||
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
|
||||
import {CenterFlexedElement} from "../../UI/Base/CenterFlexedElement";
|
||||
import BaseUIElement from "../../UI/BaseUIElement";
|
||||
|
||||
export default class GeoLocationHandler extends VariableUiElement {
|
||||
/**
|
||||
|
|
@ -79,25 +79,23 @@ export default class GeoLocationHandler extends VariableUiElement {
|
|||
super(
|
||||
hasLocation.map(
|
||||
(hasLocationData) => {
|
||||
let icon: string;
|
||||
let icon: BaseUIElement;
|
||||
|
||||
if (isLocked.data) {
|
||||
icon = Svg.location;
|
||||
icon = Svg.location_svg();
|
||||
} else if (hasLocationData) {
|
||||
icon = Svg.location_empty;
|
||||
icon = Svg.location_empty_svg();
|
||||
} else if (isActive.data) {
|
||||
icon = Svg.location_empty;
|
||||
icon = Svg.location_empty_svg();
|
||||
} else {
|
||||
icon = Svg.location_circle;
|
||||
icon = Svg.location_circle_svg();
|
||||
}
|
||||
|
||||
return new CenterFlexedElement(
|
||||
Img.AsImageElement(icon, "", "width:1.25rem;height:1.25rem")
|
||||
);
|
||||
return icon
|
||||
},
|
||||
[isActive, isLocked]
|
||||
)
|
||||
);
|
||||
this.SetClass("mapcontrol")
|
||||
this._isActive = isActive;
|
||||
this._isLocked = isLocked;
|
||||
this._permission = new UIEventSource<string>("");
|
||||
|
|
|
|||
|
|
@ -5,8 +5,13 @@ import Combine from "./Base/Combine";
|
|||
* A button floating above the map, in a uniform style
|
||||
*/
|
||||
export default class MapControlButton extends Combine {
|
||||
constructor(contents: BaseUIElement) {
|
||||
constructor(contents: BaseUIElement, options?:{
|
||||
dontStyle?: boolean
|
||||
}) {
|
||||
super([contents]);
|
||||
if(!options?.dontStyle){
|
||||
contents.SetClass("mapcontrol p-1")
|
||||
}
|
||||
this.SetClass(
|
||||
"relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background m-0.5 md:m-1"
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1 +1,62 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><g id="Calque_1" data-name="Calque 1"><path class="cls-1" d="M12,7.71a4.37,4.37,0,0,1,2.4.73,4.3,4.3,0,0,1,1.83,4.43,4.31,4.31,0,0,1-3.39,3.39A4.32,4.32,0,1,1,12,7.71Z"/><path class="cls-2" d="M12,4.7a7.36,7.36,0,0,1,6.8,4.54,7.36,7.36,0,0,1-12.92,6.9A7.36,7.36,0,0,1,12,4.7Z"/></g></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<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"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg11"
|
||||
sodipodi:docname="location-circle.svg"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
|
||||
<metadata
|
||||
id="metadata15">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="999"
|
||||
id="namedview13"
|
||||
showgrid="false"
|
||||
inkscape:zoom="19.666667"
|
||||
inkscape:cx="15.349556"
|
||||
inkscape:cy="11.585617"
|
||||
inkscape:window-x="1680"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg11" />
|
||||
<defs
|
||||
id="defs4">
|
||||
<style
|
||||
id="style2">.cls-1{fill:#000;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}</style>
|
||||
</defs>
|
||||
<path
|
||||
style="fill:#000000"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path6"
|
||||
d="m 12,7.71 a 4.37,4.37 0 0 1 2.4,0.73 4.3,4.3 0 0 1 1.83,4.43 4.31,4.31 0 0 1 -3.39,3.39 A 4.32,4.32 0 1 1 12,7.71 Z"
|
||||
class="cls-1" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M 12,3.9492188 C 5.5686003,3.954127 1.690624,11.203882 5.2558594,16.556641 h 0.00195 c 2.6718604,3.989543 7.2401435,4.412862 10.5585935,2.640625 3.318451,-1.772238 5.507368,-5.802848 3.677735,-10.2421879 l -0.002,-0.00195 C 18.236517,5.9260126 15.277212,3.9484722 12,3.9492188 Z m 0,1.5 c 2.674974,-6.094e-4 5.0825,1.6072908 6.107422,4.078125 1.553254,3.7713402 -0.246448,6.8781492 -2.998047,8.3476562 -2.751726,1.469575 -6.3350719,1.238395 -8.6054688,-2.150391 v -0.002 C 3.5579114,11.297176 6.6831292,5.4532764 12,5.4492188 Z"
|
||||
id="path8"
|
||||
inkscape:connector-curvature="0" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 464 B After Width: | Height: | Size: 3.6 KiB |
|
|
@ -93,6 +93,10 @@ svg, img {
|
|||
display: unset;
|
||||
}
|
||||
|
||||
.mapcontrol svg path{
|
||||
fill: var(--subtle-detail-color-contrast);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue