Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

add library bar and grid

Browse source
This commit is contained in:
Juan de la Cruz 2015-12-15 22:56:03 +01:00 committed by Andrey Antukh
parent 0ef064f075
commit d41a2670fa
6 changed files with 220 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/uxbox/ui/elements.cljs
View file

@ -2,6 +2,7 @@
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[uxbox.ui.header :as ui.header]
[uxbox.ui.library-bar :as ui.library-bar]
[uxbox.ui.icons :as icons]
[uxbox.util :as util]))
@ -15,16 +16,25 @@
[:main.dashboard-main
(ui.header/header)
[:section.dashboard-content
[:section#dashboard-bar.dashboard-bar.library-bar
[:section#dashboard-bar.dashboard-bar.library-gap
[:div.dashboard-info
[:span.dashboard-projects "20 elements"]
[:span "Sort by"]
#_(project-sort-selector (atom :name))]
[:div.dashboard-search
icons/search]]
(ui.library-bar/library-bar)
[:section.dashboard-grid.library
[:h2 "Library name"]
[:div.dashboard-title
[:h2 "Library name"]
[:div.edition
[:span icons/pencil]
[:span icons/trash]
]
]
[:div.dashboard-grid-content
[:div.grid-item.add-project
[:span "+ New element"]]
[:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"]

84
frontend/uxbox/ui/library_bar.cljs Normal file
View file

@ -0,0 +1,84 @@
(ns uxbox.ui.library-bar
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[uxbox.util :as util]
[uxbox.ui.icons :as i]))
(defn library-bar-render
[own]
(html
[:div.library-bar
[:div.library-bar-inside
[:ul.library-tabs
[:li "STANDARD"]
[:li.current "YOUR WIDGETS"]
]
[:ul.library-elements
[:li
[:a.btn-primary {:href "#"} "+ New library"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
[:li
[:span.element-title "Forms"]
[:span.element-subtitle "21 widgets"]
]
]
]
]))
(def ^:static library-bar
(util/component
{:render library-bar-render
:name "library-bar"
:mixins [rum/static]}))

4
resources/public/styles/partials/dashboard-bar.scss
View file

@ -44,8 +44,8 @@
}
&.library-bar {
padding: $small $medium $small 230px;
&.library-gap {
padding: $small $medium $small 270px;
}
}

56
resources/public/styles/partials/dashboard-grid.scss
View file

@ -5,6 +5,46 @@
font-size: $fs14;
padding: $medium 250px $medium $medium;
.dashboard-title {
position: relative;
width: 100%;
h2 {
text-align: center;
width: 100%;
}
.edition {
align-items: center;
display: flex;
position: absolute;
right: 40px;
top: 0;
span {
cursor: pointer;
svg {
fill: $color-gray;
height: 20px;
margin: 0 10px;
width: 20px;
}
&:hover {
svg {
fill: $color-gray-darker;
}
}
}
}
}
.dashboard-grid-content {
align-items: center;
box-sizing: border-box;
@ -13,9 +53,10 @@
height: 100%;
justify-content: center;
margin: $big;
max-height: 75vh;
max-height: 77vh;
min-height: 60vh;
overflow: scroll;
padding-bottom: 30px;
width: 100%;
.grid-item {
@ -148,6 +189,19 @@
// STYLES FOR LIBRARIES
&.library {
padding: $medium $medium $medium 250px;
.dashboard-grid-content {
.grid-item {
h3 {
font-size: $fs18;
}
}
}
}
}

121
resources/public/styles/partials/library-bar.scss
View file

@ -1,75 +1,86 @@
.activity-bar {
.library-bar {
background-color: $color-white;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
width: 250px;
.activity-bar-inside {
align-items: center;
.library-bar-inside {
display: flex;
flex-direction: column;
overflow-y: auto;
padding-top: 70px;
}
height: 100%;
padding-top: 60px;
h4 {
color: $color-gray-dark;
font-size: $fs16;
font-weight: bold;
margin-bottom: $x-small;
}
.date-ribbon {
background-color: lighten($color-gray-light, 12%);
box-sizing: border-box;
color: $color-white;
font-size: $fs12;
font-weight: bold;
padding: 2px;
text-align: center;
width: 100%;
}
.activity-input {
border-bottom: 1px solid $color-gray-lighter;
box-sizing: border-box;
display: flex;
font-size: $fs13;
padding: $small;
width: 100%;
img.activity-author {
border-radius: 50%;
flex-shrink: 0;
height: 30px;
margin-right: $medium;
width: 30px;
}
.activity-content {
.library-tabs {
align-items: center;
background-color: $color-gray-lighter;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0;
padding-top: 12px;
.activity-project {
align-items: center;
display: flex;
flex-wrap: wrap;
li {
background-color: darken($color-gray-lighter, 10%);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: $color-gray;
cursor: pointer;
font-weight: bold;
padding: .6rem;
a {
font-weight: bold;
margin: 0 3px;
&:hover {
color: $color-white;
}
&.current {
background-color: $color-white;
color: $color-primary;
}
}
.activity-time {
color: $color-gray-light;
font-size: $fs11;
font-style: italic;
}
}
.library-elements {
display: flex;
flex-direction: column;
height: 85%;
overflow-y: auto;
padding-bottom: 20px;
li {
border-bottom: 1px solid $color-gray-lighter;
cursor: pointer;
display: flex;
flex-direction: column;
padding: 10px;
.element-title {
color: $color-gray-dark;
font-weight: bold;
margin-bottom: 5px;
}
.element-subtitle {
color: $color-gray-light;
font-style: italic;
}
&:hover,
.current {
background-color: $color-primary;
.element-title,
.element-subtitle {
color: $color-white;
}
}
}
}
}
}

2
resources/public/styles/partials/main-bar.scss
View file

@ -23,7 +23,7 @@
align-items: center;
display: flex;
height: 50px;
margin: 0 0 0 100px;
margin: 0 0 0 120px;
li {