Merge pull request #694 from penpot/dashboard-files

Dashboard files

frontend/resources/locales.json

@@ -400,6 +400,13 @@
     },
     "used-in" : [ "src/app/main/ui/settings/profile.cljs" ]
   },
+  "dashboard.copy-suffix" : {
+    "translations" : {
+      "en" : "(copy)",
+      "es" : "(copia)"
+    },
+    "used-in" : [ "src/app/main/data/dashboard.cljs" ]
+  },
   "dashboard.create-new-team" : {
     "translations" : {
       "ca" : "+ Crear un nou equip",
@@ -441,6 +448,13 @@
     },
     "used-in" : [ "src/app/main/ui/dashboard/files.cljs" ]
   },
+  "dashboard.duplicate" : {
+    "translations" : {
+      "en" : "Duplicate",
+      "es" : "Duplicar"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
   "dashboard.empty-files" : {
     "translations" : {
       "ca" : "Encara no hi ha cap arxiu aquí",
@@ -493,6 +507,20 @@
     },
     "used-in" : [ "src/app/main/ui/dashboard/grid.cljs" ]
   },
+  "dashboard.move-to" : {
+    "translations" : {
+      "en" : "Move to",
+      "es" : "Mover a"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
+  "dashboard.move-to-other-team" : {
+    "translations" : {
+      "en" : "Move to other team",
+      "es" : "Mover a otro equipo"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
   "dashboard.new-file" : {
     "translations" : {
       "ca" : "+ Nou Arxiu",
@@ -579,6 +607,13 @@
     },
     "used-in" : [ "src/app/main/ui/dashboard/team.cljs" ]
   },
+  "dashboard.open-in-new-tab" : {
+    "translations" : {
+      "en" : "Open file in a new tab",
+      "es" : "Abrir en una pestaña nueva"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
   "dashboard.password-change" : {
     "translations" : {
       "ca" : "Canvia la contrasenya",
@@ -590,6 +625,13 @@
     },
     "used-in" : [ "src/app/main/ui/settings/password.cljs" ]
   },
+  "dashboard.pin-unpin" : {
+    "translations" : {
+      "en" : "Pin/Unpin",
+      "es" : "Fijar/Desfijar"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/project_menu.cljs" ]
+  },
   "dashboard.projects-title" : {
     "translations" : {
       "ca" : "Projectes",
@@ -687,6 +729,48 @@
     },
     "used-in" : [ "src/app/main/ui/dashboard/grid.cljs" ]
   },
+  "dashboard.success-delete-project" : {
+    "translations" : {
+      "en" : "Your project has been deleted successfully",
+      "es" : "Tu proyecto ha sido borrado con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/project_menu.cljs" ]
+  },
+  "dashboard.success-delete-file" : {
+    "translations" : {
+      "en" : "Your file has been deleted successfully",
+      "es" : "Tu archivo ha sido borrado con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
+  "dashboard.success-duplicate-project" : {
+    "translations" : {
+      "en" : "Your project has been duplicated successfully",
+      "es" : "Tu proyecto ha sido duplicado con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/project_menu.cljs" ]
+  },
+  "dashboard.success-duplicate-file" : {
+    "translations" : {
+      "en" : "Your file has been duplicated successfully",
+      "es" : "Tu archivo ha sido duplicado con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
+  "dashboard.success-move-project" : {
+    "translations" : {
+      "en" : "Your project has been moved successfully",
+      "es" : "Tu proyecto ha sido movido con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/project_menu.cljs" ]
+  },
+  "dashboard.success-move-file" : {
+    "translations" : {
+      "en" : "Your file has been moved successfully",
+      "es" : "Tu archivo ha sido movido con éxito"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/file_menu.cljs" ]
+  },
   "dashboard.switch-team" : {
     "translations" : {
       "ca" : "Cambiar d'equip",
@@ -964,7 +1048,7 @@
     "translations" : {
       "ca" : "Sembla que el contingut de la imatge no coincideix amb l'extensió del arxiu",
       "en" : "Seems that the contents of the image does not match the file extension.",
-      "es" : "Parece que el contenido de la imagen no coincide con la etensión del archivo.",
+      "es" : "Parece que el contenido de la imagen no coincide con la extensión del archivo.",
       "fr" : "Il semble que le contenu de l’image ne correspond pas à l’extension de fichier.",
       "ru" : "",
       "zh_cn" : "图片内容好像与文档扩展名不匹配。"

frontend/resources/styles/main/partials/context-menu.scss

@@ -21,6 +21,10 @@
     visibility: visible;
 }
 
+.context-menu.fixed {
+    position: fixed;
+}
+
 .context-menu-items {
     background: $color-white;
     border-radius: $br-small;
@@ -31,6 +35,12 @@
     overflow: auto;
     position: absolute;
     top: $size-3;
+
+    & .separator {
+      border-top: 1px solid $color-gray-10;
+      padding: 0px;
+      margin: 2px;
+    }
 }
 
 .context-menu-action {
@@ -45,6 +55,34 @@
         color: $color-black;
         background-color: $color-primary-lighter;
     }
+
+    &.submenu {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      & span {
+        margin-left: 0.5rem;
+      }
+
+      & svg {
+        height: 10px;
+        width: 10px;
+      }
+    }
+
+    &.submenu-back {
+      color: $color-gray-30;
+      display: flex;
+      align-items: center;
+
+      & svg {
+        height: 10px;
+        width: 10px;
+        transform: rotate(180deg);
+        margin-right: $small;
+      }
+    }
 }
 
 .context-menu.is-selectable {

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -195,13 +195,6 @@
         width: 15px;
         height: 30px;
 
-        svg {
-          fill: $color-gray-20;
-          height: 18px;
-          margin-right: $x-small;
-          width: 18px;
-        }
-
         span {
           color: $color-black;
         }
@@ -218,13 +211,15 @@
             align-items: flex-end;
             flex-direction: column;
 
-            svg {
+            > svg {
               fill: $color-gray-60;
               margin-right: 0;
+              height: 18px;
+              width: 18px;
             }
 
             &:hover {
-              svg {
+              > svg {
                 fill: $color-primary-dark;
               }
 
@@ -237,7 +232,7 @@
       }
 
       .project-th-actions.force-display {
-        display: flex;
+        opacity: 1;
       }
 
     }

frontend/resources/styles/main/partials/dashboard-header.scss

@@ -105,4 +105,14 @@
       }
     }
   }
+
+  .pin-icon {
+    svg {
+      fill: $color-gray-20;
+    }
+
+    &.active {
+      svg { fill: $color-gray-50; }
+    }
+  }
 }

frontend/resources/styles/main/partials/dashboard-sidebar.scss

@@ -162,7 +162,7 @@
       overflow: unset;
     }
 
-    li {
+    & > li {
       align-items: center;
       cursor: pointer;
       display: flex;

frontend/resources/styles/main/partials/dashboard.scss

@@ -49,6 +49,10 @@
       margin-right: $medium;
     }
 
+    .edit-wrapper {
+      margin-right: $medium;
+    }
+
     .info {
       font-size: 15px;
       line-height: 1rem;