diff --git a/implement/example-apps/elm-editor/src/Backend/Main.elm b/implement/example-apps/elm-editor/src/Backend/Main.elm index 143a58fc..95e849c3 100644 --- a/implement/example-apps/elm-editor/src/Backend/Main.elm +++ b/implement/example-apps/elm-editor/src/Backend/Main.elm @@ -399,7 +399,12 @@ frontendHtmlDocument { debug } = Elm Editor - + Base64.fromBytes |> Maybe.withDefault "Failed to encode as base64") + ++ """"> + diff --git a/implement/example-apps/elm-editor/src/ElmFullstackCompilerInterface/SourceFiles.elm b/implement/example-apps/elm-editor/src/ElmFullstackCompilerInterface/SourceFiles.elm index 59e9595a..c5b470bf 100644 --- a/implement/example-apps/elm-editor/src/ElmFullstackCompilerInterface/SourceFiles.elm +++ b/implement/example-apps/elm-editor/src/ElmFullstackCompilerInterface/SourceFiles.elm @@ -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 diff --git a/implement/example-apps/elm-editor/src/FrontendWeb/Main.elm b/implement/example-apps/elm-editor/src/FrontendWeb/Main.elm index 8f21ca00..b90a513b 100644 --- a/implement/example-apps/elm-editor/src/FrontendWeb/Main.elm +++ b/implement/example-apps/elm-editor/src/FrontendWeb/Main.elm @@ -937,7 +937,7 @@ view state = , Element.width Element.fill ] - mainContent = + ( mainContent, topBarButtons ) = case state.workspace of WorkspaceLoadingFromLink loadingProjectStateFromLink -> let @@ -970,11 +970,13 @@ view state = else Nothing in - mainContentFromLoadingFromLink + ( mainContentFromLoadingFromLink { linkUrl = loadingProjectStateFromLink.projectStateDescription.base , progressOrResultElement = progressOrResultElement , expectedCompositionHash = expectedCompositionHash } + , [ loadFromGitOpenDialogButton ] + ) WorkspaceOk workingState -> let @@ -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 -> @@ -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 = @@ -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 @@ -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 diff --git a/implement/example-apps/elm-editor/src/FrontendWeb/Visuals.elm b/implement/example-apps/elm-editor/src/FrontendWeb/Visuals.elm index 1b560f2f..f1b5de29 100644 --- a/implement/example-apps/elm-editor/src/FrontendWeb/Visuals.elm +++ b/implement/example-apps/elm-editor/src/FrontendWeb/Visuals.elm @@ -1,6 +1,7 @@ module FrontendWeb.Visuals exposing (..) import Element +import Html import Svg import Svg.Attributes @@ -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 + ) diff --git a/implement/example-apps/elm-editor/static/favicon.svg b/implement/example-apps/elm-editor/static/favicon.svg new file mode 100644 index 00000000..942bbeb9 --- /dev/null +++ b/implement/example-apps/elm-editor/static/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file