mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 16:06:13 +02:00
🎉 Manage file images as assets
This commit is contained in:
Andrés Moya
parent
8f8dc80cad
commit
8c8b5887d6
14 changed files with 482 additions and 18 deletions
|
|
@ -1358,6 +1358,87 @@
|
|||
"es" : "Alinear arriba"
|
||||
}
|
||||
},
|
||||
"workspace.assets.assets" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:144" ],
|
||||
"translations" : {
|
||||
"en" : "Assets",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Recursos"
|
||||
}
|
||||
},
|
||||
"workspace.assets.box-filter-all" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:154" ],
|
||||
"translations" : {
|
||||
"en" : "All assets",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Todos"
|
||||
}
|
||||
},
|
||||
"workspace.assets.box-filter-colors" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:156" ],
|
||||
"translations" : {
|
||||
"en" : "Colors",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Colores"
|
||||
}
|
||||
},
|
||||
"workspace.assets.box-filter-graphics" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:155" ],
|
||||
"translations" : {
|
||||
"en" : "Graphics",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Gráficos"
|
||||
}
|
||||
},
|
||||
"workspace.assets.colors" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:91" ],
|
||||
"translations" : {
|
||||
"en" : "Colors",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Colores"
|
||||
}
|
||||
},
|
||||
"workspace.assets.delete" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:83" ],
|
||||
"translations" : {
|
||||
"en" : "Delete",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Borrar"
|
||||
}
|
||||
},
|
||||
"workspace.assets.file-library" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:104" ],
|
||||
"translations" : {
|
||||
"en" : "File library",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Bilioteca del archivo"
|
||||
}
|
||||
},
|
||||
"workspace.assets.graphics" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:68" ],
|
||||
"translations" : {
|
||||
"en" : "Graphics",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Gráficos"
|
||||
}
|
||||
},
|
||||
"workspace.assets.search" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/assets.cljs:147" ],
|
||||
"translations" : {
|
||||
"en" : "Search assets",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Buscar recursos"
|
||||
}
|
||||
},
|
||||
"workspace.header.menu.disable-dynamic-alignment" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:117" ],
|
||||
"translations" : {
|
||||
|
|
@ -2179,13 +2260,13 @@
|
|||
}
|
||||
},
|
||||
"workspace.sidebar.icons" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/icons.cljs:89" ],
|
||||
"translations" : {
|
||||
"en" : "Icons",
|
||||
"fr" : "Icône",
|
||||
"ru" : "Иконки",
|
||||
"es" : "Iconos"
|
||||
}
|
||||
},
|
||||
"unused" : true
|
||||
},
|
||||
"workspace.sidebar.sitemap" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:150" ],
|
||||
|
|
@ -2196,6 +2277,15 @@
|
|||
"es" : "Páginas"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.assets" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:105" ],
|
||||
"translations" : {
|
||||
"en" : "Assets (Ctrl + I)",
|
||||
"fr" : "",
|
||||
"ru" : "",
|
||||
"es" : "Recursos (Ctrl + I)"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.circle" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:64" ],
|
||||
"translations" : {
|
||||
|
|
@ -2206,7 +2296,7 @@
|
|||
}
|
||||
},
|
||||
"workspace.toolbar.color-palette" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:108" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:113" ],
|
||||
"translations" : {
|
||||
"en" : "Color Palette (---)",
|
||||
"fr" : "Palette de couleurs (---)",
|
||||
|
|
@ -2242,13 +2332,13 @@
|
|||
}
|
||||
},
|
||||
"workspace.toolbar.libraries" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:100" ],
|
||||
"translations" : {
|
||||
"en" : "Libraries (Ctrl + Shift + L)",
|
||||
"fr" : "Librairies (Ctrl + Shift + L)",
|
||||
"ru" : "Библиотеки (Ctrl + Shift + L)",
|
||||
"es" : "Bibliotecas (Ctrl + Mays + L)"
|
||||
}
|
||||
},
|
||||
"unused" : true
|
||||
},
|
||||
"workspace.toolbar.path" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:88" ],
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
@import 'main/partials/sidebar-layers';
|
||||
@import 'main/partials/sidebar-sitemap';
|
||||
@import 'main/partials/sidebar-tools';
|
||||
@import 'main/partials/sidebar-assets';
|
||||
@import 'main/partials/tab-container';
|
||||
@import 'main/partials/tool-bar';
|
||||
@import 'main/partials/user-settings';
|
||||
|
|
|
|||
143
frontend/resources/styles/main/partials/sidebar-assets.scss
Normal file
143
frontend/resources/styles/main/partials/sidebar-assets.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.assets-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.assets-bar-title {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
margin: $small $small 0 $small;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background-color: $color-gray-50;
|
||||
border: 1px solid $color-gray-30;
|
||||
color: $color-gray-10;
|
||||
font-size: $fs12;
|
||||
margin: $small $small 0 $small;
|
||||
padding: $x-small;
|
||||
|
||||
&:focus {
|
||||
color: lighten($color-gray-10, 8%);
|
||||
border-color: $color-primary !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input-select {
|
||||
background-color: $color-gray-50;
|
||||
color: $color-gray-10;
|
||||
border: 1px solid transparent;
|
||||
border-bottom-color: $color-gray-40;
|
||||
padding: $x-small $x-small 0 $x-small;
|
||||
margin: $small $small $medium $small;
|
||||
|
||||
&:focus {
|
||||
color: lighten($color-gray-10, 8%);
|
||||
}
|
||||
|
||||
option {
|
||||
color: $color-gray-60;
|
||||
background: $color-white;
|
||||
font-size: $fs11;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-library {
|
||||
margin-right: $small;
|
||||
cursor: pointer;
|
||||
|
||||
&.open svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.asset-group {
|
||||
background-color: $color-gray-60;
|
||||
padding: $small;
|
||||
font-size: $fs11;
|
||||
color: $color-gray-20;
|
||||
|
||||
.group-title {
|
||||
display: flex;
|
||||
|
||||
& span {
|
||||
color: $color-gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.group-button {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
|
||||
& svg {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
fill: #F0F0F0;
|
||||
}
|
||||
}
|
||||
|
||||
.group-grid {
|
||||
margin-top: $small;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-rows: 7vh;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
background-color: $color-white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
& img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
background-color: $color-gray-60;
|
||||
font-size: $fs9;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.grid-cell:hover {
|
||||
border: 1px solid $color-primary;
|
||||
|
||||
& .cell-name {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ $width-settings-bar: 15rem;
|
|||
}
|
||||
|
||||
.settings-bar-inside {
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue