github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-11 19:13:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add file persistance functionality

Browse Source
This commit is contained in:
Elhombretecla 2025-02-04 16:29:38 +01:00
parent 7dbf1fd7ef
commit 6f3a69210b
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/main/ui/workspace/left_header.cljs
View File

@ -22,7 +22,11 @@
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
[rumext.v2 :as mf]
[okulary.core :as l]))
(def ref:persistence-status
(l/derived :status refs/persistence))
;; --- Header Component
@ -108,7 +112,12 @@
{:class (stl/css :file-name)
:title file-name
:on-double-click start-editing-name}
[:div {:class (stl/css :status-notification)}]
[:div {:class (case (mf/deref ref:persistence-status)
:pending (stl/css :status-notification :pending-status)
:saving (stl/css :status-notification :saving-status)
:saved (stl/css :status-notification :saved-status)
:error (stl/css :status-notification :error-status)
(stl/css :status-notification))}]
file-name])]
(when ^boolean shared?
[:span {:class (stl/css :shared-badge)} i/library])

25
frontend/src/app/main/ui/workspace/left_header.scss
View File

@ -87,8 +87,31 @@
.status-notification {
width: $s-6;
height: $s-6;
background-color: red;
border-radius: 50%;
margin-right: $s-4;
flex-shrink: 0;
background-color: var(--status-widget-background-color-pending);
&.pending-status {
background-color: var(--status-widget-background-color-warning);
}
&.saving-status {
background-color: var(--status-widget-background-color-pending);
}
&.saved-status {
background-color: var(--status-widget-background-color-success);
animation: jump 0.3s ease-out;
}
&.error-status {
background-color: var(--status-widget-background-color-error);
}
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-4px); }
100% { transform: translateY(0); }
}