Commit e947432e1cdeccc80641fc333eed1e6190fb0238
change tabs initialisation to allow more customisation
mixmix committed on 11/6/2018, 9:02:34 PMParent: 9132118089771e8d960b2590aece46b1b7f121a7
Files changed
app/html/app.js | changed |
app/html/tabs.js | changed |
app/html/tabs.mcss | changed |
app/html/app.js | ||
---|---|---|
@@ -16,15 +16,16 @@ | ||
16 | 16 … | |
17 | 17 … | exports.create = function (api) { |
18 | 18 … | return nest('app.html.app', app) |
19 | 19 … | |
20 | - function app () { | |
20 … | + function app (initialTabs) { | |
21 | 21 … | console.log('STARTING app') |
22 | 22 … | |
23 | 23 … | window = api.app.sync.window(window) // eslint-disable-line no-global-assign |
24 | 24 … | |
25 | - const initialTabs = api.settings.sync.get('patchbay.defaultTabs') | |
26 | - const App = h('App', api.app.html.tabs(initialTabs)) | |
25 … | + const App = h('App', api.app.html.tabs({ | |
26 … | + initial: initialTabs || api.settings.sync.get('patchbay.defaultTabs') | |
27 … | + })) | |
27 | 28 … | |
28 | 29 … | api.app.sync.initialise(App) |
29 | 30 … | // runs all the functions in app/sync/initialise |
30 | 31 … |
app/html/tabs.js | |||
---|---|---|---|
@@ -21,9 +21,9 @@ | |||
21 | 21 … | return nest({ | |
22 | 22 … | 'app.html.tabs': tabs | |
23 | 23 … | }) | |
24 | 24 … | ||
25 | - function tabs (initialTabs = []) { | ||
25 … | + function tabs ({ initial = [], prepend, append } = {}) { | ||
26 | 26 … | if (_tabs) return _tabs | |
27 | 27 … | ||
28 | 28 … | const onSelect = (indexes) => { | |
29 | 29 … | const { id } = _tabs.get(indexes[0]).content | |
@@ -46,14 +46,11 @@ | |||
46 | 46 … | } | |
47 | 47 … | ||
48 | 48 … | const search = api.app.html.searchBar() | |
49 | 49 … | const menu = api.app.html.menu() | |
50 … | + if (append === undefined) append = h('div.navExtra', [ search, menu ]) | ||
50 | 51 … | ||
51 | - _tabs = Tabs({ | ||
52 | - onSelect, | ||
53 | - onClose, | ||
54 | - append: h('div.navExtra', [ search, menu ]) | ||
55 | - }) | ||
52 … | + _tabs = Tabs({ onSelect, onClose, prepend, append }) | ||
56 | 53 … | _tabs.currentPage = () => { | |
57 | 54 … | const currentPage = _tabs.get(_tabs.selected[0]) | |
58 | 55 … | return currentPage && currentPage.firstChild | |
59 | 56 … | } | |
@@ -61,10 +58,10 @@ | |||
61 | 58 … | _tabs.previousTab = () => _tabs.currentPage() && _tabs.selectRelative(-1) | |
62 | 59 … | _tabs.closeCurrentTab = () => { _tabs.currentPage() && _tabs.remove(_tabs.selected[0]) } | |
63 | 60 … | ||
64 | 61 … | // # TODO: review - this works but is strange | |
65 | - initialTabs.forEach(p => api.app.sync.goTo(p)) | ||
66 | - if (initialTabs[0]) api.app.sync.goTo(initialTabs[0]) | ||
62 … | + initial.forEach(p => api.app.sync.goTo(p)) | ||
63 … | + if (initial[0]) api.app.sync.goTo(initial[0]) | ||
67 | 64 … | return _tabs | |
68 | 65 … | } | |
69 | 66 … | } | |
70 | 67 … |
app/html/tabs.mcss | ||
---|---|---|
@@ -1,4 +1,7 @@ | ||
1 … | +/* TODO depricate this carefully (see styles/mcss/hypertabs.mcss) */ | |
2 … | +/* NOTE there are some active styles in here still */ | |
3 … | + | |
1 | 4 … | Hypertabs { |
2 | 5 … | position: fixed |
3 | 6 … | top: 0 |
4 | 7 … | right: 0 |
@@ -37,24 +40,15 @@ | ||
37 | 40 … | margin-left: .6rem |
38 | 41 … | border: 1px gainsboro solid |
39 | 42 … | border-bottom: none |
40 | 43 … | |
41 | - :hover { | |
42 | - a.close { | |
43 | - visibility: visible | |
44 | - } | |
45 | - } | |
46 | - | |
47 | 44 … | -selected { |
48 | 45 … | color: #222 |
49 | 46 … | $backgroundPrimary |
50 | 47 … | |
51 | 48 … | a.link { |
52 | 49 … | max-width: calc(100% - 2rem) |
53 | 50 … | } |
54 | - a.close { | |
55 | - visibility: visible | |
56 | - } | |
57 | 51 … | } |
58 | 52 … | |
59 | 53 … | -notify { |
60 | 54 … | background-color: orange; |
@@ -81,28 +75,8 @@ | ||
81 | 75 … | |
82 | 76 … | padding: .5rem 0 .5rem .6rem |
83 | 77 … | } |
84 | 78 … | |
85 | - a.close { | |
86 | - visibility: hidden | |
87 | - font-family: monospace | |
88 | - line-height: 1rem | |
89 | - width: .9rem | |
90 | - height: .9rem | |
91 | - /* border-radius: 1rem */ | |
92 | - | |
93 | - margin-right: .3rem | |
94 | - | |
95 | - display: flex | |
96 | - justify-content: center | |
97 | - | |
98 | - :hover { | |
99 | - background: #aaaaaa | |
100 | - color: #fff | |
101 | - font-weight: 600 | |
102 | - } | |
103 | - } | |
104 | - | |
105 | 79 … | } |
106 | 80 … | |
107 | 81 … | } |
108 | 82 … |
Built with git-ssb-web