Skip to content

Commit 2193cba

Browse files
megothmegoth
authored
Merge pull request SolidOS#185 from solid/tab-style-2
Fix HTML to use nav and body. Fix styles so body fills the space
2 parents 6a33cd1 + c6e796f commit 2193cba

2 files changed

Lines changed: 52 additions & 111 deletions

File tree

‎src/tabs.js‎

Lines changed: 50 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
// - Multiple tab select with Alt key
66
//
77
// written 2016-05-27
8+
// See https://github.com/solid/solid-ui/issues/183 for styles
89

910
var tabs = {}
1011
module.exports = tabs
@@ -32,14 +33,13 @@ UI.tabs.tabWidget = function (options) {
3233
var kb = UI.store
3334
var subject = options.subject
3435
var dom = options.dom
35-
var box = dom.createElement('div')
3636
var orientation = parseInt(options.orientation || '0')
3737
var backgroundColor = options.backgroundColor || '#ddddcc'
3838
var color
3939
var flipped = orientation & 2
4040
var vertical = orientation & 1
41-
var wholetable = box.appendChild(dom.createElement('table'))
42-
var mainTR, mainTD, tabTR
41+
42+
var mainElement, navElement
4343
var tabContainer, tabElement
4444
var onClose = options.onClose
4545

@@ -75,47 +75,32 @@ UI.tabs.tabWidget = function (options) {
7575
selectedColor = colorBlend(backgroundColor, '#000000', 0.3)
7676
color = '#ffffff'
7777
}
78-
var bodyDivStyle =
79-
'resize: both; overflow: scroll; margin:0; border: 0.5em; border-style: solid; border-color: ' +
78+
var bodyMainStyle = `flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
79+
80+
/*
81+
'resize: both; overflow: scroll; margin:0; border: 0.1em; border-style: solid; border-color: ' +
8082
selectedColor +
8183
'; padding: 1em; min-width: 30em; min-height: 450px; width:100%;'
84+
*/
85+
const rootElement = dom.createElement('div') // 20200117a
8286

83-
if (vertical) {
84-
var onlyTR = wholetable.appendChild(dom.createElement('tr'))
85-
mainTD = dom.createElement('td')
86-
mainTD.setAttribute('style', 'margin: 0;') // override tabbedtab.css
87-
var tabTD = dom.createElement('td')
88-
tabTD.setAttribute('style', 'margin: 0;')
89-
if (flipped) {
90-
onlyTR.appendChild(mainTD)
91-
onlyTR.appendChild(tabTD)
92-
} else {
93-
onlyTR.appendChild(tabTD)
94-
onlyTR.appendChild(mainTD)
95-
}
96-
tabContainer = tabTD.appendChild(dom.createElement('table'))
97-
tabElement = 'tr'
98-
// tabBar = tabTD // drop zone
99-
// mainTD.appendChild(bodyDiv)
100-
} else {
101-
// horizontal
102-
tabContainer = dom.createElement('tr')
103-
mainTR = wholetable.appendChild(dom.createElement('tr'))
104-
if (flipped) {
105-
mainTR = wholetable.appendChild(dom.createElement('tr'))
106-
tabTR = wholetable.appendChild(dom.createElement('tr'))
107-
} else {
108-
tabTR = wholetable.appendChild(dom.createElement('tr'))
109-
mainTR = wholetable.appendChild(dom.createElement('tr'))
110-
}
111-
tabContainer = tabTR
112-
mainTD = mainTR.appendChild(dom.createElement('td'))
113-
tabElement = 'td'
114-
// mainTD.appendChild(bodyDiv)
115-
}
116-
var bodyContainer = mainTD.appendChild(dom.createElement('table'))
117-
box.tabContainer = tabContainer
118-
box.bodyContainer = bodyContainer
87+
rootElement.style = 'display: flex; height: 100%; width: 100%; flex-direction: ' +
88+
(vertical ? 'row' : 'column') + (flipped ? '-reverse;' : ';')
89+
90+
navElement = rootElement.appendChild(dom.createElement('nav'))
91+
navElement.setAttribute('style', 'margin: 0;')
92+
93+
mainElement = rootElement.appendChild(dom.createElement('main'))
94+
95+
mainElement.setAttribute('style', 'margin: 0; width:100%; height: 100%;') // override tabbedtab.css
96+
tabContainer = navElement.appendChild(dom.createElement('ul'))
97+
tabContainer.style = 'list-style-type: none;' // No bullet please
98+
99+
tabElement = 'li'
100+
101+
var bodyContainer = mainElement // .appendChild(dom.createElement('table'))
102+
rootElement.tabContainer = tabContainer // ussed by caller
103+
rootElement.bodyContainer = bodyContainer
119104

120105
var getItems = function () {
121106
if (options.items) return options.items
@@ -145,7 +130,7 @@ UI.tabs.tabWidget = function (options) {
145130
';' // @@ rotate border
146131
var selectedStyle =
147132
tabStyle + margins + ' background-color: ' + selectedColor + ';'
148-
var shownStyle = ''
133+
var shownStyle = 'height: 100%; width: 100%;'
149134
var hiddenStyle = shownStyle + 'display: none;'
150135

151136
var resetTabStyle = function () {
@@ -176,22 +161,22 @@ UI.tabs.tabWidget = function (options) {
176161
}
177162
div.setAttribute('style', selectedStyle)
178163
ele.bodyTR.setAttribute('style', shownStyle)
179-
var bodyDiv = ele.bodyTR.firstChild
180-
if (!bodyDiv) {
181-
bodyDiv = ele.bodyTR.appendChild(dom.createElement('div'))
182-
bodyDiv.setAttribute('style', bodyDivStyle)
164+
var bodyMain = ele.bodyTR.firstChild
165+
if (!bodyMain) {
166+
bodyMain = ele.bodyTR.appendChild(dom.createElement('main'))
167+
bodyMain.setAttribute('style', bodyMainStyle)
183168
}
184169
if (options.renderTabSettings && e.altKey) {
185-
if (bodyDiv.asSetttings !== true) {
186-
bodyDiv.innerHTML = 'loading settings ...' + item
187-
options.renderTabSettings(bodyDiv, ele.subject)
188-
bodyDiv.asSetttings = true
170+
if (bodyMain.asSetttings !== true) {
171+
bodyMain.innerHTML = 'loading settings ...' + item
172+
options.renderTabSettings(bodyMain, ele.subject)
173+
bodyMain.asSetttings = true
189174
}
190175
} else {
191-
if (bodyDiv.asSetttings !== false) {
192-
bodyDiv.innerHTML = 'loading item ...' + item
193-
options.renderMain(bodyDiv, ele.subject)
194-
bodyDiv.asSetttings = false
176+
if (bodyMain.asSetttings !== false) {
177+
bodyMain.innerHTML = 'loading item ...' + item
178+
options.renderMain(bodyMain, ele.subject)
179+
bodyMain.asSetttings = false
195180
}
196181
}
197182
})
@@ -204,10 +189,11 @@ UI.tabs.tabWidget = function (options) {
204189
return ele
205190
}
206191

192+
// @@ Use common one from utils?
207193
var orderedSync = function () {
208194
var items = getItems()
209195
if (!vertical) {
210-
mainTD.setAttribute('colspan', items.length + (onClose ? 1 : 0))
196+
// mainElement.setAttribute('colspan', items.length + (onClose ? 1 : 0))
211197
}
212198
var slot, i, j, left, right
213199
var differ = false
@@ -245,67 +231,20 @@ UI.tabs.tabWidget = function (options) {
245231
}
246232
for (i = 0; i < insertables.length; i++) {
247233
var newSlot = makeNewSlot(insertables[i])
248-
var newBodyTR = dom.createElement('tr')
249-
// var newBodyDiv = newBodyTR.appendChild(dom.createElement('div'))
250-
newSlot.bodyTR = newBodyTR
251-
dom.createElement('tr')
234+
var newBodyDiv = dom.createElement('div')
235+
// var newBodyDiv = newBodyDiv.appendChild(dom.createElement('div'))
236+
newSlot.bodyTR = newBodyDiv
252237
if (left === tabContainer.children.length) {
253238
// None left of original on right
254239
tabContainer.appendChild(newSlot)
255-
bodyContainer.appendChild(newBodyTR)
240+
bodyContainer.appendChild(newBodyDiv)
256241
// console.log(' appending new ' + insertables[i])
257242
} else {
258243
// console.log(' inserting at ' + (left + i) + ' new ' + insertables[i])
259244
tabContainer.insertBefore(newSlot, tabContainer.children[left + i])
260-
bodyContainer.insertBefore(newBodyTR, bodyContainer.children[left + i])
261-
}
262-
}
263-
if (onClose) {
264-
addCancelButton(tabContainer)
265-
}
266-
}
267-
268-
// UNMAINTAINED
269-
var unorderedSync = function () {
270-
var items = getItems()
271-
if (!vertical) {
272-
mainTD.setAttribute('colspan', items.length + (onClose ? 1 : 0))
273-
}
274-
var slot, i, j, found, pair
275-
var missing = []
276-
for (i = 0; i < tabContainer.children.length; i++) {
277-
slot = tabContainer.children[i]
278-
slot.deleteMe = true
279-
}
280-
for (j = 0; j < items.length; j++) {
281-
found = false
282-
for (i = 0; i < tabContainer.children.length; i++) {
283-
if (tabContainer.children[i].subject === items[j]) {
284-
found = true
285-
}
286-
}
287-
if (!found) {
288-
missing.push([j, items[j]])
245+
bodyContainer.insertBefore(newBodyDiv, bodyContainer.children[left + i])
289246
}
290247
}
291-
for (j = 0; j < missing.length; j++) {
292-
pair = missing[j]
293-
i = pair[0]
294-
slot = makeNewSlot(pair[1])
295-
if (i >= tabContainer.length) {
296-
tabContainer.appendChild(slot)
297-
} else {
298-
tabContainer.insertBefore(slot, tabContainer.children[i + 1])
299-
}
300-
}
301-
302-
for (i = 0; i < tabContainer.children.length; i++) {
303-
slot = tabContainer.children[i]
304-
if (slot.deleteMe) {
305-
tabContainer.removeChild(slot)
306-
}
307-
}
308-
309248
if (onClose) {
310249
addCancelButton(tabContainer)
311250
}
@@ -315,10 +254,11 @@ UI.tabs.tabWidget = function (options) {
315254
if (options.ordered) {
316255
orderedSync()
317256
} else {
318-
unorderedSync()
257+
// @@ SORT THE values
258+
orderedSync()
319259
}
320260
}
321-
box.refresh = sync
261+
rootElement.refresh = sync
322262
sync()
323263

324264
// From select-tabs branch by hand
@@ -345,7 +285,7 @@ UI.tabs.tabWidget = function (options) {
345285
} else if (!options.startEmpty && tabContainer.children.length) {
346286
tabContainer.children[0].firstChild.click() // Open first tab
347287
}
348-
return box
288+
return rootElement
349289

350290
function addCancelButton (tabContainer) {
351291
if (tabContainer.dataset.onCloseSet) {

‎src/widgets/buttons.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,9 @@ buttons.iconForClass = {
200200
'prov:SoftwareAgent': 'noun_Robot_849764.svg', // Bot
201201
'vcard:AddressBook': 'noun_15695.svg',
202202
'trip:Trip': 'noun_581629.svg',
203-
'meeting:Meeting': 'noun_66617.svg',
204203
'meeting:LongChat': 'noun_1689339.svg',
204+
'meeting:Meeting': 'noun_66617.svg',
205+
'meeting:Project': 'noun_1036577.svg',
205206
'ui:Form': 'noun_122196.svg',
206207
'rdfs:Class': 'class-rectangle.svg', // For RDF developers
207208
'rdf:Property': 'property-diamond.svg',

0 commit comments

Comments
 (0)