From 6838b9e7691c95694c15635d7639d40b713b8675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Wed, 18 Mar 2020 13:39:59 +0100
Subject: [PATCH] New actions menu in file thumbnails

---
 frontend/resources/locales.json               |  2 ++
 .../styles/main/partials/dashboard-grid.scss  | 25 ++++++++++++++++++-
 .../src/uxbox/main/ui/dashboard/grid.cljs     | 23 +++++++++++------
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json
index 084cf910f..d4702d4a2 100644
--- a/frontend/resources/locales.json
+++ b/frontend/resources/locales.json
@@ -5,6 +5,8 @@
       "en" : "You still have no files here"
     }
   },
+  "dashboard.grid.edit": "Edit",
+  "dashboard.grid.delete": "Delete",
   "dashboard.header.colors" : {
     "translations" : {
       "en" : "COLORS",
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index fa6e534b2..fc6c97e7e 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -180,12 +180,16 @@
 
         &:hover {
           border-color: $color-primary;
+
+          .project-th-actions {
+            display: flex;
+          }
         }
 
         .project-th-actions {
           align-items: center;
           bottom: 0;
-          display: flex;
+          display: none;
           left: 0;
           justify-content: flex-end;
           padding: $small;
@@ -208,6 +212,25 @@
             display: flex;
             margin-right: $small;
 
+            &.menu {
+              margin-right: 0;
+
+              svg {
+                fill: $color-gray-30;
+                margin-right: 0;
+              }
+
+              &:hover {
+                transform: scale(1.4);
+
+                svg {
+                  fill: $color-danger;
+                }
+
+              }
+
+            }
+
             &.delete {
               margin-right: 0;
 
diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs
index 55f2762a0..f619dd354 100644
--- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/grid.cljs
@@ -10,6 +10,7 @@
    [uxbox.main.ui.modal :as modal]
    [uxbox.main.ui.keyboard :as kbd]
    [uxbox.main.ui.confirm :refer [confirm-dialog]]
+   [uxbox.main.ui.components.context-menu :refer [context-menu]]
    [uxbox.util.dom :as dom]
    [uxbox.util.i18n :as i18n :refer [t tr]]
    [uxbox.util.router :as rt]
@@ -35,7 +36,9 @@
 (mf/defc grid-item
   {:wrap [mf/wrap-memo]}
   [{:keys [file] :as props}]
-  (let [local (mf/use-state {})
+  (let [local (mf/use-state {:menu-open false
+                             :edition false})
+        locale (i18n/use-locale)
         on-navigate #(st/emit! (rt/nav :workspace
                                             {:file-id (:id file)}
                                             {:page-id (first (:pages file))}))
@@ -49,9 +52,12 @@
                    (swap! local assoc :edition false))
 
         on-key-down #(when (kbd/enter? %) (on-blur %))
+        on-menu-click #(do
+                         (dom/stop-propagation %)
+                         (swap! local assoc :menu-open true))
+        on-menu-close #(swap! local assoc :menu-open false)
         on-edit #(do
                    (dom/stop-propagation %)
-                   (dom/prevent-default %)
                    (swap! local assoc :edition true))]
     [:div.grid-item.project-th {:on-click on-navigate}
      [:div.overlay]
@@ -73,12 +79,13 @@
       ;; [:div.project-th-icon.comments
       ;;  i/chat
       ;;  [:span "0"]]
-      [:div.project-th-icon.edit
-       {:on-click on-edit}
-       i/pencil]
-      [:div.project-th-icon.delete
-       {:on-click on-delete}
-       i/trash]]]))
+      [:div.project-th-icon.menu
+       {:on-click on-menu-click}
+       i/actions]
+      [:& context-menu {:on-close on-menu-close
+                        :show (:menu-open @local)
+                        :options [[(t locale "dashboard.grid.edit") on-edit]
+                                  [(t locale "dashboard.grid.delete") on-delete]]}]]]))
 
 ;; --- Grid