From 0e6bb979b54bc544f4edb4e1bc054f3dce1ad626 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Wed, 24 Aug 2022 15:29:50 -0300 Subject: [PATCH 01/14] implements --- examples/css/page.css | 138 +++++++++++++- examples/pure.html | 428 ++++++++++++++++++++++++++++++++---------- 2 files changed, 466 insertions(+), 100 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 5271b71..7dac1e3 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -1,10 +1,138 @@ html { - overflow: hidden; - width: 100%; - height: 100%; + overflow-y: auto; + overflow-x: hidden; + width: 100%; + min-height: 100%; + max-height: 150vh; + padding-bottom: 5vh; } body { - background-color: #262626; - background-image: url(../../media/background.jpg); + background-color: #262626; + background-image: url(../../media/background.jpg); +} + +f-node { + display: flex; + flex-direction: column; + align-items: center; + justify-items: center; + margin-top: 1vh; + margin-bottom: 10vh; +} + +f-group { + position: relative; + width: calc(100% - 14px); + background: rgba(45, 45, 48, 0.95); + pointer-events: auto; + border-bottom: 2px solid #232323; + display: flex; + flex-direction: column-reverse; + padding-left: 7px; + padding-right: 7px; + padding-top: 2px; + padding-bottom: 2px; +} + +f-group input[type="checkbox"] { + position: absolute; + left: 0; + top: 0; + width: calc(100% + 14px); + margin: 0 0 0 -15px; + height: 24px; + background: none; + box-shadow: none; + cursor: default; + z-index: 3; + opacity: 0; +} + +input[type="checkbox" i] { + background-color: initial; + cursor: default; + appearance: auto; + box-sizing: border-box; + margin: 3px 3px 3px 4px; + padding: initial; + border: initial; +} + +input { + writing-mode: horizontal-tb !important; + text-rendering: auto; + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: start; + appearance: auto; + -webkit-rtl-ordering: logical; + cursor: text; + margin: 0em; + padding: 1px 2px; + border-width: 2px; + border-style: inset; + border-color: -internal-light-dark( + rgb(118, 118, 118), + rgb(133, 133, 133) + ); + border-image: initial; +} + +f-group input[type="checkbox"]:checked ~ f-elements { + max-height: 100vh; + width: 100%; + transition: all 500ms ease-in-out; + padding: 0; + margin: 0; +} + +f-group f-elements { + position: relative; + padding: 0; + max-height: 0; + overflow: hidden; + transition: all 500ms ease-in-out; +} + +f-group f-info { + position: relative; + display: block; + white-space: nowrap; + min-height: 24px; + padding-left: 4px; + line-height: 20px; + font-family: "Open Sans", sans-serif; + font-size: 13px; + text-transform: capitalize; + color: #eeeeee; +} + +f-group input[type="checkbox"] ~ f-info::after { + position: absolute; + content: url(../../media/arrowDown.png); + top: -248px; + right: -246px; + transform: scale(0.02); +} +f-group input[type="checkbox"]:checked ~ f-info::after { + transform: rotate(180deg) scale(0.02); + color: #eeeeee; +} + +#groupBox:hover { + cursor: pointer; +} + +f-group f-element:nth-child(4) { + border-bottom: none; +} + +f-group f-element:nth-child(7) { + border-bottom: none; } diff --git a/examples/pure.html b/examples/pure.html index dff9041..c025eb5 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -1,97 +1,335 @@ - - - - flow - javascript ui - - - - - - - - - - Made With Love ❤ - - - - - - - - Node - - - - - - Color - - - - - - Vector - - - - - - - - Number - - - - - - Range - - - - - - - C. Range - - - - - - Options - - - - - - Boolean - - - - - - Button - - - - - - - - - Text - - - - - - - - - - \ No newline at end of file + + + + flow - javascript ui + + + + + + + + + + Made With Love ❤ + + + + + + + + Node + + + + + + Color + + + + + + Vector + + + + + + + + Number + + + + + + Range + + + + + + + + + + Color + + + + + + Vector + + + + + + + + Number + + + + + + Range + + + + + + + + Group + + + + + + + Options + + + + + + Boolean + + + + + + Button + + + + + + Color + + + + + + Vector + + + + + + + + Number + + + + + + Range + + + + + + + + Group - Bigger + + + + C. Range + + + + + + Options + + + + + + Boolean + + + + + + Button + + + + + + + + + Text + + + + + + + + + + From 6a08fc230d5c5899dffac8a10b8a5229355bdf77 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Wed, 24 Aug 2022 15:39:32 -0300 Subject: [PATCH 02/14] file arrow --- media/arrowDown.png | Bin 0 -> 2234 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 media/arrowDown.png diff --git a/media/arrowDown.png b/media/arrowDown.png new file mode 100644 index 0000000000000000000000000000000000000000..0273e752732b650ceedecef5bdcf95f479b8d4c9 GIT binary patch literal 2234 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+Cx8@lv6E*A2M5RPhyD+MT+RZI z$YKTtiTfbT=(*DIJy1}x#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#WDFy~c zsQ{l4*Z=?j1J#cL%n*1!Ep;YPG`1wjFPMRmiJ66!jfQCUS@*TB%k z+TPL0H6Sn{F)1Z8D>uKOu&B7Cw5+_MsilA7oOz3uE?c#E>-Jsy_8&NS=;YaR=Pz8m zbott?+xH(ndi>_?yZ7IJ{QCV*Wscn|1_rj3o-U3d6}R4AZ7&K7m2i8wxM7h>7prSv z;Ks!K8;sUwEY>P-e(&dHe&NA6>C~U}YoB8d*qz*dZ)W{0Ot%vjS@2}t)8q53{yezL zxADijx(^?h%SG?YR-YeZ_w8nD;mudm*V{Zf)cxkc>G(Bqo}~{rC!eO&%JNgmE324oVNUZ@!O-t z_g|I<)mEJUCb#$h=Z*6=^Y8w?sPe~~T`Tv+-MV)E|ICg1?#q>aJo@QH{&tVAkC}I0 zxX+Y!xjvWiG?ew4`^Wu%Vg|GSMaLe<{S|#6=U09%U+xWY#Q*=|8=ityWpi6>;0BwYzqcXxE6CLSSDCim1UvdK zYtC-4p%UqQZ=Ar+nJvCS8KOMq03Sqo9pmr)vWJJ4?$p)+@jI3yaR% zub(Gzn5pXTaf`yQR~IKoIBfhc;jX`b*ZVsg8q)q3=H0)w`S@`V)39&--s-vthpqoD z?0wsTLRtR}`TXDWaliN`|K4wTJ8Q}B{>zvB4>Rrhd))u>doca}^3g=byZ;_P`to{1 zL*D<7ufLoH(`UcD1k*3S0Br$^-`TPy3#e|j_vMl-unk+kO;p#51lqM!U9bMx<3z@@ z{~kZqzHj-Xoz>*`|H2QiruVG@IrY@U`u$)3Y-ou4|M5?KeD!UhNAB-86zZvE9=aPL0TuKoYT7VKvQ#>1~@hrRn*ul%MNb!N@~XzTys(GI|9p`kShqYucw z|Nm^!-}7P@-sLlX{U;Xi9+irZZ}|6?^~L=->QQ$Z|K4;r}=KP!IUN z)W?238cRKYypRWm%|}SGX!r+DAwcE^<+#hbdl~-T=Dx6>PE^I!yO-%_o5j1Lmt-Ug z`Hz=gRs9T)E121p{%_aL|MC92y^k+kpZDhfRmE`6%5TrJKmY%;ru)hp%c4iqSAVUy vEKKRIR=NB8#AJWFqV?8 Date: Thu, 25 Aug 2022 13:26:53 -0300 Subject: [PATCH 03/14] tasks debugs, ident, no animation, center words, no new divs, same size for groups --- examples/css/page.css | 129 +---------------------- examples/pure.html | 230 +++++++----------------------------------- 2 files changed, 40 insertions(+), 319 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 7dac1e3..cc94234 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -1,10 +1,10 @@ html { overflow-y: auto; overflow-x: hidden; - width: 100%; - min-height: 100%; + width: 100vw; + min-height: 100vh; max-height: 150vh; - padding-bottom: 5vh; + padding: 1vw; } body { @@ -12,127 +12,4 @@ body { background-image: url(../../media/background.jpg); } -f-node { - display: flex; - flex-direction: column; - align-items: center; - justify-items: center; - margin-top: 1vh; - margin-bottom: 10vh; -} - -f-group { - position: relative; - width: calc(100% - 14px); - background: rgba(45, 45, 48, 0.95); - pointer-events: auto; - border-bottom: 2px solid #232323; - display: flex; - flex-direction: column-reverse; - padding-left: 7px; - padding-right: 7px; - padding-top: 2px; - padding-bottom: 2px; -} - -f-group input[type="checkbox"] { - position: absolute; - left: 0; - top: 0; - width: calc(100% + 14px); - margin: 0 0 0 -15px; - height: 24px; - background: none; - box-shadow: none; - cursor: default; - z-index: 3; - opacity: 0; -} - -input[type="checkbox" i] { - background-color: initial; - cursor: default; - appearance: auto; - box-sizing: border-box; - margin: 3px 3px 3px 4px; - padding: initial; - border: initial; -} - -input { - writing-mode: horizontal-tb !important; - text-rendering: auto; - letter-spacing: normal; - word-spacing: normal; - line-height: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - display: inline-block; - text-align: start; - appearance: auto; - -webkit-rtl-ordering: logical; - cursor: text; - margin: 0em; - padding: 1px 2px; - border-width: 2px; - border-style: inset; - border-color: -internal-light-dark( - rgb(118, 118, 118), - rgb(133, 133, 133) - ); - border-image: initial; -} -f-group input[type="checkbox"]:checked ~ f-elements { - max-height: 100vh; - width: 100%; - transition: all 500ms ease-in-out; - padding: 0; - margin: 0; -} - -f-group f-elements { - position: relative; - padding: 0; - max-height: 0; - overflow: hidden; - transition: all 500ms ease-in-out; -} - -f-group f-info { - position: relative; - display: block; - white-space: nowrap; - min-height: 24px; - padding-left: 4px; - line-height: 20px; - font-family: "Open Sans", sans-serif; - font-size: 13px; - text-transform: capitalize; - color: #eeeeee; -} - -f-group input[type="checkbox"] ~ f-info::after { - position: absolute; - content: url(../../media/arrowDown.png); - top: -248px; - right: -246px; - transform: scale(0.02); -} -f-group input[type="checkbox"]:checked ~ f-info::after { - transform: rotate(180deg) scale(0.02); - color: #eeeeee; -} - -#groupBox:hover { - cursor: pointer; -} - -f-group f-element:nth-child(4) { - border-bottom: none; -} - -f-group f-element:nth-child(7) { - border-bottom: none; -} diff --git a/examples/pure.html b/examples/pure.html index c025eb5..b661f40 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -2,27 +2,13 @@ - + flow - javascript ui - + - - + + @@ -37,158 +23,69 @@ Node - + Color - + Vector - - - + + + Number - + Range - - + + - - - + + Group 1 + Color - + - Vector + Vector - - - + + + Number - + Range - - + + - - - Group - - - - - + + Group 2 + Options @@ -211,90 +108,37 @@ - Color + Color - - Vector + Vector - - - + + + Number - + Range - - + + - - - Group - Bigger - - C. Range - + @@ -315,7 +159,7 @@ Button - + From 4023f73738d5988871ad0d6c04b9ecf631e8a55f Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Thu, 25 Aug 2022 14:49:35 -0300 Subject: [PATCH 04/14] starting treeview try one --- examples/css/page.css | 69 +++++++++++++++++++++++++++++++++++++++++-- examples/pure.html | 9 ++++++ 2 files changed, 75 insertions(+), 3 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index cc94234..7c594fa 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -2,9 +2,8 @@ html { overflow-y: auto; overflow-x: hidden; width: 100vw; - min-height: 100vh; - max-height: 150vh; - padding: 1vw; + height: 100vh; + padding: 100px; } body { @@ -12,4 +11,68 @@ body { background-image: url(../../media/background.jpg); } +f-node{ + margin-top: 100px; +} + +f-treeview { + width: 100%; + padding-top: 1px; + padding-bottom: 3px; + padding-left: 16px; + margin-top: 2px; + margin-left: 2px; + height: calc( 100% - 8px ); + max-height: 300px; + border-radius: 2px; + resize: none; + box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%); + background-color: #232324d1; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; + position: relative; +} + +f-treeview f-files { + position: relative; + display: block; +} +f-treeview * { + box-sizing: border-box; +} + +f-treeview f-file { + position: relative; + display: block; + white-space: nowrap; + min-height: 32px; +} + +f-treeview input[type='checkbox'] { + position: absolute; + left: 0; + top: 0; + width: calc(100% + 14px); + margin: 0 0 0 -15px; + height: 32px; + background: none; + box-shadow: none; + cursor: default; + z-index: 3; + border: solid 1px rgba(43,153,255,0); + border-radius: 4px; + transition: all 0.5s ease; +} + +f-element input[type='checkbox'] { + appearance: none; + cursor: pointer; +} +f-element input:read-only { + color: #666; +} + + + diff --git a/examples/pure.html b/examples/pure.html index b661f40..df27c8e 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -171,6 +171,15 @@ + + + + + + + + + From a01b9be59015dbd339d274b9d930a7d3dd98abeb Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Thu, 25 Aug 2022 16:46:54 -0300 Subject: [PATCH 05/14] returning arrow and checkbox for group --- examples/css/page.css | 126 +++++++++++++++++++++++++++++++++++++++++- examples/pure.html | 22 ++++++-- 2 files changed, 140 insertions(+), 8 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 7c594fa..68ef947 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -1,8 +1,8 @@ html { overflow-y: auto; overflow-x: hidden; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; padding: 100px; } @@ -15,6 +15,128 @@ f-node{ margin-top: 100px; } +f-group { + position: relative; + width: 100%; + background: rgba(45, 45, 48, 0.95); + pointer-events: auto; + border-bottom: 2px solid #232323; + display: flex; + flex-direction: column-reverse; +} + +f-group input[type="checkbox"] { + position: absolute; + left: 0; + top: 0; + width: calc(100% + 14px); + margin: 0 0 0 -15px; + height: 24px; + background: none; + box-shadow: none; + cursor: default; + z-index: 3; + opacity: 0; +} + +input[type="checkbox" i] { + background-color: initial; + cursor: default; + appearance: auto; + box-sizing: border-box; + margin: 3px 3px 3px 4px; + padding: initial; + border: initial; +} + +input { + writing-mode: horizontal-tb !important; + text-rendering: auto; + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: start; + appearance: auto; + -webkit-rtl-ordering: logical; + cursor: text; + margin: 0em; + padding: 1px 2px; + border-width: 2px; + border-style: inset; + border-color: -internal-light-dark( + rgb(118, 118, 118), + rgb(133, 133, 133) + ); + border-image: initial; +} + +f-group input[type="checkbox"]:checked ~ f-elements { + max-height: 100vh; + width: 100%; + transition: all 500ms ease; + padding: 0; + margin: 0; +} + +f-group f-elements { + position: relative; + padding: 0; + max-height: 0; + overflow: hidden; + transition: all 100ms ease; +} + +f-group f-info { + position: relative; + /* display: block; */ + white-space: nowrap; + display: flex; + padding-left: 10px; + padding-right: 7px; + padding-top: 2px; + padding-bottom: 2px; + line-height: 24px; + font-family: "Open Sans", sans-serif; + font-size: 13px; + text-transform: capitalize; + color: #eeeeee; + +} + +f-group input[type="checkbox"]:checked ~ f-info { + border-bottom: 2px solid #232323; +} + +f-group input[type="checkbox"] ~ f-info::after { + position: absolute; + content: url(../../media/arrowDown.png); + top: -248px; + right: -246px; + transform: scale(0.02); +} +f-group input[type="checkbox"]:checked ~ f-info::after { + transform: rotate(180deg) scale(0.02); + color: #eeeeee; +} + +#groupBox:hover { + cursor: pointer; +} + +f-group f-element:nth-child(4) { + border-bottom: none; +} + +f-group f-element:nth-child(7) { + border-bottom: none; +} + + + f-treeview { width: 100%; padding-top: 1px; diff --git a/examples/pure.html b/examples/pure.html index df27c8e..ae688e2 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -53,9 +53,9 @@ - - Group 1 - + + + Color @@ -83,9 +83,14 @@ - - Group 2 - + + + Group 1 + + + + + Options @@ -135,6 +140,11 @@ + + + Group 2 + + C. Range From 931fa57be1030a2aba8c14365df277b27939de82 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Thu, 25 Aug 2022 17:00:00 -0300 Subject: [PATCH 06/14] settings for groups --- examples/css/page.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 68ef947..29f9ae6 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -95,7 +95,7 @@ f-group f-info { /* display: block; */ white-space: nowrap; display: flex; - padding-left: 10px; + padding-left: 11px; padding-right: 7px; padding-top: 2px; padding-bottom: 2px; @@ -114,8 +114,8 @@ f-group input[type="checkbox"]:checked ~ f-info { f-group input[type="checkbox"] ~ f-info::after { position: absolute; content: url(../../media/arrowDown.png); - top: -248px; - right: -246px; + top: -246px; + right: -238px; transform: scale(0.02); } f-group input[type="checkbox"]:checked ~ f-info::after { @@ -135,8 +135,6 @@ f-group f-element:nth-child(7) { border-bottom: none; } - - f-treeview { width: 100%; padding-top: 1px; From 8e05bb740e5b6d2b4e746dd17e7c4d5dc924d43a Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Fri, 26 Aug 2022 17:13:50 -0300 Subject: [PATCH 07/14] groups done, missing refinement --- examples/css/page.css | 36 ++++++++++++++---------------------- examples/pure.html | 4 ++-- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 29f9ae6..3e52467 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -25,7 +25,7 @@ f-group { flex-direction: column-reverse; } -f-group input[type="checkbox"] { +input[type="checkbox"] { position: absolute; left: 0; top: 0; @@ -35,18 +35,15 @@ f-group input[type="checkbox"] { background: none; box-shadow: none; cursor: default; - z-index: 3; + z-index: +1; +} + +#groupBox { opacity: 0; } -input[type="checkbox" i] { - background-color: initial; - cursor: default; - appearance: auto; - box-sizing: border-box; - margin: 3px 3px 3px 4px; - padding: initial; - border: initial; +#groupBox:hover { + cursor: pointer; } input { @@ -92,9 +89,12 @@ f-group f-elements { f-group f-info { position: relative; - /* display: block; */ + display: block; white-space: nowrap; display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; padding-left: 11px; padding-right: 7px; padding-top: 2px; @@ -104,7 +104,6 @@ f-group f-info { font-size: 13px; text-transform: capitalize; color: #eeeeee; - } f-group input[type="checkbox"]:checked ~ f-info { @@ -115,23 +114,16 @@ f-group input[type="checkbox"] ~ f-info::after { position: absolute; content: url(../../media/arrowDown.png); top: -246px; - right: -238px; + right: -239px; transform: scale(0.02); } + f-group input[type="checkbox"]:checked ~ f-info::after { transform: rotate(180deg) scale(0.02); color: #eeeeee; } -#groupBox:hover { - cursor: pointer; -} - -f-group f-element:nth-child(4) { - border-bottom: none; -} - -f-group f-element:nth-child(7) { +f-group f-element:nth-last-child(1) { border-bottom: none; } diff --git a/examples/pure.html b/examples/pure.html index ae688e2..640f4fd 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -90,7 +90,7 @@ - + Options @@ -101,10 +101,10 @@ - Boolean + Boolean Button From 70e7ccdfebf3dec89aba78a77f3bfbc1a80b1a81 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Mon, 29 Aug 2022 13:08:25 -0300 Subject: [PATCH 08/14] doing icons and treeview --- examples/css/page.css | 49 ++++++++++++++++ examples/pure.html | 127 +++++++++++++++++++++++++++++++++++++++++- media/right.png | Bin 0 -> 15366 bytes 3 files changed, 174 insertions(+), 2 deletions(-) create mode 100644 media/right.png diff --git a/examples/css/page.css b/examples/css/page.css index 3e52467..1ee251f 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -152,6 +152,7 @@ f-treeview f-files { } f-treeview * { box-sizing: border-box; + } f-treeview f-file { @@ -159,6 +160,7 @@ f-treeview f-file { display: block; white-space: nowrap; min-height: 32px; + } f-treeview input[type='checkbox'] { @@ -177,6 +179,10 @@ f-treeview input[type='checkbox'] { transition: all 0.5s ease; } +f-treeview input[type='checkbox']:hover { +border: 1px solid #1e90ff; +} + f-element input[type='checkbox'] { appearance: none; cursor: pointer; @@ -185,6 +191,49 @@ f-element input:read-only { color: #666; } +f-treeview input[type='checkbox']:checked ~ f-files { + display: block; +} + +f-treeview f-file f-info { + position: absolute; + top: 15px; + left: 16px; + line-height: 30px; +} + +f-treeview f-file f-files:before { + content: ''; + width: 1px; + height: calc(100% - 35px); + background: rgba(255,255,255,0.1); + position: absolute; + top: 25px; + left: 27px; +} + +f-treeview f-file f-files { + display: none; + position: relative; + padding-top: 32px; + padding-left: 25px; +} + +f-treeview f-file f-files:not(:empty) + f-info f-icon { + width: 14px; + height: 14px; + border: solid 1px rgba(255,255,255,0.1); + box-shadow: 0 0 0 2px #242426; + border-radius: 4px; + position: absolute; + left: -20px; + top: -8px; + background: #242426; + z-index: 2; +} + + + diff --git a/examples/pure.html b/examples/pure.html index 640f4fd..961987f 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -181,15 +181,138 @@ + + + + + + + + + + 1.1 File + + + + + + + + + 1.2 File + + + + + + + + + 1.3 Folder + + + + + + + + + 1.4 File + + + + + + + + 1 Folder + + + + + + + + + 2 File + + + + + + + + + 3 File + + + + + + + + + 4 File + + + + + + + + + + + + + 5.1 File + + + + + + + + + 5.2 File + + + + + + + + + 5.3 Folder + + + + + + + + + 5.4 File + + + + + + + + 5 File + - - + + + + diff --git a/media/right.png b/media/right.png new file mode 100644 index 0000000000000000000000000000000000000000..6d2c65fa14ec08ef88d5e74588d5e1a8da1fb06a GIT binary patch literal 15366 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 HyFC6sE_Qgf literal 0 HcmV?d00001 From 614e401226552ae1468bf1106023b28750c45f76 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Mon, 29 Aug 2022 14:32:12 -0300 Subject: [PATCH 09/14] center group label and arrow --- examples/css/page.css | 42 ++++++++++++++++++++++-------------------- examples/pure.html | 2 +- media/right-arrow.png | Bin 0 -> 515 bytes media/right.png | Bin 15366 -> 0 bytes 4 files changed, 23 insertions(+), 21 deletions(-) create mode 100644 media/right-arrow.png delete mode 100644 media/right.png diff --git a/examples/css/page.css b/examples/css/page.css index 1ee251f..b47c05c 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -17,12 +17,17 @@ f-node{ f-group { position: relative; - width: 100%; + width:100%; background: rgba(45, 45, 48, 0.95); pointer-events: auto; border-bottom: 2px solid #232323; display: flex; flex-direction: column-reverse; + justify-content: center; + padding-left: 0; + padding-right: 0; + padding-top: 2px; + padding-bottom: 2px; } input[type="checkbox"] { @@ -88,22 +93,17 @@ f-group f-elements { } f-group f-info { - position: relative; - display: block; - white-space: nowrap; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding-left: 11px; - padding-right: 7px; - padding-top: 2px; - padding-bottom: 2px; - line-height: 24px; - font-family: "Open Sans", sans-serif; - font-size: 13px; - text-transform: capitalize; - color: #eeeeee; + position: relative; + display: flex; + align-items: center; + white-space: nowrap; + min-height: 24px; + padding-left: 11px; + line-height: 24px; + font-family: 'Open Sans', sans-serif; + font-size: 13px; + text-transform: capitalize; + color: #eeeeee; } f-group input[type="checkbox"]:checked ~ f-info { @@ -111,11 +111,13 @@ f-group input[type="checkbox"]:checked ~ f-info { } f-group input[type="checkbox"] ~ f-info::after { - position: absolute; content: url(../../media/arrowDown.png); - top: -246px; - right: -239px; transform: scale(0.02); + height: 24px; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: -11px; } f-group input[type="checkbox"]:checked ~ f-info::after { diff --git a/examples/pure.html b/examples/pure.html index 961987f..57400d5 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -54,7 +54,7 @@ - + Color diff --git a/media/right-arrow.png b/media/right-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..459087cb43d68ec8b4865a042fff1d76ebeadacf GIT binary patch literal 515 zcmeAS@N?(olHy`uVBq!ia0vp^0w65F0wkYiy01xx_0PQNE&>>G3#}JFt$q5cjr-glersY+C zNSK+Q{`~*{o*o_-2DOxP_G_1@w0-~d>A&)+Q`2ha8Z<^YKS;PKUifk8_VsbGyT1JY zztsEx|M*kJ$;VbGh8Uz&E}C*BsCTyc!#0!YQxr}c3mQGR9_i-RmeaEK|Jncl)o(R~ zu2xZrnD_SHS%oF5P8|S(irPah65H>^Et<10Yii4ppo!Vn6a3=CF5maxvcG*r8XFs1 zTdLOO<&)RWY;0^y>|DC?<)vJHIi1*B7aiBgF`UZXyRXOo)E}U4R7+eVN>UO_QmvAU zQh^kMk%5tsu7QQFk!6UXnU$fDm4UIgfq|8Q!RuglRTK@m`6-!cmAEy`;@dwHs6hj6 gLrG?CYH>+oZUJsRXQk)40rfC=y85}Sb4q9e06ZbKp8x;= literal 0 HcmV?d00001 diff --git a/media/right.png b/media/right.png deleted file mode 100644 index 6d2c65fa14ec08ef88d5e74588d5e1a8da1fb06a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15366 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 HyFC6sE_Qgf From 9e27f39061c34ba6b25c38ba57a174c3736a90b8 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Mon, 29 Aug 2022 16:56:55 -0300 Subject: [PATCH 10/14] treeview continuation --- examples/css/page.css | 31 +++++++++++++++ examples/pure.html | 93 ++++++++++++++++++++++--------------------- 2 files changed, 79 insertions(+), 45 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index b47c05c..46e5dd3 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -221,6 +221,25 @@ f-treeview f-file f-files { padding-left: 25px; } +f-treeview f-file f-files:before { + content: ''; + width: 1px; + height: calc(100% - 40px); + background: rgba(255,255,255,0.1); + position: absolute; + top: 25px; + left: 27px; +} +f-treeview f-file f-files f-file:after { + content: ''; + width: 14px; + height: 1px; + background: rgba(255,255,255,0.1); + position: absolute; + top: 16px; + left: 3px; +} + f-treeview f-file f-files:not(:empty) + f-info f-icon { width: 14px; height: 14px; @@ -234,6 +253,18 @@ f-treeview f-file f-files:not(:empty) + f-info f-icon { z-index: 2; } +f-treeview f-file f-info f-icon p{ + position: absolute; + top: 0; + left: 0; + margin-top: -9px; + padding-left: 2px; + color: rgba(255,255,255,0.1); +} + + + + diff --git a/examples/pure.html b/examples/pure.html index 57400d5..9649de0 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -181,138 +181,141 @@ - - - - 1.1 File + 🗀 1.1 File - - 1.2 File + 🗀 1.2 File - - + + + + + + + 🗀 1.3.1 File + + + + + + + + 🗀 1.3.2 File + + + + + + + 🗀 1.3.3 File + + + + + + + 🗀 1.3.4 File + + + - - 1.3 Folder +

❯

 + 🗁 1.3 Folder - - - 1.4 File + 🗀 1.4 File - - - - 1 Folder +

❯

 + 🗁 1 Folder - - - 2 File + 🗀 2 File - - - 3 File + 🗀 3 File - - - 4 File + 🗀 4 File - - - - 5.1 File + 🗀 5.1 File - - - 5.2 File + 🗀 5.2 File - - - 5.3 Folder + 🗀 5.3 File - - - 5.4 File + 🗀 5.4 File - - - - 5 File +

❯

 + 🗁 5 Folder - - From da121162f045a2bc3928c162941050bcb63667d4 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Tue, 30 Aug 2022 13:05:58 -0300 Subject: [PATCH 11/14] png to svg --- examples/css/page.css | 8 ++++---- media/arrowDown.png | Bin 2234 -> 0 bytes media/arrowDown.svg | 16 ++++++++++++++++ media/right-arrow.png | Bin 515 -> 0 bytes 4 files changed, 20 insertions(+), 4 deletions(-) delete mode 100644 media/arrowDown.png create mode 100644 media/arrowDown.svg delete mode 100644 media/right-arrow.png diff --git a/examples/css/page.css b/examples/css/page.css index 46e5dd3..932d8d6 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -111,17 +111,17 @@ f-group input[type="checkbox"]:checked ~ f-info { } f-group input[type="checkbox"] ~ f-info::after { - content: url(../../media/arrowDown.png); - transform: scale(0.02); + content: url(../../media/arrowDown.svg); + transform: scale(0.015); height: 24px; display: flex; flex-direction: column; justify-content: center; - margin-left: -11px; + margin-left: -96.5px; } f-group input[type="checkbox"]:checked ~ f-info::after { - transform: rotate(180deg) scale(0.02); + transform: rotate(180deg) scale(0.015); color: #eeeeee; } diff --git a/media/arrowDown.png b/media/arrowDown.png deleted file mode 100644 index 0273e752732b650ceedecef5bdcf95f479b8d4c9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2234 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+Cx8@lv6E*A2M5RPhyD+MT+RZI z$YKTtiTfbT=(*DIJy1}x#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#WDFy~c zsQ{l4*Z=?j1J#cL%n*1!Ep;YPG`1wjFPMRmiJ66!jfQCUS@*TB%k z+TPL0H6Sn{F)1Z8D>uKOu&B7Cw5+_MsilA7oOz3uE?c#E>-Jsy_8&NS=;YaR=Pz8m zbott?+xH(ndi>_?yZ7IJ{QCV*Wscn|1_rj3o-U3d6}R4AZ7&K7m2i8wxM7h>7prSv z;Ks!K8;sUwEY>P-e(&dHe&NA6>C~U}YoB8d*qz*dZ)W{0Ot%vjS@2}t)8q53{yezL zxADijx(^?h%SG?YR-YeZ_w8nD;mudm*V{Zf)cxkc>G(Bqo}~{rC!eO&%JNgmE324oVNUZ@!O-t z_g|I<)mEJUCb#$h=Z*6=^Y8w?sPe~~T`Tv+-MV)E|ICg1?#q>aJo@QH{&tVAkC}I0 zxX+Y!xjvWiG?ew4`^Wu%Vg|GSMaLe<{S|#6=U09%U+xWY#Q*=|8=ityWpi6>;0BwYzqcXxE6CLSSDCim1UvdK zYtC-4p%UqQZ=Ar+nJvCS8KOMq03Sqo9pmr)vWJJ4?$p)+@jI3yaR% zub(Gzn5pXTaf`yQR~IKoIBfhc;jX`b*ZVsg8q)q3=H0)w`S@`V)39&--s-vthpqoD z?0wsTLRtR}`TXDWaliN`|K4wTJ8Q}B{>zvB4>Rrhd))u>doca}^3g=byZ;_P`to{1 zL*D<7ufLoH(`UcD1k*3S0Br$^-`TPy3#e|j_vMl-unk+kO;p#51lqM!U9bMx<3z@@ z{~kZqzHj-Xoz>*`|H2QiruVG@IrY@U`u$)3Y-ou4|M5?KeD!UhNAB-86zZvE9=aPL0TuKoYT7VKvQ#>1~@hrRn*ul%MNb!N@~XzTys(GI|9p`kShqYucw z|Nm^!-}7P@-sLlX{U;Xi9+irZZ}|6?^~L=->QQ$Z|K4;r}=KP!IUN z)W?238cRKYypRWm%|}SGX!r+DAwcE^<+#hbdl~-T=Dx6>PE^I!yO-%_o5j1Lmt-Ug z`Hz=gRs9T)E121p{%_aL|MC92y^k+kpZDhfRmE`6%5TrJKmY%;ru)hp%c4iqSAVUy vEKKRIR=NB8#AJWFqV?8 + + + + + + + diff --git a/media/right-arrow.png b/media/right-arrow.png deleted file mode 100644 index 459087cb43d68ec8b4865a042fff1d76ebeadacf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 515 zcmeAS@N?(olHy`uVBq!ia0vp^0w65F0wkYiy01xx_0PQNE&>>G3#}JFt$q5cjr-glersY+C zNSK+Q{`~*{o*o_-2DOxP_G_1@w0-~d>A&)+Q`2ha8Z<^YKS;PKUifk8_VsbGyT1JY zztsEx|M*kJ$;VbGh8Uz&E}C*BsCTyc!#0!YQxr}c3mQGR9_i-RmeaEK|Jncl)o(R~ zu2xZrnD_SHS%oF5P8|S(irPah65H>^Et<10Yii4ppo!Vn6a3=CF5maxvcG*r8XFs1 zTdLOO<&)RWY;0^y>|DC?<)vJHIi1*B7aiBgF`UZXyRXOo)E}U4R7+eVN>UO_QmvAU zQh^kMk%5tsu7QQFk!6UXnU$fDm4UIgfq|8Q!RuglRTK@m`6-!cmAEy`;@dwHs6hj6 gLrG?CYH>+oZUJsRXQk)40rfC=y85}Sb4q9e06ZbKp8x;= From 067aa8075b5cde304b427d43bd03d66087193b82 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Tue, 30 Aug 2022 13:42:54 -0300 Subject: [PATCH 12/14] to start gallery --- examples/css/page.css | 8 -------- examples/pure.html | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 932d8d6..9fd2c6f 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -185,14 +185,6 @@ f-treeview input[type='checkbox']:hover { border: 1px solid #1e90ff; } -f-element input[type='checkbox'] { - appearance: none; - cursor: pointer; -} -f-element input:read-only { - color: #666; -} - f-treeview input[type='checkbox']:checked ~ f-files { display: block; } diff --git a/examples/pure.html b/examples/pure.html index 9649de0..690dbd5 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -185,7 +185,7 @@ - + From 99efd97c6614bea110771889960efd1592ca8666 Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Tue, 30 Aug 2022 16:18:54 -0300 Subject: [PATCH 13/14] image gallery to check --- examples/css/page.css | 32 +++++++++++++++++++++++++++++--- examples/pure.html | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 3 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index 9fd2c6f..ed8a6b7 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -2,8 +2,8 @@ html { overflow-y: auto; overflow-x: hidden; width: 100%; - height: 100%; - padding: 100px; + height: auto; + padding-bottom: 200px; } body { @@ -12,7 +12,7 @@ body { } f-node{ - margin-top: 100px; + margin-top: 250px; } f-group { @@ -254,6 +254,32 @@ f-treeview f-file f-info f-icon p{ color: rgba(255,255,255,0.1); } +.wrap{ + background-color:#232324d1; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); + grid-gap: 0.7rem; + padding: 30px 15px 15px 15px; +} + +.gallery-item{ + width:80px; + height:80px; + border-radius: 10px; + overflow: hidden; +} + +.gallery-image{ + width:100%; + height:100%; + border-radius: 10px; +} + +.gallery-image:hover{ + transform: scale(1.2); + transition: all 200ms ease; +} + diff --git a/examples/pure.html b/examples/pure.html index 690dbd5..668c33f 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -316,6 +316,41 @@ + + Gallery + + +
+ img_1 +
+ + +
+ img_2 +
+ + +
+ img_3 +
+ + +
+ img_4 +
+ + +
+ img_5 +
+ + +
+ img_6 +
+ + + From 19e45253d92bd602f47e5f5350aa84cce090b31f Mon Sep 17 00:00:00 2001 From: Andre Dias Date: Tue, 30 Aug 2022 16:24:22 -0300 Subject: [PATCH 14/14] fixes in gallery --- examples/css/page.css | 7 ++++++- examples/pure.html | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/examples/css/page.css b/examples/css/page.css index ed8a6b7..bb66bd8 100644 --- a/examples/css/page.css +++ b/examples/css/page.css @@ -277,7 +277,12 @@ f-treeview f-file f-info f-icon p{ .gallery-image:hover{ transform: scale(1.2); - transition: all 200ms ease; + transition: all 200ms ease-in-out; + cursor: pointer; +} + +.btnX{ + margin-left:93%; } diff --git a/examples/pure.html b/examples/pure.html index 668c33f..89f2575 100644 --- a/examples/pure.html +++ b/examples/pure.html @@ -15,7 +15,7 @@ Made With Love ❤ - +