Added all-template page in slide

slides/all-templates.ftd

@@ -0,0 +1,32 @@
+-- import: fifthtry.github.io/ui/slides/ui/all-templates
+
+-- all-templates.template list template-list:
+
+-- all-templates.template: Good Template
+image: $assets.files.slides.ui.assets.template-1.png
+avatar: $assets.files.slides.ui.assets.avatar.svg
+owner-name: John Doe
+
+-- all-templates.template: Good Template
+image: $assets.files.slides.ui.assets.template-2.png
+avatar: $assets.files.slides.ui.assets.avatar.svg
+owner-name: John Doe
+
+-- end: template-list
+
+
+
+
+
+
+-- slide-ds.page:
+
+-- all-templates.templates: All templates
+template-lists: $template-list
+
+-- end: slide-ds.page
+
+
+
+-- all-templates.templates-details-modal: $all-templates.current-template
+$pop-up: $all-templates.template-modal-open

slides/index.ftd

@@ -2,5 +2,6 @@
 
 - [Login](slides/login/)
 - [Present](slides/present/)
+- [All Templates](slides/all-templates/)
 
 -- end: ds.page

slides/ui/all-templates.ftd

@@ -0,0 +1,286 @@
+-- import: slides.fifthtry.com/utils as ds
+
+
+-- record template:
+caption title:
+ftd.image-src image:
+ftd.image-src list thumbnails:
+ftd.image-src avatar:
+string owner-name:
+
+
+-- template list $template-list:
+
+-- template $current-template: *$ftd.empty
+image: *$ftd.empty
+avatar: *$ftd.empty
+owner-name: *$ftd.empty
+
+
+-- boolean $template-modal-open: false
+
+
+-- loader-component:
+url: /templates
+$return-variable: $template-list
+
+-- ds.page:
+sidebar: true
+
+-- templates: All templates
+template-lists: $template-list
+
+-- end: ds.page
+
+
+
+
+
+-- templates-details-modal: $current-template
+$pop-up: $template-modal-open
+
+
+
+
+
+-- component templates:
+caption title:
+template list template-lists:
+
+-- ftd.column:
+width: fill-container
+padding-horizontal.px: 40
+padding-bottom.px: 24
+padding-top.px: 12
+
+-- ftd.text: $templates.title
+role: $inherited.types.heading-medium
+color: $inherited.colors.text-strong
+
+-- ftd.row:
+width: fill-container
+padding-vertical.px: 24
+spacing.fixed.px: 24
+align-content: top-left
+wrap: true
+
+-- templates-details: *$template
+for: $template in $templates.template-lists
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: templates
+
+
+
+
+
+
+
+
+
+-- component templates-details:
+caption template $template:
+
+-- ftd.column:
+width.fixed.px: 243
+spacing.fixed.px: 8
+padding-bottom.px: 8
+border-radius.px: 8
+cursor: pointer
+$on-click$: $set-current-template($c = $current-template, t = $templates-details.template)
+$on-click$: $ftd.set-boolean($a = $template-modal-open, v = true)
+
+-- ftd.image:
+src: $templates-details.template.image
+width: fill-container
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 8
+padding-top.px: 8
+
+-- ftd.image:
+src: $templates-details.template.avatar
+width.fixed.px: 32
+height.fixed.px: 32
+fit: cover
+align-self: center
+
+-- ftd.column:
+spacing.fixed.px: 4
+
+-- ftd.text: $templates-details.template.title
+role: $inherited.types.heading-tiny
+color: $inherited.colors.text-strong
+
+-- ftd.text: $templates-details.template.owner-name
+role: $inherited.types.copy-small
+color: $inherited.colors.text
+style: light
+
+-- end: ftd.column
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: templates-details
+
+
+
+
+
+
+
+-- component templates-details-modal:
+caption template $template:
+boolean $pop-up:
+ftd.image-src $current-thumbnail: $templates-details-modal.template.image
+
+-- ftd.column:
+if: { templates-details-modal.pop-up }
+anchor: window
+width: fill-container
+height: fill-container
+z-index: 999999
+align-content: center
+
+-- ftd.column:
+min-width.fixed.px: 1260
+min-height.fixed.px: 612
+background.solid: $inherited.colors.background.step-1
+border-color: $inherited.colors.border
+border-radius.px: 8
+border-width.px: 1
+padding.px: 24
+margin.rem: 2
+overflow-y: auto
+
+-- ftd.row:
+width: fill-container
+spacing: space-between
+padding-horizontal.px: 8
+padding-bottom.px: 35
+border-bottom-width.px: 1
+border-color: $inherited.colors.border
+
+-- ftd.text: Create new Project
+role: $inherited.types.heading-small
+color: $inherited.colors.text-strong
+
+-- ftd.image:
+src: $assets.files.slides.ui.assets.cross.svg
+width.fixed.px: 24
+height.fixed.px: 24
+$on-click$: $ftd.set-bool($a= $templates-details-modal.pop-up, v = false)
+
+-- end: ftd.row
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 35
+padding-top.px: 35
+padding-bottom.px: 24
+
+-- ftd.column:
+width.fixed.px: 808
+spacing.fixed.px: 35
+
+-- ftd.image:
+src: $templates-details-modal.template.image
+src if { !ftd.is_empty(templates-details-modal.current-thumbnail) }: $templates-details-modal.current-thumbnail
+width: fill-container
+fit: cover
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 16
+
+-- ftd.image: $thumbnail
+width.fixed.px: 190
+fit: cover
+for: $thumbnail in $templates-details-modal.template.thumbnails
+$on-click$: $set-current-thumbnail($c = $templates-details-modal.current-thumbnail, $t = $thumbnail)
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- ftd.column:
+width.fixed.px: 373
+spacing.fixed.px: 16
+
+-- ftd.text: $templates-details-modal.template.title
+role: $inherited.types.heading-medium
+color: $inherited.colors.text-strong
+
+-- ftd.row:
+spacing.fixed.px: 8
+align-content: center
+
+-- ftd.image:
+src: $assets.files.slides.ui.assets.avatar.svg
+width.fixed.px: 32
+height.fixed.px: 32
+fit: cover
+align-self: center
+
+-- ftd.text: $templates-details-modal.template.owner-name
+role: $inherited.types.button-small
+color: $inherited.colors.text-strong
+
+-- end: ftd.row
+
+-- ftd.text: Use this template
+role: $inherited.types.button-large
+color: $inherited.colors.text-strong
+padding-vertical.px: 16
+padding-horizontal.px: 18
+text-align: center
+border-radius.px: 8
+background.solid: $inherited.colors.accent.primary
+width: fill-container
+$on-click$: $create-presentation(template = *$templates-details-modal.template)
+
+-- end: ftd.column
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: templates-details-modal
+
+
+
+-- void set-current-thumbnail(c, t):
+ftd.image-src $c:
+ftd.image-src $t:
+js: functions.js
+
+set_current_thumbnail(c, t)
+
+
+-- void set-current-template(c, t):
+template $c:
+template t:
+js: functions.js
+
+set_current_template(c, t)
+
+
+-- void create-presentation(template):
+template template:
+js: functions.js
+
+create_presentation_from_template(template)
+
+-- web-component loader-component:
+string url:
+string version: v2
+template list $return-variable:
+js: $assets.files.slides.ui.loader-component.js