svg.escobar.life

A simple SVG markup editor for the web

Commit: d214105464281811759ae9ec1849bb26fc92da44
Parent: 4e24c53847b869eab6ecb1ccd936b6023e02fa65
Author: Gark Garcia <37553739+GarkGarcia@users.noreply.github.com>
Date: Wed, 7 Aug 2019 19:09:10 -0300

Removed the red-coloring functionality.

Diffstat

13 files changed, 47 insertions, 226 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	assets/download.svg	2	1	1
Modified	assets/error.svg	2	1	1
Modified	assets/github.svg	2	1	1
Modified	assets/logo.svg	2	1	1
Modified	assets/moon.svg	2	1	1
Modified	assets/sun.svg	2	1	1
Modified	assets/upload.svg	2	1	1
Modified	elm.json	2	0	2
Deleted	src/Icon.elm	72	0	72
Modified	src/Main.elm	84	4	80
Modified	src/Types.elm	8	0	8
Modified	src/View.elm	47	29	18
Modified	styles.css	46	7	39

diff --git a/assets/download.svg b/assets/download.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#eeeeff" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="8" stroke-width=".02in" viewBox="0 0 50 50">
     <path d="M25 8.125v21.75m-5.25-5.25l5.25 5.25m5.25-5.25L25 29.875m-4.5-12.75h-8.25v24.75h25.5v-24.75H29.5"/>
 </svg>

diff --git a/assets/error.svg b/assets/error.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
-<svg id="error" xmlns="http://www.w3.org/2000/svg" version="1" width="402" height="402" viewBox="0 0 402 402">
+<svg id="error" xmlns="http://www.w3.org/2000/svg" fill="#2D2B55" width="402" height="402" viewBox="0 0 402 402">
   <!-- Icon by Dave Gandy (https://www.flaticon.com/authors/dave-gandy). Download at https://www.flaticon.com/free-icon/exclamation_25652 -->
   <path d="M238 301h-74c-4 0-9 2-12 6-4 4-6 8-6 13v64c0 5 2 9 6 13 3 3 8 5 12 5h74c4 0 9-2 12-5 4-4 6-8 6-13v-64c0-5-2-9-6-13-3-4-8-6-12-6zM259 5c-3-3-7-5-12-5h-92c-5 0-9 2-12 5-4 4-6 8-5 13l8 220c0 4 2 9 5 12 4 4 9 6 13 6h74c4 0 9-2 13-6 3-3 5-8 5-12l8-220c1-5-1-9-5-13z"/>
 </svg> 
\ No newline at end of file

diff --git a/assets/github.svg b/assets/github.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#2D2B55" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="8" stroke-width=".02in" viewBox="0 0 50 50">
     <path d="M20.47 41.72473l-.0525-7.53-.5475.09c-.345.0675-.7875.0975-1.32.0825-.54 0-1.0875-.06-1.665-.165-.58125-.1065-1.1295-.351-1.5975-.7125-.49125-.372-.858-.885-1.05-1.47l-.24-.5475c-.20025-.4335-.45225-.8415-.75-1.215-.345-.45-.69-.75-1.035-.9075l-.1725-.12c-.22125-.1635-.40125-.3765-.525-.6225-.045-.1125 0-.2025.12-.2775.1275-.075.36-.105.6975-.105l.4725.075c.3225.06.7125.2475 1.185.57.465.315.855.735 1.155 1.2375.31575.59925.771 1.11375 1.3275 1.5.5175.3375 1.035.51 1.56.51.525 0 .975-.045 1.365-.12.375-.075.735-.2025 1.0725-.36.1425-1.065.525-1.8825 1.17-2.46-.9075-.09-1.725-.2325-2.4525-.4275-.72-.195-1.47-.5025-2.2425-.93-.738-.402-1.3905-.945-1.92-1.5975-.5685-.75375-.993-1.605-1.2525-2.5125-.34275-1.161-.507-2.367-.4875-3.5775 0-1.9275.63-3.5625 1.8825-4.9125-.585-1.455-.525-3.075.1725-4.875.4575-.1425 1.14-.03 2.0475.3225 1.0605.402 2.07.9285 3.0075 1.5675 1.485-.4125 3.0075-.6225 4.5825-.6225 1.575 0 3.105.21 4.5825.6225l.9075-.5775c.6225-.375 1.35-.7275 2.1975-1.05.84-.315 1.485-.405 1.935-.2625.7125 1.8.78 3.4275.1875 4.875 1.248 1.32675 1.9275 3.0915 1.89 4.9125 0 1.35-.165 2.55-.495 3.6-.3225 1.035-.75 1.875-1.26 2.4975-.53925.64725-1.1955 1.1865-1.935 1.59-.708.40275-1.464.7155-2.25.93-.72.195-1.53.3375-2.4375.4275.825.72 1.2375 1.845 1.2375 3.39v9.15s-.8145 2.004-4.5375 2.004-4.53-1.9965-4.53-1.9965z"/>
 </svg>

diff --git a/assets/logo.svg b/assets/logo.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 18">
+<svg xmlns="http://www.w3.org/2000/svg" fill="#eeeeff" viewBox="0 0 100 18">
     <path d="M8.68 13.473H7.16L6.24 18H.05L3.72 0h8.23c2.41 0 4.29.522 5.63 1.557 1.33 1.035 2 2.493 2 4.356.153 2.9925-1.847 5.7555-4.95 6.84l3.01 5.166L29.28 0h6.08l4.35 18h-6.16l-.6-3.141h-7L24.12 18H11.27l-2.6-4.527h.01zM50.93 18H44.3L42.1 0h6.1l1.19 10.26L54.84 0h5.69l1.04 10.413L67.11 0h6.08l-9.54 18H57l-1.04-9.486L50.93 18zm23.57 0c-.8 0-1.58-.09-2.34-.27-.663-.1368-1.296-.3744-1.87-.702l1.05-2.34c.959.5391 2.06.8406 3.19.873.45 0 .77-.045.97-.126.19-.09.29-.216.29-.387 0-.198-.13-.36-.38-.45-.406-.1395-.824-.2484-1.25-.324-.636-.1233-1.261-.2889-1.87-.495-.5-.18-.93-.468-1.3-.873-.39-.468-.585-1.0449-.55-1.629 0-.594.17-1.143.5-1.629.35-.486.86-.873 1.54-1.152.67-.279 1.5-.423 2.46-.423.67 0 1.32.072 1.96.216.64.135 1.2.342 1.7.612l-.99 2.322c-.818-.4392-1.748-.684-2.7-.711-.83 0-1.25.207-1.25.603 0 .18.12.333.37.423.25.09.66.198 1.23.306.74.135 1.36.288 1.87.468.5.18.94.468 1.32.864.37.396.56.936.56 1.62.019 1.2132-.793 2.3202-2.04 2.781-.779.3015-1.622.4464-2.47.423zm22.39-5.22h2.83v4.014c-.57.387-1.23.684-1.99.9-.75.198-1.5.306-2.22.306-.972.0144-1.931-.2034-2.78-.63-.814-.414-1.483-1.0251-1.93-1.764-.475-.7866-.716-1.6704-.7-2.565 0-.963.24-1.818.7-2.574.451-.7425 1.127-1.3545 1.95-1.764.83-.414 1.78-.63 2.83-.63.95 0 1.8.162 2.55.468.75.315 1.37.765 1.87 1.368l-2.09 1.8c-.6-.693-1.33-1.044-2.17-1.044-.72 0-1.29.216-1.71.63-.452.4878-.681 1.1124-.64 1.746 0 .711.21 1.287.63 1.719.42.432.98.648 1.68.648.42 0 .81-.072 1.19-.225V12.78zm-10.67 5.004h-3.2L78.91 8.28h3.51l2.31 5.553L87.1 8.28h3.2l-4.09 9.495.01.009zm-54.14-7.29l-.89-4.608-2.7 4.608h3.6-.01zM11.01 4.68H8.94l-.87 4.221h2.55c.85 0 1.52-.216 1.99-.63.47-.423.7-1.008.7-1.764 0-1.215-.76-1.827-2.3-1.827z"/>
 </svg>

diff --git a/assets/moon.svg b/assets/moon.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#eeeeff" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="8" stroke-width=".02in" viewBox="0 0 50 50">
     <path d="M17.5795 9.67225c-.23175 1.1295-.348 2.27925-.34725 3.432 0 9.39 7.63875 17.0145 17.049 17.0145 2.72775 0 5.30625-.6405 7.59375-1.77975-1.59225 7.7475-8.469 13.58325-16.701 13.58325-9.4095 0-17.049-7.6245-17.049-17.0145 0-6.669 3.852-12.4455 9.4545-15.2355z"/>
 </svg>

diff --git a/assets/sun.svg b/assets/sun.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#eeeeff" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="8" stroke-width=".02in" viewBox="0 0 50 50">
     <path d="M25 15.6895c5.139 0 9.3105 4.1715 9.3105 9.3105 0 5.139-4.1715 9.3105-9.3105 9.3105-5.139 0-9.3105-4.1715-9.3105-9.3105 0-5.139 4.1715-9.3105 9.3105-9.3105zm0-7.5645v3.49125m0 26.7675V41.875M41.875 25h-3.49125m-26.7675 0H8.125m4.07325-12.80175l3.49125 3.49125m22.113-3.49125l-3.49125 3.49125M12.1975 37.8025l3.49125-3.49125M37.801 37.8025l-3.49125-3.49125"/>
 </svg>

diff --git a/assets/upload.svg b/assets/upload.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#eeeeff" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="8" stroke-width=".02in" viewBox="0 0 50 50">
     <path d="M25 29.875V8.125m-5.25 4.5l5.25-4.5m5.25 4.5L25 8.125m-4.5 9h-8.25v24.75h25.5v-24.75H29.5"/>
 </svg>

diff --git a/elm.json b/elm.json
@@ -6,7 +6,6 @@
     "elm-version": "0.19.0",
     "dependencies": {
         "direct": {
-            "Garados007/elm-svg-parser": "1.0.0",
             "elm/browser": "1.0.1",
             "elm/core": "1.0.2",
             "elm/file": "1.0.5",
@@ -14,7 +13,6 @@
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
             "elm/regex": "1.0.0",
-            "elm/svg": "1.0.1",
             "pablohirafuji/elm-syntax-highlight": "3.1.0"
         },
         "indirect": {

diff --git a/src/Icon.elm b/src/Icon.elm
@@ -1,71 +0,0 @@
-module Icon exposing (..)
-
-type Icon s = Logo s | Download s | Upload s | Moon s | Sun s | Github s | Error s
-
-type alias Icons s =
-    { logo : s
-    , download : s
-    , upload : s
-    , moon : s
-    , sun : s
-    , github : s
-    , error : s
-    }
-    
-unwrap : Icon s -> s
-unwrap icon =
-    case icon of
-        Logo internal -> internal
-
-        Download internal -> internal
-
-        Upload internal -> internal
-
-        Moon internal -> internal
-
-        Sun internal -> internal
-
-        Github internal -> internal
-
-        Error internal -> internal
-        
-map : (a -> b) -> Icon a -> Icon b
-map f icon =
-    case icon of
-        Logo s -> Logo (f s)
-    
-        Download s -> Download (f s)
-    
-        Upload s -> Upload (f s)
-    
-        Moon s -> Moon (f s)
-    
-        Sun s -> Sun (f s)
-    
-        Github s -> Github (f s)
-    
-        Error s -> Error (f s)
-            
-load : Icons s -> Icon s -> Icons s
-load icons icon =
-    case icon of
-        Logo svg ->
-            { icons | logo = svg }
-
-        Download svg ->
-            { icons | download = svg }
-
-        Upload svg ->
-            { icons | upload = svg }
-
-        Moon svg ->
-            { icons | moon = svg }
-
-        Sun svg ->
-            { icons | sun = svg }
-
-        Github svg ->
-            { icons | github = svg }
-
-        Error svg ->
-            { icons | error = svg }-
\ No newline at end of file

diff --git a/src/Main.elm b/src/Main.elm
@@ -2,9 +2,6 @@ module Main exposing (main)
 
 import View exposing (view)
 import Types exposing (..)
-import Icon exposing (Icon, Icons)
-import Html exposing (Html, img)
-import Html.Attributes exposing (src)
 import Browser exposing (document)
 import Http
 import File exposing (File)
@@ -12,7 +9,6 @@ import File.Download as Download
 import File.Select as Select
 import Regex
 import Task
-import SvgParser exposing (parse)
 
 
 main : Program () Model Msg
@@ -31,13 +27,6 @@ update msg model =
         Update image ->
             ({ model | image = image }, Cmd.none)
 
-        Load icon ->
-            let
-                loaded =
-                    Result.withDefault model (Result.map (load model) icon)
-            in
-                ({ loaded | load = increment loaded.load }, Cmd.none)
-
         Validation val ->
             ({ model | isValid = val }, Cmd.none)
 
@@ -53,19 +42,6 @@ update msg model =
         Scroll scroll ->
             ({model | editorScroll = scroll}, Cmd.none)
 
-load : Model -> Icon String -> Model
-load model icon =
-    let
-        pop i =
-            case Icon.unwrap i of
-                Ok data -> Ok (Icon.map (\_ -> data) i)
-
-                Err err -> Err err
-        icons =
-            Result.withDefault model.icons (Result.map (Icon.load model.icons) (pop (Icon.map parse icon)))
-    in
-        { model | icons = icons }
-
 upload : Model -> Upload -> (Model, Cmd Msg)
 upload model upl =
     case upl of
@@ -75,15 +51,6 @@ upload model upl =
         Selected file ->
             ({ model | fileName = File.name file }, Task.perform Update (File.toString file))
 
-increment : Load -> Load
-increment l =
-    case l of
-        Loaded -> Loaded
-
-        Loading 6 -> Loaded
-
-        Loading n -> Loading (n + 1)
-
 init : Model
 init =
     { image = ""
@@ -93,54 +60,11 @@ init =
         <| Regex.fromString "!|#|\\$|%|&|'|\\(|\\)|\\*|\\+|,|\\/|:|;|=|\\?|@|\\[|\\]"
     , fileName = "example.svg"
     , editorScroll = (0, 0)
-    , icons = initIcons
-    , load = Loading 0
-    }
-
-initIcons : Icons (Html Msg)
-initIcons =
-    { logo = img [ src "assets/logo.svg" ] []
-    , download = img [ src "assets/download.svg" ] []
-    , upload = img [ src "assets/upload.svg" ] []
-    , moon = img [ src "assets/moon.svg" ] []
-    , sun = img [ src "assets/sun.svg" ] []
-    , github = img [ src "assets/github.svg" ] []
-    , error = img [ src "assets/error.svg" ] []
     }
 
 loadContent : Cmd Msg
 loadContent =
-    Cmd.batch
-        [ Http.get
-            { url = "assets/logo.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Logo res))
-            }
-        , Http.get
-            { url = "assets/download.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Download res))
-            }
-        , Http.get
-            { url = "assets/upload.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Upload res))
-            }
-        , Http.get
-            { url = "assets/moon.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Moon res))
-            }
-        , Http.get
-            { url = "assets/sun.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Sun res))
-            }
-        , Http.get
-            { url = "assets/github.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Github res))
-            }
-        , Http.get
-            { url = "assets/error.svg"
-            , expect = Http.expectString (\res -> Load (Result.map Icon.Error res))
-            }
-        , Http.get
-            { url = "assets/example.svg"
-            , expect = Http.expectString (\res -> Result.withDefault (Update "") (Result.map Update res))
-            }
-        ]
+    Http.get
+        { url = "assets/example.svg"
+        , expect = Http.expectString (\res -> Result.withDefault (Update "") (Result.map Update res))
+        }

diff --git a/src/Types.elm b/src/Types.elm
@@ -1,10 +1,7 @@
 module Types exposing (..)
 
-import Icon exposing (Icon, Icons)
-import Html exposing (Html)
 import File exposing (File)
 import Regex exposing (Regex)
-import Http
 
 type alias Model =
     { image : String
@@ -13,17 +10,12 @@ type alias Model =
     , uriEncoder : Regex
     , fileName : String
     , editorScroll : (Int, Int)
-    , icons : Icons (Html Msg)
-    , load : Load
     }
 
 type Upload = Requested | Selected File
 
-type Load = Loaded | Loading Int
-
 type Msg
     = Update String
-    | Load (Result Http.Error (Icon String))
     | Validation Bool
     | ToggleDarkMode
     | Download

diff --git a/src/View.elm b/src/View.elm
@@ -15,21 +15,14 @@ import Regex exposing (Regex, Match, replace)
 view : Model -> Document Msg
 view model =
     { title = "RawSvg"
-    , body =
-        case model.load of
-            Loaded -> [ lazy container model ]
-
-            Loading _ -> []
+    , body = [ lazy container model ]
     }
 
 container : Model -> Html Msg
 container model =
     div [ id "container", class (if model.isValid then "" else "error") ]
         [ div [ id "title" ]
-            [ model.icons.logo
-            , githubLink model
-            , span [ class "elmsh-comm" ] [ text "<!-- GarkGarcia ⓒ 2019 -->" ]
-            ]
+            [ logo, githubLink, span [ class "elmsh-comm" ] [ text "<!-- GarkGarcia © 2019 -->" ] ]
         , display model
         , lazy editor model
         ]
@@ -37,12 +30,12 @@ container model =
 display : Model -> Html Msg
 display model =
     div [ id "display", class (if model.darkMode then "dark" else "") ]
-        [ img [ src (uri model), load model ] []
-        , model.icons.error
-        , button [ onClick Download ] [ model.icons.download ]
-        , button [ onClick (Upload Requested) ] [ model.icons.upload ]
+        [ img [ id "image", src (uri model), load model ] []
+        , errorIcon
+        , button [ onClick Download ] [ downloadIcon ]
+        , button [ onClick (Upload Requested) ] [ uploadIcon ]
         , button [ onClick ToggleDarkMode ]
-            [ if model.darkMode then model.icons.sun else model.icons.moon ]
+            [ if model.darkMode then sunIcon else moonIcon ]
         ]
 
 uri : Model -> String
@@ -84,8 +77,26 @@ onLoad f =
 load : Model -> Attribute Msg
 load model =
     if model.isValid then onError (Validation False) else onLoad (Validation True)
+        
+logo : Html Msg
+logo = img [ src "assets/logo.svg" ] []
+
+downloadIcon : Html Msg
+downloadIcon = img [ src "assets/download.svg" ] []
+
+uploadIcon : Html Msg
+uploadIcon = img [ src "assets/upload.svg" ] []
+
+moonIcon : Html Msg
+moonIcon = img [ src "assets/moon.svg" ] []
+
+sunIcon : Html Msg
+sunIcon = img [ src "assets/sun.svg" ] []
+
+errorIcon : Html Msg
+errorIcon = img [ id "error", src "assets/error.svg" ] []
 
-githubLink : Model -> Html Msg
-githubLink model =
+githubLink : Html Msg
+githubLink =
     a [ href "https://github.com/GarkGarcia/RawSvg", target "_blank", rel "noopener noreferrer"]
-        [ model.icons.github ]-
\ No newline at end of file
+        [ img [ src "assets/github.svg" ] [] ]+
\ No newline at end of file

diff --git a/styles.css b/styles.css
@@ -56,16 +56,6 @@
     width: 0px; /*Chrome + Safari + Opera*/
 }
 
-svg {
-    fill: none;
-    fill-rule: evenodd;
-    
-    stroke-linejoin: round;
-    stroke-linecap: round;
-    stroke-miterlimit: 8;
-    stroke-width: .02in;
-}
-
 *:focus {
     outline: none;
 }
@@ -127,10 +117,7 @@ body > div#container > div#title > * {
     white-space: nowrap;
 }
 
-body > div#container > div#title > svg {
-    fill: var(--light);
-    stroke-width: 0;
-
+body > div#container > div#title > img {
     max-height: 100% !important;
     max-width: calc(22 * var(--tiny));
 }
@@ -148,11 +135,9 @@ body > div#container > div#title > a {
     background: var(--light);
 }
 
-body > div#container > div#title > a > svg {
+body > div#container > div#title > a > img {
     width: 100% !important;
     height: 100% !important;
-    
-    stroke: var(--background);
 }
 
 body > div#container > div#title > span {
@@ -163,7 +148,7 @@ body > div#container > div#title > span {
     float: right;
 }
 
-body > div#container > div#display > svg#error, body > div#container > div#display > img {
+body > div#container > div#display > img#error, body > div#container > div#display > img {
     grid-area: image;
 
     max-width: 100% !important;
@@ -177,19 +162,6 @@ body > div#container, body > div#container > * {
     transition: background-color .25s ease, fill .25s ease;
 }
 
-body > div#container.error {
-    --background: #913534;
-    --selection: #f12b5c40;
-    --light: #ffefef;
-
-    --dark: #220000;
-
-    --tag: #9EFFFF;
-    --prop: #FAD000;
-    --string: #A5FF90;
-    --comm: #ff75ba;
-}
-
 body > div#container > div#display {
     display: grid;
     grid-area: display;
@@ -225,27 +197,23 @@ body > div#container > div#display > button {
     cursor: pointer;
 }
 
-body > div#container > div#display > button > svg {
+body > div#container > div#display > button > img {
     width: 100% !important;
     height: 100% !important;
-
-    stroke: var(--light);
 }
 
-body > div#container > div#display > svg#error {
+body > div#container > div#display > img#error {
     width: calc(100% - 2 * var(--tiny));
     height: calc(100% - 2 * var(--tiny));
 
     margin: var(--tiny);
-
-    fill: var(--background);
 }
 
-body > div#container > div#display > svg#error, div#container.error > div#display > img {
+body > div#container > div#display > img#error, div#container.error > div#display > img#image {
     display: none;
 }
 
-body > div#container.error > div#display > svg#error {
+body > div#container.error > div#display > img#error {
     display: block;
 }