✨ Add export button to settings page

harehare · Nov 11, 2023 · 3db6929 · 3db6929
1 parent 214efaf
commit 3db6929
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/frontend/src/elm/Main.elm b/frontend/src/elm/Main.elm
@@ -38,7 +38,7 @@ import Models.Diagram.Scale as Scale
 import Models.Diagram.Settings as DiagramSettings
 import Models.Diagram.Type as DiagramType exposing (DiagramType(..))
 import Models.Dialog as Dialog
-import Models.Export.Diagram as Exporter
+import Models.Export.Diagram as ExportDiagram
 import Models.Hotkey as Hotkey
 import Models.IdToken as IdToken
 import Models.Jwt as Jwt
@@ -908,7 +908,7 @@ update model message =
                 ( posX, posY ) =
                     model.diagramModel.diagram.position
             in
-            Exporter.export
+            ExportDiagram.export
                 exportDiagram
                 { data = model.diagramModel.data
                 , diagramType = model.diagramModel.diagramType

diff --git a/frontend/src/elm/Page/Settings.elm b/frontend/src/elm/Page/Settings.elm
@@ -35,9 +35,11 @@ import Css
         , wrap
         , zero
         )
+import File.Download as Download
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attr
 import Html.Styled.Events exposing (onClick)
+import Json.Encode as E
 import Maybe.Extra exposing (isNothing)
 import Message exposing (Lang)
 import Models.Color as Color exposing (colors)
@@ -55,6 +57,7 @@ import Style.Style as Style
 import Style.Text as Text
 import Task
 import Views.DropDownList as DropDownList exposing (DropDownValue)
+import Views.Icon as Icon
 import Views.Switch as Switch
 
 
@@ -79,6 +82,7 @@ type Msg
     | ToggleDropDownList String
     | DropDownClose
     | UpdateUsableFontList (Result RequestError FontList)
+    | Export
 
 
 loadUsableFontList :
@@ -150,6 +154,20 @@ update msg =
         UpdateUsableFontList (Err _) ->
             Return.map (\m -> { m | usableFontList = [], isLoading = False })
 
+        Export ->
+            Return.andThen
+                (\m ->
+                    Return.singleton m
+                        |> Return.command
+                            (Download.string "settings.json"
+                                "application/json"
+                                (E.encode
+                                    2
+                                    (Settings.settingsEncoder m.settings)
+                                )
+                            )
+                )
+
 
 isFetchedUsableFont : Model -> Bool
 isFetchedUsableFont model =
@@ -165,6 +183,7 @@ view model =
         , session = model.session
         , usableFontList = model.usableFontList
         , isLoading = model.isLoading
+        , lang = model.lang
         }
 
 
@@ -273,9 +292,10 @@ view_ :
     , session : Session
     , usableFontList : FontList
     , isLoading : Bool
+    , lang : Lang
     }
     -> Html Msg
-view_ { dropDownIndex, canUseNativeFileSystem, settings, session, usableFontList, isLoading } =
+view_ { dropDownIndex, canUseNativeFileSystem, settings, session, usableFontList, isLoading, lang } =
     Html.div
         [ Attr.css
             [ Breakpoint.style
@@ -624,4 +644,16 @@ view_ { dropDownIndex, canUseNativeFileSystem, settings, session, usableFontList
                     ]
                 ]
             ]
+        , Html.div
+            [ Attr.css [ Style.button, Css.position Css.absolute, Css.right <| Css.px 8, Css.top <| Css.px 8 ]
+            , onClick Export
+            ]
+            [ Icon.cloudDownload Color.white 24
+            , Html.span
+                [ Attr.class "bottom-tooltip"
+                ]
+                [ Html.span [ Attr.class "text" ]
+                    [ Html.text <| Message.toolTipExport lang ]
+                ]
+            ]
         ]