Skip to content

Commit

Permalink
Add logo and icon to the user interface ✨💎
Browse files Browse the repository at this point in the history 
+ Create an icon and display it in the upper left corner.
+ Add a new bar at the top to contain the new logo and the project-scoped buttons.
+ Also integrate the new icon as the HTML document favicon.
+ Also, remove redundant UI elements from the view of failed loading.

These tools helped make the icon:
+ https://danmarshall.github.io/google-font-to-svg-path/
+ https://yqnn.github.io/svg-path-editor/
+ https://vectr.com/
  • Loading branch information
@Viir
Viir committed Mar 14, 2021
1 parent df29d78 commit 80f8730
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 38 deletions.
7 changes: 6 additions & 1 deletion implement/example-apps/elm-editor/src/Backend/Main.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,12 @@ frontendHtmlDocument { debug } =
<head>
<meta charset="UTF-8">
<title>Elm Editor</title>
<script type="text/javascript" src=""" ++ elmMadeScriptFileName ++ """></script>
<link rel="icon" href="data:image/svg+xml;base64,"""
++ (ElmFullstackCompilerInterface.SourceFiles.file____static_favicon_svg |> Base64.fromBytes |> Maybe.withDefault "Failed to encode as base64")
++ """">
<script type="text/javascript" src="""
++ elmMadeScriptFileName
++ """></script>
</head>
<body>
Expand Down
7 changes: 7 additions & 0 deletions implement/example-apps/elm-editor/src/ElmFullstackCompilerInterface/SourceFiles.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,10 @@ file____default_app_src_Main_elm =
"The Elm-fullstack compiler replaces this value."
|> Bytes.Encode.string
|> Bytes.Encode.encode


file____static_favicon_svg : Bytes.Bytes
file____static_favicon_svg =
"The Elm-fullstack compiler replaces this value."
|> Bytes.Encode.string
|> Bytes.Encode.encode
82 changes: 45 additions & 37 deletions implement/example-apps/elm-editor/src/FrontendWeb/Main.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -937,7 +937,7 @@ view state =
, Element.width Element.fill
]

mainContent =
( mainContent, topBarButtons ) =
case state.workspace of
WorkspaceLoadingFromLink loadingProjectStateFromLink ->
let
Expand Down Expand Up @@ -970,11 +970,13 @@ view state =
else
Nothing
in
mainContentFromLoadingFromLink
( mainContentFromLoadingFromLink
{ linkUrl = loadingProjectStateFromLink.projectStateDescription.base
, progressOrResultElement = progressOrResultElement
, expectedCompositionHash = expectedCompositionHash
}
, [ loadFromGitOpenDialogButton ]
)

WorkspaceOk workingState ->
let
Expand Down Expand Up @@ -1011,16 +1013,6 @@ view state =
, Element.height Element.fill
]

topButtons =
[ [ saveProjectButton ]
, if workingState.editing.filePathOpenedInEditor == Nothing then
[ loadFromGitOpenDialogButton ]

else
[]
]
|> List.concat

workspaceView =
case workingState.editing.filePathOpenedInEditor of
Nothing ->
Expand Down Expand Up @@ -1133,13 +1125,12 @@ view state =
outputPaneElements =
viewOutputPaneContent workingState
in
[ topButtons |> Element.row [ Element.spacing defaultFontSize, Element.width Element.fill, Element.padding (defaultFontSize // 2) ]
, [ workspacePaneLayout
( [ [ workspacePaneLayout
{ pane = EditorPane
, headerElement = workspaceView.editorPaneHeader
, mainContent = workspaceView.editorPaneContent
}
, workspacePaneLayout
, workspacePaneLayout
{ pane = OutputPane
, headerElement = outputPaneElements.header
, mainContent =
Expand All @@ -1153,34 +1144,51 @@ view state =
, Element.htmlAttribute (HA.style "flex-shrink" "1")
]
}
]
|> Element.row [ Element.width Element.fill, Element.height Element.fill ]
|> Element.map WorkspaceEvent
]
|> Element.row [ Element.width Element.fill, Element.height Element.fill ]
|> Element.map WorkspaceEvent
]
|> Element.column [ Element.width Element.fill, Element.height Element.fill ]
, [ saveProjectButton, loadFromGitOpenDialogButton ]
)

WorkspaceErr projectStateError ->
[ [ loadFromGitOpenDialogButton ]
|> Element.row
[ Element.spacing defaultFontSize
, Element.padding (defaultFontSize // 2)
]
, [ ("Failed to load project state: "
++ (projectStateError |> String.left 500)
)
( [ [ ("Failed to load project state: " ++ (projectStateError |> String.left 500))
|> Element.text
]
|> Element.paragraph
[ Element.Font.color (Element.rgb 1 0.64 0)
, Element.padding defaultFontSize
, Element.width Element.fill
]
]
|> Element.paragraph
[ Element.Font.color (Element.rgb 1 0.64 0)
, Element.padding defaultFontSize
, Element.width Element.fill
]
]
|> Element.column
[ Element.spacing (defaultFontSize // 2)
, Element.width (Element.fillPortion 4)
, Element.height Element.fill
]
, [ loadFromGitOpenDialogButton ]
)

logoElement =
[ Visuals.elmEditorIconSvg "1.2em" |> Element.html |> Element.el []
, "Elm editor" |> Element.text |> Element.el [ Element.Font.bold ]
]
|> Element.row
[ Element.spacing defaultFontSize
, Element.htmlAttribute (HA.style "cursor" "default")
, Element.htmlAttribute (HA.style "user-select" "none")
]

topBar =
[ logoElement |> Element.el [ Element.paddingXY defaultFontSize 0 ]
, topBarButtons |> Element.row [ Element.spacing defaultFontSize ]
]
|> Element.row
[ Element.spacing (defaultFontSize * 2)
, Element.width Element.fill
, Element.Background.color (Element.rgb 0.24 0.24 0.24)
]

popupAttributes =
case state.modalDialog of
Expand Down Expand Up @@ -1277,11 +1285,11 @@ view state =
}

body =
[ activityBar, mainContent ]
|> Element.row
[ Element.width Element.fill
, Element.height Element.fill
]
[ topBar
, [ activityBar, mainContent ]
|> Element.row [ Element.width Element.fill, Element.height Element.fill ]
]
|> Element.column [ Element.width Element.fill, Element.height Element.fill ]
|> Element.layout
([ Element.Font.family (rootFontFamily |> List.map Element.Font.typeface)
, Element.Font.size defaultFontSize
Expand Down
28 changes: 28 additions & 0 deletions implement/example-apps/elm-editor/src/FrontendWeb/Visuals.elm
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module FrontendWeb.Visuals exposing (..)

import Element
import Html
import Svg
import Svg.Attributes

Expand Down Expand Up @@ -153,3 +154,30 @@ iconSvgPathsData icon =
}
]
}


elmEditorIconSvg : String -> Html.Html e
elmEditorIconSvg size =
let
foregroundPaths =
[ "M 42.901 68.565 L 42.901 76.396 L 11 76.396 L 11 20 L 42.901 20 L 42.901 27.792 L 20.219 27.792 L 20.219 43.145 L 41.474 43.145 L 41.474 50.859 L 20.219 50.859 L 20.219 68.565 L 42.901 68.565 Z"
, "M 89.344 52.209 L 89.344 57.108 L 60.915 57.108 Q 61.108 63.319 64.271 66.656 A 11.689 11.689 0 0 0 73.182 69.992 Q 76.962 69.992 80.221 69.279 A 36.901 36.901 0 0 0 87.223 66.906 L 87.223 74.274 A 27.832 27.832 0 0 1 80.511 76.511 A 41.157 41.157 0 0 1 72.757 77.167 A 20.638 20.638 0 0 1 57.193 71.362 Q 51.58 65.556 51.58 55.373 A 24.326 24.326 0 0 1 56.626 39.128 A 18.314 18.314 0 0 1 56.788 38.94 A 17.987 17.987 0 0 1 71.099 32.961 A 17.58 17.58 0 0 1 84.445 38.091 A 19.604 19.604 0 0 1 89.344 52.209 Z M 61.069 50.551 L 80.434 50.551 A 11.809 11.809 0 0 0 77.888 42.547 A 8.708 8.708 0 0 0 71.099 39.827 Q 66.778 39.827 64.175 42.566 Q 61.571 45.305 61.069 50.551 Z"
, "M0 100L0 0L100 0L100 100L0 100ZM4 97L97 97L97 3L3 3L3 97Z"
]

backgroundPathData =
"M1 99L1 1L99 1L99 99L1 99Z"

foregroundPathsElements =
foregroundPaths
|> List.map
(\pathData -> Svg.path [ Svg.Attributes.d pathData, Svg.Attributes.fill "#7BCA39" ] [])
in
Svg.svg
[ Svg.Attributes.viewBox ([ 0, 0, 100, 100 ] |> List.map String.fromInt |> String.join " ")
, Svg.Attributes.width size
, Svg.Attributes.height size
]
(Svg.path [ Svg.Attributes.d backgroundPathData, Svg.Attributes.fill "#1A2B0C" ] []
:: foregroundPathsElements
)
10 changes: 10 additions & 0 deletions implement/example-apps/elm-editor/static/favicon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 80f8730

Please sign in to comment.