git ssb

16+

Dominic / patchbay



Commit 75fbecbdcbff096403ae2a6adeda63498269fd05

Browse Files

working tabs !

mix irving committed on 2/23/2017, 7:07:20 AM
Parent: 8d5019b880c661ee99cd3e86eb9e6adfbc02bca2

Files changed

main/html/app.jschanged
main/html/tabs.mcssadded
package.jsonchanged
router/html/tabs.mcssdeleted
main/html/app.jsView
@@ -1,5 +1,5 @@
1-const { Value, h } = require('mutant')
1+const { h } = require('mutant')
22 const nest = require('depnest')
33 const insertCss = require('insert-css')
44 const Tabs = require('hypertabs')
55
@@ -16,22 +16,19 @@
1616 function app () {
1717 const css = values(api.styles.css()).join('\n')
1818 insertCss(css)
1919
20- var view = Value('loading...')
21- var App = h('App', view)
22-
2320 var tabs = Tabs() // optional onSelect cb
21+ var App = h('App', tabs)
2422 ;['/public', '/private', '/notifications'].forEach(addPage(tabs))
2523 tabs.select(0)
2624
27- view.set(tabs)
28- // catchClick(app, (link, { ctrlKey: change, isExternal }) => {
29- // if (tabs.has(link)) tabs.select(link)
30- // else addPage(tabs, change)(link)
25+ catchClick(App, (link, { ctrlKey: change, isExternal }) => {
26+ if (tabs.has(link)) tabs.select(link)
27+ else addPage(tabs, change)(link)
3128
32- // // TODO add external-links module
33- // })
29+ // TODO add external-links module
30+ })
3431
3532 return App
3633 }
3734
main/html/tabs.mcssView
@@ -1,0 +1,96 @@
1+Hypertabs {
2+ display: flex
3+ flex-direction: column
4+
5+ height: 100% /* needed to stop scroller blowing out */
6+
7+ nav {
8+ display: flex
9+
10+ background: linear-gradient(to bottom, #efefef, #e5e5e5)
11+
12+ section.tabs {
13+ flex-grow: 1
14+ display: flex
15+ min-width: 0
16+
17+ div.tab {
18+ flex-grow: 1
19+
20+ display: flex
21+ align-items: center
22+ justify-content: space-between
23+
24+ min-width: 3.5rem
25+ font-size: .9rem
26+ background-color: #efefef
27+ overflow-x: hidden
28+
29+ padding: 0 .4rem
30+ margin-left: .6rem
31+ border: 1px gainsboro solid
32+ border-bottom: none
33+
34+ -selected {
35+ color: #222
36+ background-color: #fff
37+
38+ a.close {
39+ visibility: visible
40+ }
41+ }
42+
43+ -notify {
44+ background-color: orange;
45+ }
46+
47+
48+ a {
49+ color: #666
50+
51+ :hover {
52+ color: #0088cc
53+ text-decoration: none
54+ }
55+ }
56+
57+ a.link {
58+ flex-grow: 1
59+ flex-shrink: 0
60+ overflow-x: hidden
61+ min-width: 0
62+ max-width: 90%
63+ white-space: nowrap
64+ text-overflow: ellipsis
65+
66+ padding: 0.5rem .2rem
67+ }
68+
69+ a.close {
70+ visibility: hidden
71+ }
72+ }
73+
74+ }
75+
76+ div.extra {
77+ display: flex
78+ align-items: center
79+ }
80+ }
81+
82+ section.content {
83+ display: flex
84+
85+ height: 100% /* needed to stop making nav weird */
86+
87+ div.page {
88+ flex-grow: 1
89+
90+ display: flex /*hack to get give Scroller context it needs */
91+
92+ padding-top: .2rem
93+ }
94+ }
95+}
96+
package.jsonView
@@ -26,9 +26,9 @@
2626 "hypertabs": "^4.1.1",
2727 "insert-css": "^2.0.0",
2828 "libnested": "^1.2.1",
2929 "micro-css": "^1.0.0",
30- "mutant": "^3.14.2",
30+ "mutant": "^3.16.0",
3131 "open-external": "^0.1.1",
3232 "read-directory": "^2.0.0",
3333 "setimmediate": "^1.0.5"
3434 }
router/html/tabs.mcssView
@@ -1,94 +1,0 @@
1-Hypertabs {
2- display: flex
3- flex-direction: column
4-
5- height: 100% /* needed to stop scroller blowing out */
6-
7- nav {
8- display: flex
9-
10- background: linear-gradient(to bottom, #efefef, #e5e5e5)
11-
12- section.tabs {
13- flex-grow: 1
14- display: flex
15- min-width: 0
16-
17- div.tab {
18- flex-grow: 1
19-
20- display: flex
21- align-items: center
22- justify-content: space-between
23-
24- min-width: 3.5rem
25- font-size: .9rem
26- background-color: #efefef
27- overflow-x: hidden
28-
29- padding: 0 .4rem
30- margin-left: .6rem
31- border: 1px gainsboro solid
32- border-bottom: none
33-
34- -selected {
35- color: #222
36- background-color: #fff
37-
38- a.close {
39- visibility: visible
40- }
41- }
42-
43- -notify {
44- background-color: orange;
45- }
46-
47-
48- a {
49- color: #666
50-
51- :hover {
52- color: #0088cc
53- text-decoration: none
54- }
55- }
56-
57- a.link {
58- flex-grow: 1
59- flex-shrink: 0
60- overflow-x: hidden
61- min-width: 0
62- max-width: 90%
63- white-space: nowrap
64- text-overflow: ellipsis
65- }
66-
67- a.close {
68- visibility: hidden
69- }
70- }
71-
72- }
73-
74- div.extra {
75- display: flex
76- align-items: center
77- }
78- }
79-
80- section.content {
81- display: flex
82-
83- height: 100% /* needed to stop making nav weird */
84-
85- div.page {
86- flex-grow: 1
87-
88- display: flex /*hack to get give Scroller context it needs */
89-
90- padding-top: .2rem
91- }
92- }
93-}
94-

Built with git-ssb-web