From 6d1661c773a7c77da97cb4096bfa151c5fcd0458 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Thu, 25 Aug 2016 19:13:42 +0200
Subject: [PATCH] add new export lightbox layout

---
 resources/styles/main/partials/lightbox.scss | 59 ++++++++++++++++++++
 src/uxbox/main/ui/workspace/download.cljs    | 26 ++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/resources/styles/main/partials/lightbox.scss b/resources/styles/main/partials/lightbox.scss
index 0eb2364c4..ec04b7c60 100644
--- a/resources/styles/main/partials/lightbox.scss
+++ b/resources/styles/main/partials/lightbox.scss
@@ -99,6 +99,11 @@
       min-width: 120px;
     }
 
+    // Export dialog
+    &.export-dialog {
+      width: auto;
+    }
+
   }
 
 }
@@ -207,3 +212,57 @@
     margin: 2rem 1rem 0 1rem;
   }
 }
+
+// Export dialog
+.content-col {
+  align-items: center;
+  border-right: 1px solid $soft-ui-border;
+  display: flex;
+  flex-direction: column;
+  flex: 300px;
+  height: 450px;
+  padding: 2rem;
+
+  &:first-child{
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    border: none;
+    padding-right: 1rem;
+  }
+
+  .icon {
+    align-items: center;
+    background-color: $soft-ui-icons;
+    border-radius: $br-medium;
+    display: flex;
+    flex-shrink: 0;
+    height: 120px;
+    justify-content: center;
+    width: 120px;
+
+    svg {
+      fill: $medium-ui-icons;
+      height: 50px;
+      width: 50px;
+    }
+
+  }
+
+  .title {
+    font-size: $fs20;
+    font-weight: 500;
+    margin: 1rem 0;
+  }
+
+  .info {
+    font-size: $fs16;
+    text-align: center;
+  }
+
+  .btn-primary {
+    margin-top: auto !important;
+  }
+
+}
diff --git a/src/uxbox/main/ui/workspace/download.cljs b/src/uxbox/main/ui/workspace/download.cljs
index 2c1c9f1a0..ea7b5f997 100644
--- a/src/uxbox/main/ui/workspace/download.cljs
+++ b/src/uxbox/main/ui/workspace/download.cljs
@@ -29,9 +29,29 @@
 (defn- download-dialog-render
   [own]
   (html
-   [:div.lightbox-body.settings
-    [:h3 "Download Dialog"]
-    [:p "Content here"]
+   [:div.lightbox-body.export-dialog
+    [:h3 "Export options"]
+    [:div.row-flex
+     [:div.content-col
+      [:span.icon i/trash]
+      [:span.title "Export page"]
+      [:p.info "Get a single page of your project in SVG."]
+      [:select.input-select
+       [:option "Choose a page"]
+       [:option "Page 001"]
+       [:option "Page 002"]
+       [:option "Page 003"]]
+      [:a.btn-primary {:href "#"} "Export page"]]
+     [:div.content-col
+      [:span.icon i/trash]
+      [:span.title "Export project"]
+      [:p.info "Get the whole project as a ZIP file."]
+      [:a.btn-primary {:href "#"} "Expor project"]]
+     [:div.content-col
+      [:span.icon i/trash]
+      [:span.title "Export as HTML"]
+      [:p.info "Get your project as HTML."]
+      [:a.btn-primary {:href "#"} "Export HTML"]]]
     [:a.close {:href "#"
                :on-click #(do (dom/prevent-default %)
                               (udl/close!))} i/close]]))