svg.escobar.life

A simple SVG markup editor for the web

Commit: 65060d8b36936357d3f332862abc0dc152da6cd4
Parent: a4ef8744d7033086280bc64c6ebac079e44d73ff
Author: Pablo <pablo-escobar@riseup.net>
Date: Fri, 2 Dec 2022 18:44:51 +0000

Replaced icons with text in the user interface

Replaced the button icons in the image viewer for plain text

This should make the interface more accessible

Diffstat

6 files changed, 17 insertions, 71 deletions

Status	File Name	N° Changes	Insertions	Deletions
Deleted	assets/bulb-off.svg	5	0	5
Deleted	assets/bulb-on.svg	9	0	9
Deleted	assets/download.svg	7	0	7
Deleted	assets/upload.svg	7	0	7
Modified	css/styles.css	21	13	8
Modified	src/View.elm	39	4	35

diff --git a/assets/bulb-off.svg b/assets/bulb-off.svg
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Caubi Karman (C) 2020 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.852 1.852">
-  <path fill="#dfdfdf" d="M.53.53v.793h.793V.529z"/>
-</svg>

diff --git a/assets/bulb-on.svg b/assets/bulb-on.svg
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Caubi Karman (C) 2020 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.852 1.852">
-  <path fill="#dfdfdf" 
-        d="M0 0v.265h.265V0H0zm.794 0v.265h.264V0H.794zm.793 0v.265h.265V0h
-           -.265zM.53.53v.793h.794V.529H.529zM0 .793v.264h.265V.794H0zm1.587 
-           0v.264h.265V.794h-.265zM0 1.587v.265h.265v-.265H0zm.794 
-           0v.265h.264v-.265H.794zm.793 0v.265h.265v-.265h-.265z"/>
-</svg>

diff --git a/assets/download.svg b/assets/download.svg
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Caubi Karman (C) 2020 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
-    <path fill="#dfdfdf" 
-          d="M2.502 0h1.996v2.003H6.5L3.5 5.001.499 
-             1.999h2.003zM1.501 5.998V7h3.998V5.998z"/>
-</svg>

diff --git a/assets/upload.svg b/assets/upload.svg
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Caubi Karman (C) 2020 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
-    <path fill="#dfdfdf" 
-          d="M4.498 7H2.502V4.997H.5L3.5 1.999l3.001 
-             3.002H4.498zm1.001-5.998V0H1.501v1.002z"/>
-</svg>

diff --git a/css/styles.css b/css/styles.css
@@ -68,9 +68,9 @@ body {
     display: grid;
 
     grid-template-rows: auto 2em;
-    grid-template-columns: repeat(3, 2em) auto;
-    grid-template-areas: "image  image  image  image"
-                         "button button button .";
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas: "image  image  image"
+                         "button button button";
     grid-gap: 1em;
 
     padding: 1em;
@@ -87,14 +87,19 @@ body {
 
     background: var(--background);
     border: none;
-
     cursor: pointer;
+
+    font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace;
+    font-size: 13pt;
+    line-height: 2em;
+    text-align: center;
+    color: var(--foreground);
+
+    overflow-y: hidden;
 }
 
-#container #display button img {
-    width: 70% !important;
-    height: 70% !important;
-    margin: auto;
+#container #display button span {
+  margin: 0 auto;
 }
 
 #container #display img#error {

diff --git a/src/View.elm b/src/View.elm
@@ -29,7 +29,7 @@ import Html.Lazy exposing (lazy)
 import Accessibility.Landmark exposing (application, region)
 import Accessibility.Role exposing (alert)
 import Accessibility.Key exposing (onKeyDown, enter)
-import Accessibility.Widget exposing (label, hidden)
+import Accessibility.Widget exposing (label)
 import Browser exposing (Document)
 import Json.Decode
 import Regex exposing (Regex, Match, replace)
@@ -80,17 +80,17 @@ display model =
         [ onClick Download
         , label "Download file"
         ] 
-        [ downloadIcon ]
+        [ span [] [ text "Download" ] ]
     , button 
         [ onClick (Upload Requested)
         , label "Upload file"
         ] 
-        [ uploadIcon ]
+        [ span [] [ text "Upload" ] ]
     , button 
         [ onClick ToggleDarkMode
         , label "Toggle dark mode"
         ] 
-        [ bulbIcon model ]
+        [ span [] [ text (if model.darkModeOn then "Lighter" else "Darker") ] ]
     ]
 
 uri : Model -> String
@@ -146,37 +146,6 @@ valid status =
     Invalid -> 
       False
 
-downloadIcon : Html Msg
-downloadIcon = 
-  img 
-    [ src "assets/download.svg"
-    , hidden True
-    , alt "Download file"
-    ] 
-    []
-
-uploadIcon : Html Msg
-uploadIcon = 
-  img 
-    [ src "assets/upload.svg"
-    , hidden True
-    , alt "Upload file"
-    ] 
-    []
-
-bulbIcon : Model -> Html Msg
-bulbIcon model =
-  let
-    bulbOn = "assets/bulb-on.svg" 
-    bulbOff = "assets/bulb-off.svg"
-  in
-    img 
-      [ src (if model.darkModeOn then bulbOn else bulbOff)
-      , hidden True
-      , alt "Toggle dark mode"
-      ] 
-      []
-
 errorIcon : Html Msg
 errorIcon = 
   img