From 101379e0b878cd1e9942e9e607b0ded6a8509519 Mon Sep 17 00:00:00 2001
From: Mostik <mostik.dev@gmail.com>
Date: Mon, 2 May 2022 13:31:43 +0300
Subject: [PATCH] add: welcome component

---
 resources/themes/dark.json  |  1 +
 resources/themes/light.json |  1 +
 src/configuration.nim       |  2 ++
 src/folx.nim                |  8 ++++-
 src/welcome.nim             | 60 +++++++++++++++++++++++++++++++++++++
 5 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/welcome.nim

diff --git a/resources/themes/dark.json b/resources/themes/dark.json
index 1802401..ff0adbf 100644
--- a/resources/themes/dark.json
+++ b/resources/themes/dark.json
@@ -1,6 +1,7 @@
 {
     "cActive": "DDDDDD",
     "cInActive": "AAAAAA",
+    "cMiddle": "555555",
 
     "bgScrollBar": "303030",
     "bgVerticalLine": "404040",
diff --git a/resources/themes/light.json b/resources/themes/light.json
index b14ca68..05843f8 100644
--- a/resources/themes/light.json
+++ b/resources/themes/light.json
@@ -1,6 +1,7 @@
 {
     "cActive": "DDDDDD",
     "cInActive": "AAAAAA",
+    "cMiddle": "555555",
 
     "bgScrollBar": "c1c1c1",
     "bgVerticalLine": "d3d3d3",
diff --git a/src/configuration.nim b/src/configuration.nim
index 709481a..163a83b 100644
--- a/src/configuration.nim
+++ b/src/configuration.nim
@@ -26,6 +26,7 @@ type
   ColorTheme* = object
     cActive*: ColorRGB
     cInActive*: ColorRGB
+    cMiddle*: ColorRGB
   
     bgScrollBar*: ColorRGB
     bgVerticalLine*: ColorRGB
@@ -126,6 +127,7 @@ const defaultColorTheme = ColorTheme(
 
   cActive: rgb(221, 221, 221),
   cInActive: rgb(170, 170, 170),
+  cMiddle: rgb(85, 85, 85),
 
   bgScrollBar: rgb(48, 48, 48),
   bgVerticalLine: rgb(64, 64, 64),
diff --git a/src/folx.nim b/src/folx.nim
index 11581d6..8c8de58 100644
--- a/src/folx.nim
+++ b/src/folx.nim
@@ -1,6 +1,6 @@
 import sequtils, os, times, math, unicode, std/monotimes, options
 import cligen
-import markup, configuration, git, text, text_editor, side_explorer, explorer, title, status_bar
+import markup, configuration, git, text, text_editor, side_explorer, explorer, title, status_bar, welcome
 
 proc contains*(b: Rect, a: GVec2): bool =
   let a = a.vec2
@@ -106,6 +106,9 @@ proc folx(files: seq[string] = @[], workspace: string = "", preferWorkFolderReso
         TextEditor text_editor(x = 260, y = 40, w = window.size.vec2.x - 260, h = window.size.vec2.y - 60):
           gt = editor_gt
           bg = colorTheme.bgTextArea
+      else:
+        Welcome(wh = window.size.vec2):
+          gt = editor_gt
           
       TitleBar(w = window.size.vec2.x, h = 40):
         gt = interface_gt
@@ -134,6 +137,9 @@ proc folx(files: seq[string] = @[], workspace: string = "", preferWorkFolderReso
         TextEditor text_editor(top = 40, bottom = 20):
           gt = editor_gt
           bg = colorTheme.bgTextArea
+      else:
+        Welcome(wh = window.size.vec2):
+          gt = editor_gt
 
       TitleBar(w = window.size.vec2.x, h = 40):
         gt = interface_gt
diff --git a/src/welcome.nim b/src/welcome.nim
new file mode 100644
index 0000000..fcda88c
--- /dev/null
+++ b/src/welcome.nim
@@ -0,0 +1,60 @@
+import pixwindy, pixie
+import render, configuration, markup
+
+component Name {.noexport.}:
+  proc handle(
+    gt: var GlyphTable,
+  )
+
+  let 
+    box = parentBox
+    dy = round(gt.font.size * 1.27)
+
+  image.draw ("folx").toRunes, colorTheme.cMiddle, vec2(box.x, box.y), box, gt, colorTheme.bgTextArea
+
+component Item {.noexport.}:
+  proc handle(
+    gt: var GlyphTable,
+    label: string,
+    hotkey: string,
+  )
+
+  let 
+    box = parentBox
+    dy = round(gt.font.size * 1.27)
+
+  image.draw (label).toRunes, colorTheme.cMiddle, vec2(box.x, box.y), box, gt, colorTheme.bgTextArea
+
+  r.fillStyle = colorTheme.cMiddle
+  r.fillRoundedRect rect(vec2(box.x + 265, box.y - 2), vec2(130, 40)), 10.0
+
+  r.fillStyle = colorTheme.bgTextArea
+  r.fillRoundedRect rect(vec2(box.x + 267, box.y), vec2(126, 36)), 10.0
+
+  image.draw (hotkey).toRunes, colorTheme.cMiddle, vec2(box.x + 280, box.y), box, gt, colorTheme.bgTextArea
+
+
+component Welcome:
+  proc handle(
+    gt: var GlyphTable,
+  )
+
+  let box = parentBox
+
+  gt.font.size = gt.font.size * 2.5
+
+  Name(x = (box.w - 400) / 2, y = 200, w = 400, h = 50):
+    gt = gt
+
+  Item(x = (box.w - 400) / 2, y = 300, w = 400, h = 50):
+    gt = gt
+    label = "Open Folder"
+    hotkey = "Ctrl+O"
+
+  Item(x = (box.w - 400) / 2, y = 400, w = 400, h = 50):
+    gt = gt
+    label = "Open Explorer"
+    hotkey = "Ctrl+E"
+
+  gt.font.size = gt.font.size / 2.5
+