mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 18:26:12 +02:00
✨ Add view mode to dashboard
This commit is contained in:
parent
c841ed6419
commit
cf150891df
36 changed files with 699 additions and 240 deletions
|
@ -10,5 +10,8 @@
|
|||
$sz-16: px2rem(16);
|
||||
$sz-32: px2rem(32);
|
||||
$sz-36: px2rem(36);
|
||||
$sz-160: px2rem(160);
|
||||
$sz-200: px2rem(200);
|
||||
$sz-224: px2rem(224);
|
||||
$sz-400: px2rem(400);
|
||||
$sz-964: px2rem(964);
|
||||
|
|
|
@ -25,6 +25,10 @@
|
|||
(def ^:svg-id marketing-layers "marketing-layers")
|
||||
(def ^:svg-id penpot-logo "penpot-logo")
|
||||
(def ^:svg-id penpot-logo-icon "penpot-logo-icon")
|
||||
(def ^:svg-id empty-placeholder-1-left "empty-placeholder-1-left")
|
||||
(def ^:svg-id empty-placeholder-1-right "empty-placeholder-1-right")
|
||||
(def ^:svg-id empty-placeholder-2-left "empty-placeholder-2-left")
|
||||
(def ^:svg-id empty-placeholder-2-right "empty-placeholder-2-right")
|
||||
|
||||
(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
|
||||
|
||||
|
|
|
@ -12,8 +12,6 @@
|
|||
[app.main.ui.ds.foundations.assets.icon :as i]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def levels (set '("info" "warning" "error" "success")))
|
||||
|
||||
(def ^:private icons-by-level
|
||||
{"info" i/info
|
||||
"warning" i/msg-neutral
|
||||
|
|
40
frontend/src/app/main/ui/ds/product/empty_placeholder.cljs
Normal file
40
frontend/src/app/main/ui/ds/product/empty_placeholder.cljs
Normal file
|
@ -0,0 +1,40 @@
|
|||
;; 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) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.product.empty-placeholder
|
||||
(:require-macros
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
|
||||
[app.main.ui.ds.foundations.typography :as t]
|
||||
[app.main.ui.ds.foundations.typography.text :refer [text*]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private schema:empty-placeholder
|
||||
[:map
|
||||
[:class {:optional true} :string]
|
||||
[:title :string]
|
||||
[:subtitle {:optional true} [:maybe :string]]
|
||||
[:type {:optional true} [:maybe [:enum 1 2]]]])
|
||||
|
||||
(mf/defc empty-placeholder*
|
||||
{::mf/props :obj
|
||||
::mf/schema schema:empty-placeholder}
|
||||
[{:keys [class title subtitle type children] :rest props}]
|
||||
|
||||
(let [class (dm/str class " " (stl/css :empty-placeholder))
|
||||
props (mf/spread-props props {:class class})
|
||||
type (or type 1)
|
||||
decoration-type (dm/str "empty-placeholder-" (str type))]
|
||||
[:> "div" props
|
||||
[:> raw-svg* {:id (dm/str decoration-type "-left") :class (stl/css :svg-decor)}]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:> text* {:as "span" :typography t/title-medium :class (stl/css :placeholder-title)} title]
|
||||
(when subtitle
|
||||
[:> text* {:as "span" :typography t/body-large} subtitle])
|
||||
children]
|
||||
[:> raw-svg* {:id (dm/str decoration-type "-right") :class (stl/css :svg-decor)}]]))
|
38
frontend/src/app/main/ui/ds/product/empty_placeholder.scss
Normal file
38
frontend/src/app/main/ui/ds/product/empty_placeholder.scss
Normal file
|
@ -0,0 +1,38 @@
|
|||
// 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) KALEIDOS INC
|
||||
|
||||
@use "../_sizes.scss" as *;
|
||||
@use "../_borders.scss" as *;
|
||||
|
||||
.empty-placeholder {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
place-content: center;
|
||||
background: none;
|
||||
color: var(--color-foreground-secondary);
|
||||
height: $sz-160;
|
||||
max-width: $sz-964;
|
||||
border-radius: $br-8;
|
||||
border: $b-1 solid var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
max-width: $sz-400;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.svg-decor {
|
||||
height: $sz-160;
|
||||
width: $sz-200;
|
||||
color: var(--color-background-quaternary);
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
|
||||
const { EmptyPlaceholder } = Components;
|
||||
|
||||
export default {
|
||||
title: "Product/EmptyPlaceholder",
|
||||
component: EmptyPlaceholder,
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
type: {
|
||||
control: "radio",
|
||||
options: [1, 2],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
type: 1,
|
||||
title: "Lorem ipsum",
|
||||
subtitle:
|
||||
"dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
},
|
||||
render: ({ ...args }) => <EmptyPlaceholder {...args} />,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
|
||||
export const AlternativeDecoration = {
|
||||
args: {
|
||||
type: 2,
|
||||
},
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue