Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

🎉 Add export button to right sidebar (frontend).

Browse source
This commit is contained in:
Andrey Antukh 2020-06-30 15:37:02 +02:00 • committed by Hirunatan
parent c2db6d4f35
commit b97dc09e26
5 changed files with 179 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
frontend/resources/locales.json
View file

@ -16,7 +16,7 @@
} }
}, },
"auth.create-demo-profile" : { "auth.create-demo-profile" : {
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:116", "src/uxbox/main/ui/auth/login.cljs:115" ], "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:115", "src/uxbox/main/ui/auth/register.cljs:116" ],
"translations" : { "translations" : {
"en" : "Create demo account", "en" : "Create demo account",
"fr" : "Créer un compte de démonstration", "fr" : "Créer un compte de démonstration",
@ -24,7 +24,7 @@
} }
}, },
"auth.create-demo-profile-label" : { "auth.create-demo-profile-label" : {
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:113", "src/uxbox/main/ui/auth/login.cljs:112" ], "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:112", "src/uxbox/main/ui/auth/register.cljs:113" ],
"translations" : { "translations" : {
"en" : "Just wanna try it?", "en" : "Just wanna try it?",
"fr" : "Vous voulez juste essayer?", "fr" : "Vous voulez juste essayer?",
@ -40,7 +40,7 @@
} }
}, },
"auth.email-label" : { "auth.email-label" : {
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:82", "src/uxbox/main/ui/auth/recovery_request.cljs:46", "src/uxbox/main/ui/auth/login.cljs:73" ], "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:73", "src/uxbox/main/ui/auth/recovery_request.cljs:46", "src/uxbox/main/ui/auth/register.cljs:82" ],
"translations" : { "translations" : {
"en" : "Email", "en" : "Email",
"fr" : "Adresse email", "fr" : "Adresse email",
@ -144,7 +144,7 @@
} }
}, },
"auth.password-label" : { "auth.password-label" : {
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:86", "src/uxbox/main/ui/auth/login.cljs:79" ], "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:79", "src/uxbox/main/ui/auth/register.cljs:86" ],
"translations" : { "translations" : {
"en" : "Password", "en" : "Password",
"fr" : "Mot de passe", "fr" : "Mot de passe",
@ -240,7 +240,7 @@
} }
}, },
"dashboard.grid.delete" : { "dashboard.grid.delete" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/project.cljs:62", "src/uxbox/main/ui/dashboard/grid.cljs:103" ], "used-in" : [ "src/uxbox/main/ui/dashboard/grid.cljs:103", "src/uxbox/main/ui/dashboard/project.cljs:62" ],
"translations" : { "translations" : {
"en" : "Delete", "en" : "Delete",
"fr" : "Supprimer", "fr" : "Supprimer",
@ -256,7 +256,7 @@
} }
}, },
"dashboard.grid.rename" : { "dashboard.grid.rename" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/project.cljs:61", "src/uxbox/main/ui/dashboard/grid.cljs:102" ], "used-in" : [ "src/uxbox/main/ui/dashboard/grid.cljs:102", "src/uxbox/main/ui/dashboard/project.cljs:61" ],
"translations" : { "translations" : {
"en" : "Rename", "en" : "Rename",
"fr" : "Renommer", "fr" : "Renommer",
@ -280,7 +280,7 @@
} }
}, },
"dashboard.header.new-project" : { "dashboard.header.new-project" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/recent_files.cljs:50" ], "used-in" : [ "src/uxbox/main/ui/dashboard/recent_files.cljs:48" ],
"translations" : { "translations" : {
"en" : "+ New project", "en" : "+ New project",
"fr" : "+ Nouveau projet", "fr" : "+ Nouveau projet",
@ -416,7 +416,7 @@
} }
}, },
"dashboard.sidebar.drafts" : { "dashboard.sidebar.drafts" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:112" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:128" ],
"translations" : { "translations" : {
"en" : "Drafts", "en" : "Drafts",
"fr" : "Brouillons", "fr" : "Brouillons",
@ -424,7 +424,7 @@
} }
}, },
"dashboard.sidebar.libraries" : { "dashboard.sidebar.libraries" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:118" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:134" ],
"translations" : { "translations" : {
"en" : "Libraries", "en" : "Libraries",
"fr" : "Librairies", "fr" : "Librairies",
@ -432,7 +432,7 @@
} }
}, },
"dashboard.sidebar.recent" : { "dashboard.sidebar.recent" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:105" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:121" ],
"translations" : { "translations" : {
"en" : "Recent", "en" : "Recent",
"fr" : "Récent", "fr" : "Récent",
@ -528,7 +528,7 @@
} }
}, },
"ds.search.placeholder" : { "ds.search.placeholder" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:171" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:187" ],
"translations" : { "translations" : {
"en" : "Search...", "en" : "Search...",
"fr" : "Rechercher...", "fr" : "Rechercher...",
@ -560,7 +560,7 @@
} }
}, },
"errors.email-already-exists" : { "errors.email-already-exists" : {
"used-in" : [ "src/uxbox/main/ui/auth.cljs:87", "src/uxbox/main/ui/settings/change_email.cljs:47" ], "used-in" : [ "src/uxbox/main/ui/settings/change_email.cljs:47", "src/uxbox/main/ui/auth.cljs:87" ],
"translations" : { "translations" : {
"en" : "Email already used", "en" : "Email already used",
"fr" : "Adresse e-mail déjà utilisée", "fr" : "Adresse e-mail déjà utilisée",
@ -576,7 +576,7 @@
} }
}, },
"errors.generic" : { "errors.generic" : {
"used-in" : [ "src/uxbox/main/ui.cljs:190", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui/settings/profile.cljs:38" ], "used-in" : [ "src/uxbox/main/ui/settings/profile.cljs:38", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui.cljs:202" ],
"translations" : { "translations" : {
"en" : "Something wrong has happened.", "en" : "Something wrong has happened.",
"fr" : "Quelque chose c'est mal passé.", "fr" : "Quelque chose c'est mal passé.",
@ -584,7 +584,7 @@
} }
}, },
"errors.image-format-unsupported" : { "errors.image-format-unsupported" : {
"used-in" : [ "src/uxbox/main/data/images.cljs:376", "src/uxbox/main/data/workspace/persistence.cljs:318", "src/uxbox/main/data/users.cljs:177" ], "used-in" : [ "src/uxbox/main/data/users.cljs:177", "src/uxbox/main/data/workspace/persistence.cljs:365", "src/uxbox/main/data/images.cljs:376" ],
"translations" : { "translations" : {
"en" : "The image format is not supported (must be svg, jpg or png).", "en" : "The image format is not supported (must be svg, jpg or png).",
"fr" : "Le format d'image n'est pas supporté (doit être svg, jpg ou png).", "fr" : "Le format d'image n'est pas supporté (doit être svg, jpg ou png).",
@ -592,7 +592,7 @@
} }
}, },
"errors.image-too-large" : { "errors.image-too-large" : {
"used-in" : [ "src/uxbox/main/data/images.cljs:374", "src/uxbox/main/data/workspace/persistence.cljs:316", "src/uxbox/main/data/users.cljs:175" ], "used-in" : [ "src/uxbox/main/data/users.cljs:175", "src/uxbox/main/data/workspace/persistence.cljs:363", "src/uxbox/main/data/images.cljs:374" ],
"translations" : { "translations" : {
"en" : "The image is too large to be inserted (must be under 5mb).", "en" : "The image is too large to be inserted (must be under 5mb).",
"fr" : "L'image est trop grande (doit être inférieure à 5 Mo).", "fr" : "L'image est trop grande (doit être inférieure à 5 Mo).",
@ -600,7 +600,7 @@
} }
}, },
"errors.network" : { "errors.network" : {
"used-in" : [ "src/uxbox/main/ui.cljs:184" ], "used-in" : [ "src/uxbox/main/ui.cljs:196" ],
"translations" : { "translations" : {
"en" : "Unable to connect to backend server.", "en" : "Unable to connect to backend server.",
"fr" : "Impossible de se connecter au serveur principal.", "fr" : "Impossible de se connecter au serveur principal.",
@ -632,7 +632,7 @@
} }
}, },
"errors.unexpected-error" : { "errors.unexpected-error" : {
"used-in" : [ "src/uxbox/main/data/images.cljs:385", "src/uxbox/main/data/workspace/persistence.cljs:327", "src/uxbox/main/data/users.cljs:185", "src/uxbox/main/ui/auth/register.cljs:54", "src/uxbox/main/ui/settings/change_email.cljs:51" ], "used-in" : [ "src/uxbox/main/data/users.cljs:185", "src/uxbox/main/data/workspace/persistence.cljs:334", "src/uxbox/main/data/workspace/persistence.cljs:374", "src/uxbox/main/data/images.cljs:385", "src/uxbox/main/ui/settings/change_email.cljs:51", "src/uxbox/main/ui/auth/register.cljs:54" ],
"translations" : { "translations" : {
"en" : "An unexpected error occurred.", "en" : "An unexpected error occurred.",
"fr" : "Une erreur inattendue c'est produite", "fr" : "Une erreur inattendue c'est produite",
@ -672,7 +672,7 @@
} }
}, },
"image.loading" : { "image.loading" : {
"used-in" : [ "src/uxbox/main/data/images.cljs:393", "src/uxbox/main/data/workspace/persistence.cljs:335", "src/uxbox/main/data/users.cljs:191" ], "used-in" : [ "src/uxbox/main/data/users.cljs:191", "src/uxbox/main/data/workspace/persistence.cljs:341", "src/uxbox/main/data/workspace/persistence.cljs:382", "src/uxbox/main/data/images.cljs:393" ],
"translations" : { "translations" : {
"en" : "Loading image...", "en" : "Loading image...",
"fr" : "Chargement de l'image...", "fr" : "Chargement de l'image...",
@ -864,7 +864,7 @@
} }
}, },
"settings.notifications.email-not-verified" : { "settings.notifications.email-not-verified" : {
"used-in" : [ "src/uxbox/main/ui/dashboard.cljs:109" ], "used-in" : [ "src/uxbox/main/ui/dashboard.cljs:113" ],
"translations" : { "translations" : {
"en" : "Your email address has not been verified yet. Please check your inbox at “%s” for a confirmation email.", "en" : "Your email address has not been verified yet. Please check your inbox at “%s” for a confirmation email.",
"fr" : "Votre adresse e-mail n'a pas encore été vérifiée. Veuillez vérifier votre boîte de réception à “%s” pour un e-mail de confirmation.", "fr" : "Votre adresse e-mail n'a pas encore été vérifiée. Veuillez vérifier votre boîte de réception à “%s” pour un e-mail de confirmation.",
@ -896,7 +896,7 @@
} }
}, },
"settings.notifications.profile-saved" : { "settings.notifications.profile-saved" : {
"used-in" : [ "src/uxbox/main/ui/settings/options.cljs:37", "src/uxbox/main/ui/settings/profile.cljs:43" ], "used-in" : [ "src/uxbox/main/ui/settings/profile.cljs:43", "src/uxbox/main/ui/settings/options.cljs:37" ],
"translations" : { "translations" : {
"en" : "Profile saved successfully!", "en" : "Profile saved successfully!",
"fr" : "Profil enregistré avec succès!", "fr" : "Profil enregistré avec succès!",
@ -944,7 +944,7 @@
} }
}, },
"settings.profile-submit-label" : { "settings.profile-submit-label" : {
"used-in" : [ "src/uxbox/main/ui/settings/password.cljs:93", "src/uxbox/main/ui/settings/options.cljs:66", "src/uxbox/main/ui/settings/profile.cljs:90" ], "used-in" : [ "src/uxbox/main/ui/settings/password.cljs:93", "src/uxbox/main/ui/settings/profile.cljs:90", "src/uxbox/main/ui/settings/options.cljs:66" ],
"translations" : { "translations" : {
"en" : "Update settings", "en" : "Update settings",
"fr" : "Mettre à jour les paramètres", "fr" : "Mettre à jour les paramètres",
@ -1304,7 +1304,7 @@
} }
}, },
"workspace.library.all" : { "workspace.library.all" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:123" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:128" ],
"translations" : { "translations" : {
"en" : "All libraries", "en" : "All libraries",
"fr" : "Toutes les librairies", "fr" : "Toutes les librairies",
@ -1312,7 +1312,7 @@
} }
}, },
"workspace.library.icons" : { "workspace.library.icons" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:173" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:178" ],
"translations" : { "translations" : {
"en" : "Icons", "en" : "Icons",
"fr" : "Icônes", "fr" : "Icônes",
@ -1320,7 +1320,7 @@
} }
}, },
"workspace.library.images" : { "workspace.library.images" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:178" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:183" ],
"translations" : { "translations" : {
"en" : "Images", "en" : "Images",
"fr" : "Images", "fr" : "Images",
@ -1328,7 +1328,7 @@
} }
}, },
"workspace.library.libraries" : { "workspace.library.libraries" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:155" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:160" ],
"translations" : { "translations" : {
"en" : "Libraries", "en" : "Libraries",
"fr" : "Librairies", "fr" : "Librairies",
@ -1336,7 +1336,7 @@
} }
}, },
"workspace.library.own" : { "workspace.library.own" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:124" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:129" ],
"translations" : { "translations" : {
"en" : "My libraries", "en" : "My libraries",
"fr" : "Mes librairies", "fr" : "Mes librairies",
@ -1344,7 +1344,7 @@
} }
}, },
"workspace.library.store" : { "workspace.library.store" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:125" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:130" ],
"translations" : { "translations" : {
"en" : "Store libraries", "en" : "Store libraries",
"fr" : "Prédéfinies", "fr" : "Prédéfinies",
@ -1360,15 +1360,27 @@
} }
}, },
"workspace.options.design" : { "workspace.options.design" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:76" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:107" ],
"translations" : { "translations" : {
"en" : "Design", "en" : "Design",
"fr" : "Conception", "fr" : "Conception",
"es" : "Diseño" "es" : "Diseño"
} }
}, },
"workspace.options.export-object" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:78" ],
"translations" : {
"en" : "Export"
}
},
"workspace.options.exporting-object" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:77" ],
"translations" : {
"en" : "Exporting..."
}
},
"workspace.options.fill" : { "workspace.options.fill" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383", "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41" ],
"translations" : { "translations" : {
"en" : "Fill", "en" : "Fill",
"fr" : "Remplissage", "fr" : "Remplissage",
@ -1696,7 +1708,7 @@
} }
}, },
"workspace.options.navigate-to" : { "workspace.options.navigate-to" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:58" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:59" ],
"translations" : { "translations" : {
"en" : "Navigate to", "en" : "Navigate to",
"fr" : "Naviguer vers", "fr" : "Naviguer vers",
@ -1704,7 +1716,7 @@
} }
}, },
"workspace.options.none" : { "workspace.options.none" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:71" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:72" ],
"translations" : { "translations" : {
"en" : "None", "en" : "None",
"fr" : "Aucun", "fr" : "Aucun",
@ -1712,7 +1724,7 @@
} }
}, },
"workspace.options.position" : { "workspace.options.position" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:113", "src/uxbox/main/ui/workspace/sidebar/options/frame.cljs:125" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame.cljs:125", "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:112" ],
"translations" : { "translations" : {
"en" : "Position", "en" : "Position",
"fr" : "Position", "fr" : "Position",
@ -1720,7 +1732,7 @@
} }
}, },
"workspace.options.prototype" : { "workspace.options.prototype" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:85" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options.cljs:115" ],
"translations" : { "translations" : {
"en" : "Prototype", "en" : "Prototype",
"fr" : "Prototype", "fr" : "Prototype",
@ -1728,7 +1740,7 @@
} }
}, },
"workspace.options.radius" : { "workspace.options.radius" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:157" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:158" ],
"translations" : { "translations" : {
"en" : "Radius", "en" : "Radius",
"fr" : "Rayon", "fr" : "Rayon",
@ -1744,7 +1756,7 @@
} }
}, },
"workspace.options.select-a-shape" : { "workspace.options.select-a-shape" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:52" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:53" ],
"translations" : { "translations" : {
"en" : "Select a shape, artboard or group to drag a connection to other artboard.", "en" : "Select a shape, artboard or group to drag a connection to other artboard.",
"fr" : "Sélectionnez une forme, un plan de travail ou un groupe pour faire glisser une connexion vers un autre plan de travail.", "fr" : "Sélectionnez une forme, un plan de travail ou un groupe pour faire glisser une connexion vers un autre plan de travail.",
@ -1752,7 +1764,7 @@
} }
}, },
"workspace.options.select-artboard" : { "workspace.options.select-artboard" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:64" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:65" ],
"translations" : { "translations" : {
"en" : "Select artboard", "en" : "Select artboard",
"fr" : "Sélectionner un plan de travail", "fr" : "Sélectionner un plan de travail",
@ -1760,7 +1772,7 @@
} }
}, },
"workspace.options.size" : { "workspace.options.size" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:83", "src/uxbox/main/ui/workspace/sidebar/options/frame.cljs:98" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame.cljs:98", "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:82" ],
"translations" : { "translations" : {
"en" : "Size", "en" : "Size",
"fr" : "Taille", "fr" : "Taille",
@ -1840,7 +1852,7 @@
} }
}, },
"workspace.options.use-play-button" : { "workspace.options.use-play-button" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:54" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:55" ],
"translations" : { "translations" : {
"en" : "Use the play button at the header to run the prototype view.", "en" : "Use the play button at the header to run the prototype view.",
"fr" : "Utilisez le bouton de lecture dans l'en-tête pour exécuter la vue du prototype.", "fr" : "Utilisez le bouton de lecture dans l'en-tête pour exécuter la vue du prototype.",
@ -1856,7 +1868,7 @@
} }
}, },
"workspace.sidebar.sitemap" : { "workspace.sidebar.sitemap" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:140" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:150" ],
"translations" : { "translations" : {
"en" : "Pages", "en" : "Pages",
"fr" : "Pages", "fr" : "Pages",

4
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -77,7 +77,9 @@
(when left-sidebar? (when left-sidebar?
[:& left-sidebar {:file file :page page :layout layout}]) [:& left-sidebar {:file file :page page :layout layout}])
(when right-sidebar? (when right-sidebar?
[:& right-sidebar {:page page :layout layout}])])) [:& right-sidebar {:page page
:local local
:layout layout}])]))
(mf/defc workspace-page (mf/defc workspace-page
[{:keys [project file layout page-id] :as props}] [{:keys [project file layout page-id] :as props}]

5
frontend/src/uxbox/main/ui/workspace/sidebar.cljs
View file

@ -39,8 +39,9 @@
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)
(mf/defc right-sidebar (mf/defc right-sidebar
[{:keys [layout page] :as props}] [{:keys [layout page local] :as props}]
[:aside#settings-bar.settings-bar [:aside#settings-bar.settings-bar
[:div.settings-bar-inside [:div.settings-bar-inside
(when (contains? layout :element-options) (when (contains? layout :element-options)
[:& options-toolbox {:page page}])]]) [:& options-toolbox {:page page
:local local}])]])

151
frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
View file

@ -9,32 +9,84 @@
(ns uxbox.main.ui.workspace.sidebar.options (ns uxbox.main.ui.workspace.sidebar.options
(:require (:require
[okulary.core :as l] [beicon.core :as rx]
[cljs.spec.alpha :as s]
[cuerdas.core :as str]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.main.ui.icons :as i] [uxbox.common.spec :as us]
[uxbox.main.data.workspace :as udw] [uxbox.main.data.workspace :as udw]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs] [uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]
[uxbox.main.ui.icons :as i]
[uxbox.main.ui.workspace.sidebar.align :refer [align-options]] [uxbox.main.ui.workspace.sidebar.align :refer [align-options]]
[uxbox.main.ui.workspace.sidebar.options.circle :as circle]
[uxbox.main.ui.workspace.sidebar.options.frame :as frame] [uxbox.main.ui.workspace.sidebar.options.frame :as frame]
[uxbox.main.ui.workspace.sidebar.options.group :as group] [uxbox.main.ui.workspace.sidebar.options.group :as group]
[uxbox.main.ui.workspace.sidebar.options.rect :as rect]
[uxbox.main.ui.workspace.sidebar.options.icon :as icon] [uxbox.main.ui.workspace.sidebar.options.icon :as icon]
[uxbox.main.ui.workspace.sidebar.options.circle :as circle]
[uxbox.main.ui.workspace.sidebar.options.path :as path]
[uxbox.main.ui.workspace.sidebar.options.image :as image] [uxbox.main.ui.workspace.sidebar.options.image :as image]
[uxbox.main.ui.workspace.sidebar.options.text :as text]
[uxbox.main.ui.workspace.sidebar.options.page :as page]
[uxbox.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]] [uxbox.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]]
[uxbox.main.ui.components.tab-container :refer [tab-container tab-element]] [uxbox.main.ui.workspace.sidebar.options.page :as page]
[uxbox.util.i18n :refer [tr]])) [uxbox.main.ui.workspace.sidebar.options.path :as path]
[uxbox.main.ui.workspace.sidebar.options.rect :as rect]
[uxbox.main.ui.workspace.sidebar.options.text :as text]
[uxbox.util.dom :as dom]
[uxbox.util.http :as http]
[uxbox.util.i18n :as i18n :refer [tr t]]
[uxbox.util.object :as obj]))
;; --- Options ;; --- Options
(defn- request-screenshot
[page-id shape-id]
(http/send! {:method :get
:uri "/export/bitmap"
:query {:page-id page-id
:object-id shape-id}}
{:credentials? true
:response-type :blob}))
(defn- trigger-download
[name blob]
(let [link (dom/create-element "a")
uri (dom/create-uri blob)]
(obj/set! link "href" uri)
(obj/set! link "download" (str/slug name))
(obj/set! (.-style ^js link) "display" "none")
(.appendChild (.-body ^js js/document) link)
(.click link)
(.remove link)))
(mf/defc shape-export
{::mf/wrap [mf/memo]}
[{:keys [shape page] :as props}]
(let [loading? (mf/use-state false)
locale (mf/deref i18n/locale)
on-click (fn [event]
(dom/prevent-default event)
(swap! loading? not)
(->> (request-screenshot (:id page) (:id shape))
(rx/subs
(fn [{:keys [status body]}]
(trigger-download (:name shape) body))
(constantly nil)
(fn []
(swap! loading? not)))))]
[:div.element-set
[:div.btn-large.btn-icon-dark
{:on-click (when-not @loading? on-click)
:class (dom/classnames
:btn-disabled @loading?)
:disabled @loading?}
(if @loading?
(t locale "workspace.options.exporting-object")
(t locale "workspace.options.export-object"))]]))
(mf/defc shape-options (mf/defc shape-options
{::mf/wrap [#(mf/throttle % 60)]} {::mf/wrap [#(mf/throttle % 60)]}
[{:keys [shape] :as props}] [{:keys [shape page] :as props}]
[:div [:*
(case (:type shape) (case (:type shape)
:frame [:& frame/options {:shape shape}] :frame [:& frame/options {:shape shape}]
:group [:& group/options {:shape shape}] :group [:& group/options {:shape shape}]
@ -45,45 +97,44 @@
:path [:& path/options {:shape shape}] :path [:& path/options {:shape shape}]
:curve [:& path/options {:shape shape}] :curve [:& path/options {:shape shape}]
:image [:& image/options {:shape shape}] :image [:& image/options {:shape shape}]
nil)]) nil)
[:& shape-export {:shape shape :page page}]])
(mf/defc options-content
{::mf/wrap [mf/memo]}
[{:keys [section selected shape page] :as props}]
(let [locale (mf/deref i18n/locale)]
[:div.tool-window
[:div.tool-window-content
[:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
:selected section}
[:& tab-element {:id :design
:title (t locale "workspace.options.design")}
[:div.element-options
[:& align-options]
(if (= (count selected) 1)
[:& shape-options {:shape shape :page page}]
[:& page/options {:page page}])]]
[:& tab-element {:id :prototype
:title (t locale "workspace.options.prototype")}
[:div.element-options
[:& interactions-menu {:shape shape}]]]]]]))
(mf/defc options-toolbox (mf/defc options-toolbox
{:wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [page selected] :as props}] [{:keys [page local] :as props}]
(let [close #(st/emit! (udw/toggle-layout-flags :element-options)) (let [selected (:selected local)
on-change-tab #(st/emit! (udw/set-options-mode %)) section (:options-mode local)
shape-id (first selected)
options-mode (mf/deref refs/options-mode) page-id (:id page)
selected (mf/deref refs/selected-shapes)
shape-id (first selected)
page-id (:id page)
shape-iref (-> (mf/deps shape-id page-id) shape-iref (-> (mf/deps shape-id page-id)
(mf/use-memo (mf/use-memo #(refs/object-by-id shape-id)))
#(-> (l/in [:objects shape-id]) shape (mf/deref shape-iref)]
(l/derived refs/workspace-data)))) [:& options-content {:selected selected
shape (mf/deref shape-iref)] :shape shape
:page page
[:div.tool-window :section section}]))
;; [:div.tool-window-bar
;; [:div.tool-window-icon i/options]
;; [:span (tr "ds.settings.element-options")]
;; [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content
[:& tab-container {:on-change-tab on-change-tab :selected options-mode}
[:& tab-element
{:id :design :title (tr "workspace.options.design")}
[:div.element-options
[:& align-options]
[:div
(if (= (count selected) 1)
[:& shape-options {:shape shape}]
[:& page/options {:page page}])]]]
[:& tab-element
{:id :prototype :title (tr "workspace.options.prototype")}
[:div.element-options
[:& interactions-menu {:shape shape}]]]]
]]))

21
frontend/src/uxbox/util/dom.cljs
View file

@ -169,3 +169,24 @@
(defn fullscreen? (defn fullscreen?
[] []
(boolean (.-fullscreenElement js/document))) (boolean (.-fullscreenElement js/document)))
(defn ^boolean blob?
[v]
(instance? js/Blob v))
(defn create-blob
"Create a blob from content."
([content]
(create-blob content "application/octet-stream"))
([content mimetype]
(js/Blob. #js [content] #js {:type mimetype})))
(defn revoke-uri
[url]
(js/URL.revokeObjectURL url))
(defn create-uri
"Create a url from blob."
[b]
{:pre [(blob? b)]}
(js/URL.createObjectURL b))