diff --git a/slides/folders.ftd b/slides/folders.ftd new file mode 100644 index 00000000..ed441f75 --- /dev/null +++ b/slides/folders.ftd @@ -0,0 +1,14 @@ +-- import: fifthtry.github.io/ui/slides/ui/folders +-- import: fifthtry.github.io/ui/slides/ui/common + + +-- slide-ds.page: + +-- folders.new-folders: +new-folder-lists: $common.new-folder-lists + +-- folders.all-projects: +all-projects-lists: $common.all-projects-lists +all-template-lists: $common.all-template-lists + +-- end: slide-ds.page diff --git a/slides/index.ftd b/slides/index.ftd index eec69e29..4b605699 100644 --- a/slides/index.ftd +++ b/slides/index.ftd @@ -4,5 +4,6 @@ - [Present](slides/present/) - [All Templates](slides/all-templates/) - [Editor](slides/editor/) +- [Folders](slides/folders/) -- end: ds.page diff --git a/slides/ui/assets/plus-dark.svg b/slides/ui/assets/plus-dark.svg new file mode 100644 index 00000000..c55d3907 --- /dev/null +++ b/slides/ui/assets/plus-dark.svg @@ -0,0 +1,4 @@ + + + diff --git a/slides/ui/common/index.ftd b/slides/ui/common/index.ftd index 3f9fe345..51cc68a8 100644 --- a/slides/ui/common/index.ftd +++ b/slides/ui/common/index.ftd @@ -34,20 +34,20 @@ boolean active: false -- slide-image list slide-lists: -- slide-image: -src: $assets.files.assets.1.svg +src: $assets.files.slides.ui.assets.1.svg active: true index: 1 -- slide-image: -src: $assets.files.assets.2.svg +src: $assets.files.slides.ui.assets.2.svg index: 2 -- slide-image: -src: $assets.files.assets.3.svg +src: $assets.files.slides.ui.assets.3.svg index: 3 -- slide-image: -src: $assets.files.assets.4.svg +src: $assets.files.slides.ui.assets.4.svg index: 4 -- end: slide-lists @@ -68,8 +68,8 @@ boolean active: false -- folder-list list folder-lists: -- folder-list: Drive -icon-1: $assets.files.assets.home.svg -icon-2: $assets.files.assets.right-arrow.svg +icon-1: $assets.files.slides.ui.assets.home.svg +icon-2: $assets.files.slides.ui.assets.right-arrow.svg active: true index: 1 @@ -91,15 +91,15 @@ string item: -- new-folder-list list new-folder-lists: -- new-folder-list: Folder name -icon: $assets.files.assets.folder.svg +icon: $assets.files.slides.ui.assets.folder.svg item: 12 items -- new-folder-list: Folder name -icon: $assets.files.assets.folder.svg +icon: $assets.files.slides.ui.assets.folder.svg item: 12 items -- new-folder-list: Folder name -icon: $assets.files.assets.folder.svg +icon: $assets.files.slides.ui.assets.folder.svg item: 12 items -- end: new-folder-lists @@ -119,27 +119,27 @@ string time: -- all-projects-list list all-projects-lists: -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- all-projects-list: Documentation site -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png time: Edited 18 min ago -- end: all-projects-lists @@ -158,28 +158,28 @@ ftd.image-src image: -- all-template-list list all-template-lists: -- all-template-list: Templates 1 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 2 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 3 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 4 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 5 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 6 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 7 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- all-template-list: Templates 8 -image: $assets.files.assets.image.png +image: $assets.files.slides.ui.assets.image.png -- end: all-template-lists @@ -201,43 +201,43 @@ string owner-name: -- template-list list template-lists: -- template-list: Templates 1 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 2 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 3 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 4 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 5 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 6 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 7 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- template-list: Templates 8 -image: $assets.files.assets.image.png -avatar: $assets.files.assets.avatar.svg +image: $assets.files.slides.ui.assets.image.png +avatar: $assets.files.slides.ui.assets.avatar.svg owner-name: Owner Name -- end: template-lists @@ -260,36 +260,36 @@ optional string action: -- team-member list member-list: -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Admin -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Member action: Remove -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Member action: Remove -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Member action: Remove -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Member action: Remove -- team-member: -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg email: yashveermehra@fastn.com role: Member action: Remove @@ -313,7 +313,7 @@ body body: -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -322,7 +322,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -331,7 +331,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -340,7 +340,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -349,7 +349,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -358,7 +358,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -367,7 +367,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi @@ -376,7 +376,7 @@ aliquam enim urna, etiam. -- all-comment: name: YashveerMehra -avatar: $assets.files.assets.avatar.svg +avatar: $assets.files.slides.ui.assets.avatar.svg timestamp: 28 min ago Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi diff --git a/slides/ui/folders.ftd b/slides/ui/folders.ftd new file mode 100644 index 00000000..b5511641 --- /dev/null +++ b/slides/ui/folders.ftd @@ -0,0 +1,470 @@ +-- import: fifthtry.github.io/ui/slides/ui/common + +-- integer $current-folder: 1 + + +-- ds.page: +sidebar: true + +-- new-folders: +new-folder-lists: $common.new-folder-lists + +-- all-projects: +all-projects-lists: $common.all-projects-lists +all-template-lists: $common.all-template-lists + +-- end: ds.page + + + + + + + + + + +-- component new-folders: +common.new-folder-list list new-folder-lists: +boolean $pop-up: false + +-- ftd.column: +width: fill-container +padding-bottom.px: 24 +padding-top.px: 12 + +-- ftd.row: +width: fill-container +spacing: space-between +padding-bottom.px: 24 + +-- ftd.text: Folders +role: $inherited.types.heading-medium +color: $inherited.colors.text-strong + +-- ftd.row: +width.fixed.px: 134 +padding-horizontal.px: 12 +padding-vertical.px: 8 +background.solid: $inherited.colors.background.step-2 +border-radius.px: 8 +spacing.fixed.px: 6 +align-content: center +$on-click$: $ftd.set-bool($a = $new-folders.pop-up, v = true) + +-- ftd.image: +src: $assets.files.slides.ui.assets.plus.svg +width.fixed.px: 14 + +-- ftd.text: New Folder +role: $inherited.types.copy-small +color: $inherited.colors.text-strong + +-- end: ftd.row + +-- ftd.column: +if: { new-folders.pop-up } +width.fixed.px: 370 +height.fixed.px: 296 +background.solid: $inherited.colors.background.base +padding.px: 24 +spacing.fixed.px: 24 +border-width.px: 1 +border-color: $inherited.colors.border-strong +z-index: 5 +anchor: parent +left.px: 350 +top.px: 100 +border-radius.px: 8 +shadow: $s + +-- ftd.row: +width: fill-container +spacing: space-between +align-content: center + +-- ftd.text: Create new folder +role: $inherited.types.heading-small +color: $inherited.colors.text-strong + +-- ftd.image: +src: $assets.files.slides.ui.assets.cross.svg +width.fixed.px: 28 +height.fixed.px: 28 +$on-click$: $ftd.set-bool($a = $new-folders.pop-up, v = false) + +-- end: ftd.row + +-- ftd.text: Folder name +role: $inherited.types.button-small +color: $inherited.colors.text-strong + +-- ftd.text-input: +type: text +width: fill-container +height.fixed.px: 56 +background.solid: transparent +border-width.px: 2 +border-color: $inherited.colors.border +color: $inherited.colors.text-strong +padding-horizontal.px: 8 +border-radius.px: 4 + +-- ftd.text: Create +width: fill-container +padding-horizontal.px: 18 +color: $inherited.colors.cta-primary.text +padding-vertical.px: 16 +background.solid: $inherited.colors.cta-primary.base +border-radius.px: 8 +text-align: center + +-- end: ftd.column + +-- end: ftd.row + +-- ftd.row: +width: fill-container +padding-vertical.px: 24 +spacing.fixed.px: 24 +wrap: true + +-- new-folder-details: $obj.title +$loop$: $new-folders.new-folder-lists as $obj +icon: $obj.icon +item: $obj.item + +-- end: ftd.row + +-- end: ftd.column + +-- end: new-folders + + + + + + + + + +-- component new-folder-details: +caption title: +ftd.image-src icon: +string item: +boolean $menu: false +boolean $open-menu: false + +-- ftd.row: +width.fixed.px: 260 +padding-vertical.px: 8 +padding-horizontal.px: 16 +spacing.fixed.px: 16 +cursor: pointer +background.solid if { new-folder-details.menu }: $inherited.colors.background.step-1 +$on-mouse-enter$: $ftd.set-bool($a = $new-folder-details.menu, v = true) +$on-mouse-leave$: $ftd.set-bool($a = $new-folder-details.menu, v = false) +border-radius.px: 6 + +-- ftd.image: +src: $assets.files.slides.ui.assets.folder.svg +width.fixed.px: 48 + +-- ftd.column: +spacing.fixed.px: 4 + +-- ftd.text: $new-folder-details.title +role: $inherited.types.copy-large +color: $inherited.colors.text-strong + +-- ftd.text: $new-folder-details.item +role: $inherited.types.label-small +color: $inherited.colors.text + +-- end: ftd.column + +-- ftd.image: +if: { new-folder-details.menu } +src: $assets.files.slides.ui.assets.option.svg +width.fixed.px: 24 +align-self: center +$on-click$: $ftd.toggle($a = $new-folder-details.open-menu) + +-- ftd.column: +if: { new-folder-details.open-menu } +width.fixed.px: 244 +background.solid: $inherited.colors.background.step-2 +border-radius.px: 8 +border-width.px: 1 +border-color: $inherited.colors.border +padding.px: 8 +spacing.fixed.px: 8 +z-index: 5 +anchor: parent +right.px: -222 +top.px: -52 +role: $inherited.types.copy-regular +color: $inherited.colors.text-strong + +-- ftd.row: +spacing.fixed.px: 8 +padding.px: 8 +align-content: center + +-- ftd.image: +src: $assets.files.slides.ui.assets.copy.svg +width.fixed.px: 24 +height.fixed.px: 24 + +-- ftd.text: Make a copy + +-- end: ftd.row + +-- ftd.row: +spacing.fixed.px: 8 +padding.px: 8 +align-content: center + +-- ftd.image: +src: $assets.files.slides.ui.assets.add-user.svg +width.fixed.px: 24 +height.fixed.px: 24 + +-- ftd.text: Share + +-- end: ftd.row + +-- ftd.row: +spacing.fixed.px: 8 +padding.px: 8 +align-content: center + +-- ftd.image: +src: $assets.files.slides.ui.assets.copy-link.svg +width.fixed.px: 24 +height.fixed.px: 24 + +-- ftd.text: Copy Link + +-- end: ftd.row + +-- ftd.row: +spacing.fixed.px: 8 +padding.px: 8 +align-content: center + +-- ftd.image: +src: $assets.files.slides.ui.assets.trash.svg +width.fixed.px: 24 +height.fixed.px: 24 + +-- ftd.text: Move to trash + +-- end: ftd.row + +-- end: ftd.column + +-- end: ftd.row + +-- end: new-folder-details + + + + + + + + + + +-- component all-projects: +common.all-projects-list list all-projects-lists: +common.all-template-list list all-template-lists: +boolean $pop-up: false + +-- ftd.column: +width: fill-container +padding-bottom.px: 24 +padding-top.px: 12 + +-- ftd.row: +width: fill-container +spacing: space-between +padding-bottom.px: 24 + +-- ftd.text: All projects +role: $inherited.types.heading-medium +color: $inherited.colors.text-strong + +-- ftd.row: +width.fixed.px: 134 +padding-horizontal.px: 12 +padding-vertical.px: 8 +background.solid: $inherited.colors.background.step-2 +border-radius.px: 8 +spacing.fixed.px: 6 +align-content: center +$on-click$: $ftd.set-bool($a = $all-projects.pop-up, v = true) + +-- ftd.image: +src: $assets.files.slides.ui.assets.plus.svg +width.fixed.px: 14 + +-- ftd.text: New Project +role: $inherited.types.copy-small +color: $inherited.colors.text-strong + +-- end: ftd.row + +-- ftd.column: +if: { all-projects.pop-up } +width.fixed.px: 720 +height.fixed.px: 602 +background.solid: $inherited.colors.background.base +padding.px: 24 +spacing.fixed.px: 24 +border-width.px: 1 +border-color: $inherited.colors.border-strong +z-index: 5 +anchor: parent +top.px: -204 +left.px: 150 +border-radius.px: 8 +shadow: $s +overflow-y: scroll + +-- ftd.row: +width: fill-container +spacing: space-between +align-content: center +border-bottom-width.px: 1 +border-color: $inherited.colors.border +padding-bottom.px: 16 + +-- ftd.text: Select a template +role: $inherited.types.heading-small +color: $inherited.colors.text-strong + +-- ftd.image: +src: $assets.files.slides.ui.assets.cross.svg +width.fixed.px: 28 +height.fixed.px: 28 +$on-click$: $ftd.set-bool($a = $all-projects.pop-up, v = false) + +-- end: ftd.row + +-- ftd.row: +width: fill-container +spacing.fixed.px: 24 +wrap: true + +-- template-list: $obj.title +$loop$: $all-projects.all-template-lists as $obj +image: $obj.image + +-- end: ftd.row + +-- end: ftd.column + +-- end: ftd.row + +-- ftd.row: +width.fixed.px: 940 +padding-vertical.px: 24 +spacing.fixed.px: 24 +wrap: true + +-- all-projects-details: $obj.title +$loop$: $all-projects.all-projects-lists as $obj +image: $obj.image +time: $obj.time + +-- end: ftd.row + +-- end: ftd.column + +-- end: all-projects + + + + + + + + + +-- component all-projects-details: +caption title: +ftd.image-src image: +string time: + +-- ftd.column: +width.fixed.px: 243 +spacing.fixed.px: 8 +padding-bottom.px: 8 +cursor: pointer + +-- ftd.image: +src: $all-projects-details.image +width: fill-container + +-- ftd.text: $all-projects-details.title +role: $inherited.types.heading-tiny +color: $inherited.colors.text-strong + +-- ftd.text: $all-projects-details.time +role: $inherited.types.copy-small +color: $inherited.colors.text +style: light + +-- end: ftd.column + +-- end: all-projects-details + + + + + + + + + + +-- component template-list: +caption title: +ftd.image-src image: + +-- ftd.column: +width.fixed.px: 200 +spacing.fixed.px: 8 +padding-bottom.px: 8 +cursor: pointer +align-content: center + +-- ftd.image: +src: $template-list.image +width: fill-container + +-- ftd.text: $template-list.title +role: $inherited.types.copy-small +color: $inherited.colors.text-strong + +-- end: ftd.column + +-- end: template-list + + + + + + + + + + +-- ftd.shadow s: +color: #000000 +x-offset.px: 4 +y-offset.px: 4 +blur.px: 20 +spread.px: 8