From 21b8ae830b7884fa17b0fcb836e10dd928bf06b6 Mon Sep 17 00:00:00 2001
From: Sudhir Kumar <s@atomicits.com>
Date: Mon, 12 Mar 2018 12:22:10 +0530
Subject: [PATCH] tree integrated with the docview and open close icons also
done
---
dist/index.html | 40 ++++++++++++++++++++++++++++++++++++++++
src/DocView.purs | 35 ++++++++++++++++++++++-------------
2 files changed, 62 insertions(+), 13 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index e0dd6fcb..9ce1e90f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,6 +10,46 @@
<!-- <link href="css/lavish-bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<link href="css/Login.css" rel="stylesheet">
+ <style>
+ * {margin: 0; padding: 0; list-style: none;}
+ ul li {
+ margin-left: 15px;
+ position: relative;
+ padding-left: 5px;
+ }
+ ul li::before {
+ content: " ";
+ position: absolute;
+ width: 1px;
+ background-color: #000;
+ top: 5px;
+ bottom: -12px;
+ left: -10px;
+ }
+ body > ul > li:first-child::before {top: 12px;}
+ ul li:not(:first-child):last-child::before {display: none;}
+ ul li:only-child::before {
+ display: list-item;
+ content: " ";
+ position: absolute;
+ width: 1px;
+ background-color: #000;
+ top: 5px;
+ bottom: 7px;
+ height: 7px;
+ left: -10px;
+ }
+ ul li::after {
+ content: " ";
+ position: absolute;
+ left: -10px;
+ width: 10px;
+ height: 1px;
+ background-color: #000;
+ top: 12px;
+ }
+ </style>
+
</head>
<body>
diff --git a/src/DocView.purs b/src/DocView.purs
index 1a2d811b..23326d85 100644
--- a/src/DocView.purs
+++ b/src/DocView.purs
@@ -28,7 +28,7 @@ import Partial.Unsafe (unsafePartial)
import React (ReactElement)
import React as R
import React.DOM (a, b, b', br, br', div, dt, i, input, li, option, select, span, table, tbody, td, text, thead, tr, ul)
-import React.DOM.Props (_type, className, href, onChange, onClick, selected, value)
+import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, style, value)
import ReactDOM as RDOM
import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, defaultPerformAction, modifyState, simpleSpec)
import Unsafe.Coerce (unsafeCoerce)
@@ -95,9 +95,13 @@ instance decodeResponse :: DecodeJson Response where
pure $ Response { cid, created, favorite, ngramCount, hyperdata }
-data NTree a = NLeaf a | NNode String (Array (NTree a))
+type Name = String
+type Open = Boolean
+type URL = String
-type FTree = NTree (Tuple String String)
+data NTree a = NLeaf a | NNode Open Name (Array (NTree a))
+
+type FTree = NTree (Tuple Name URL)
@@ -151,18 +155,20 @@ spec = simpleSpec performAction render
]
]
+
+
exampleTree :: NTree (Tuple String String)
exampleTree =
- NNode "Web Sites"
- [ NNode "Google"
+ NNode true "Web Sites"
+ [ NNode true "Google"
[ NLeaf (Tuple "Search" "http://google.com/")
, NLeaf (Tuple "Maps" "http://maps.google.com/")
]
- , NNode "Social Media"
+ , NNode false "Social Media"
[ NLeaf (Tuple "Google +" "http://plus.google.com/")
, NLeaf (Tuple "Twitter" "http://twitter.com/")
, NLeaf (Tuple "Facebook" "http://facebook.com/")
- , NNode "Others"
+ , NNode true "Others"
[ NLeaf (Tuple "Instagram" "https://www.instagram.com/")
, NLeaf (Tuple "WhatsApp" "https://web.whatsapp.com")
]
@@ -178,16 +184,19 @@ toHtml (NLeaf (Tuple name link)) =
[ text name
]
]
-toHtml (NNode name ary) =
- ul []
+toHtml (NNode open name ary) =
+ ul [ ]
[ li [] $
- [ i [className "fas fa-folder"] []
- , text name
+ [ i [fldr open] []
+ , text $ " " <> name
] <>
- map toHtml ary
+ if open then
+ map toHtml ary
+ else []
]
-
+fldr :: Boolean -> Props
+fldr open = if open then className "fas fa-folder-open" else className "fas fa-folder"
performAction :: PerformAction _ State _ Action
performAction (ChangePageSize ps) _ _ = void (cotransform (\state -> changePageSize ps state ))
--
2.21.0