diff --git a/Svg.ts b/Svg.ts index 22ea0e1158..ab5ef6569a 100644 --- a/Svg.ts +++ b/Svg.ts @@ -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 = " " + 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 = " " + 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 = "" 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};} diff --git a/UI/BigComponents/FilterView.ts b/UI/BigComponents/FilterView.ts index b2ee12c16b..1aff3d6f89 100644 --- a/UI/BigComponents/FilterView.ts +++ b/UI/BigComponents/FilterView.ts @@ -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", "
", 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; + } } } diff --git a/assets/svg/checkbox-empty.svg b/assets/svg/checkbox-empty.svg new file mode 100644 index 0000000000..e4a9dc8663 --- /dev/null +++ b/assets/svg/checkbox-empty.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/checkbox-filled.svg b/assets/svg/checkbox-filled.svg new file mode 100644 index 0000000000..166f917855 --- /dev/null +++ b/assets/svg/checkbox-filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/license_info.json b/assets/svg/license_info.json index 2f85396c2b..ccdac7acf7 100644 --- a/assets/svg/license_info.json +++ b/assets/svg/license_info.json @@ -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": [] } ] \ No newline at end of file