midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more custom filter on layers

Browse source
This commit is contained in:
Ward 2021-07-20 16:29:48 +02:00
parent 2c9f737cbd
commit 34b87e7b7e
5 changed files with 89 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Svg.ts
View file

@ -54,6 +54,16 @@ export default class Svg {
public static camera_plus_svg() { return new Img(Svg.camera_plus, true);}
public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}
public static checkbox_empty = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" stroke=\"#007759\" stroke-width=\"2\"/> </svg> "
public static checkbox_empty_img = Img.AsImageElement(Svg.checkbox_empty)
public static checkbox_empty_svg() { return new Img(Svg.checkbox_empty, true);}
public static checkbox_empty_ui() { return new FixedUiElement(Svg.checkbox_empty_img);}
public static checkbox_filled = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" fill=\"#007759\" stroke=\"#007759\" stroke-width=\"2\"/> <path d=\"M3.5 8L8 13L14 5\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg> "
public static checkbox_filled_img = Img.AsImageElement(Svg.checkbox_filled)
public static checkbox_filled_svg() { return new Img(Svg.checkbox_filled, true);}
public static checkbox_filled_ui() { return new FixedUiElement(Svg.checkbox_filled_img);}
public static checkmark = "<svg width=\"26\" height=\"18\" viewBox=\"0 0 26 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 7.28571L10.8261 15L23 3\" stroke=\"black\" stroke-width=\"4\" stroke-linejoin=\"round\" style=\"fill:none !important;\"/></svg>"
public static checkmark_img = Img.AsImageElement(Svg.checkmark)
public static checkmark_svg() { return new Img(Svg.checkmark, true);}
@ -359,4 +369,4 @@ export default class Svg {
public static wikipedia_svg() { return new Img(Svg.wikipedia, true);}
public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);}
public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkbox-empty.svg": Svg.checkbox_empty,"checkbox-filled.svg": Svg.checkbox_filled,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}

53
UI/BigComponents/FilterView.ts
View file

@ -10,6 +10,7 @@ import LayerConfig from "../../Customizations/JSON/LayerConfig";
import BaseUIElement from "../BaseUIElement";
import { Translation } from "../i18n/Translation";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Svg from "../../Svg";
/**
* Shows the filter
@ -26,14 +27,54 @@ export default class FilterView extends ScrollableFullScreen {
}
private static Generatecontent(): BaseUIElement {
let filterPanel: BaseUIElement = new FixedUiElement("more stuff");
let filterPanel: BaseUIElement = new FixedUiElement("");
if (State.state.filteredLayers.data.length > 1) {
let layers = State.state.filteredLayers;
console.log(layers);
filterPanel = new Combine(["layerssss", "<br/>", filterPanel]);
}
let activeLayers = State.state.filteredLayers;
return filterPanel;
if (activeLayers === undefined) {
throw "ActiveLayers should be defined...";
}
const checkboxes: BaseUIElement[] = [];
for (const layer of activeLayers.data) {
const icon = new Combine([Svg.checkbox_filled]).SetStyle(
"width:1.5rem;height:1.5rem"
);
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
"width:1.5rem;height:1.5rem"
);
if (layer.layerDef.name === undefined) {
continue;
}
const style = "display:flex;align-items:center;color:#007759";
const name: Translation = Translations.WT(layer.layerDef.name)?.Clone();
name.SetStyle("font-size:large;");
const layerChecked = new Combine([icon, name.Clone()]).SetStyle(style);
const layerNotChecked = new Combine([
iconUnselected,
name.Clone(),
]).SetStyle(style);
checkboxes.push(
new Toggle(layerChecked, layerNotChecked, layer.isDisplayed)
.ToggleOnClick()
.SetStyle("margin:0.3em;")
);
}
let combinedCheckboxes = new Combine(checkboxes);
combinedCheckboxes.SetStyle("display:flex;flex-direction:column;");
filterPanel = new Combine([combinedCheckboxes]);
return filterPanel;
}
}
}

3
assets/svg/checkbox-empty.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="16" height="16" rx="3" stroke="#007759" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

4
assets/svg/checkbox-filled.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="16" height="16" rx="3" fill="#007759" stroke="#007759" stroke-width="2"/>
<path d="M3.5 8L8 13L14 5" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 286 B

24
assets/svg/license_info.json
View file

@ -614,5 +614,29 @@
"path": "filter.svg",
"license": "CC0",
"sources": []
},
{
"authors": [
"Hannah Declerck"
],
"path": "checkbox-empty.svg",
"license": "CC0",
"sources": []
},
{
"authors": [
"Hannah Declerck"
],
"path": "checkbox-filled.svg",
"license": "CC0",
"sources": []
},
{
"authors": [
"Hannah Declerck"
],
"path": "arrow-left-thin.svg",
"license": "CC0",
"sources": []
}
]