Verified Commit 9638959d authored by Bas Lijnse's avatar Bas Lijnse Committed by Camil Staps

Created a separate tab bar editor to make choices with

parent 063c7a9f
Pipeline #29277 passed with stage
in 5 minutes and 10 seconds
...@@ -97,6 +97,7 @@ derive class iTask UIChange, UIAttributeChange, UIChildChange ...@@ -97,6 +97,7 @@ derive class iTask UIChange, UIAttributeChange, UIChildChange
| UIChoiceList // - A mutually exclusive set of radio buttons | UIChoiceList // - A mutually exclusive set of radio buttons
| UIGrid // - Grid (selecting an item in a table) | UIGrid // - Grid (selecting an item in a table)
| UITree // - Tree (selecting a node in a tree structure) | UITree // - Tree (selecting a node in a tree structure)
| UITabBar // - A tab bar (to make a selection with)
// Data elements (implemented in itasks-core.js) // Data elements (implemented in itasks-core.js)
| UIData | UIData
......
...@@ -231,6 +231,7 @@ where ...@@ -231,6 +231,7 @@ where
toString UIChoiceList = "ChoiceList" toString UIChoiceList = "ChoiceList"
toString UIGrid = "Grid" toString UIGrid = "Grid"
toString UITree = "Tree" toString UITree = "Tree"
toString UITabBar = "TabBar"
toString UIContainer = "Container" toString UIContainer = "Container"
toString UIPanel = "Panel" toString UIPanel = "Panel"
......
...@@ -118,6 +118,12 @@ grid :: Editor (ChoiceGrid, [Int]) ...@@ -118,6 +118,12 @@ grid :: Editor (ChoiceGrid, [Int])
* Supported attributes: * Supported attributes:
*/ */
tree :: Editor ([ChoiceNode], [Int]) tree :: Editor ([ChoiceNode], [Int])
/**
* A horizontal bar with tabs to make a selection with
*/
tabBar :: Editor ([ChoiceText], [Int])
/** /**
* Modifies the above editors for making choices such that they use a constant set of choices. * Modifies the above editors for making choices such that they use a constant set of choices.
*/ */
......
...@@ -77,6 +77,9 @@ checkGroup = choiceComponent (const 'DM'.newMap) id toOptionText checkBoundsText ...@@ -77,6 +77,9 @@ checkGroup = choiceComponent (const 'DM'.newMap) id toOptionText checkBoundsText
choiceList :: Editor ([ChoiceText], [Int]) choiceList :: Editor ([ChoiceText], [Int])
choiceList = choiceComponent (const 'DM'.newMap) id toOptionText checkBoundsText UIChoiceList choiceList = choiceComponent (const 'DM'.newMap) id toOptionText checkBoundsText UIChoiceList
tabBar :: Editor ([ChoiceText], [Int])
tabBar = choiceComponent (const 'DM'.newMap) id toOptionText checkBoundsText UITabBar
toOptionText {ChoiceText|id,text}= JSONObject [("id",JSONInt id),("text",JSONString text)] toOptionText {ChoiceText|id,text}= JSONObject [("id",JSONInt id),("text",JSONString text)]
checkBoundsText options idx = or [id == idx \\ {ChoiceText|id} <- options] checkBoundsText options idx = or [id == idx \\ {ChoiceText|id} <- options]
......
...@@ -150,8 +150,9 @@ div.itasks-exception { ...@@ -150,8 +150,9 @@ div.itasks-exception {
font-weight: normal; font-weight: normal;
overflow: auto; overflow: auto;
flex-basis: 0; flex-basis: 0;
flex-direction: column;
} }
*.itasks-viewport div, *.itasks-viewport input, *.itasks-viewport td, *.itasks-viewport th, *.itasks-viewport select { *.itasks-viewport div, *.itasks-viewport input, *.itasks-viewport td, *.itasks-viewport th, *.itasks-viewport select, *.itasks-viewport ul {
font-size: 9pt; font-size: 9pt;
} }
*.itasks-viewport .icon-help { *.itasks-viewport .icon-help {
...@@ -462,7 +463,28 @@ div.itasks-exception { ...@@ -462,7 +463,28 @@ div.itasks-exception {
.itasks-tabset > * { .itasks-tabset > * {
align-self: stretch; align-self: stretch;
} }
.itasks-tabset .itasks-tabbar { .itasks-tabset .itasks-tabitems {
z-index: 2;
border: 1px solid #ccc;
border-top-width: 0;
background-color: #eee;
flex: 1;
display: flex;
flex-direction: column;
}
.itasks-tabset .itasks-container.itasks-tabitem, .itasks-tabset .itasks-panel.itasks-tabitem, .itasks-tabset .itasks-viewport.itasks-tabitem {
display: none;
}
.itasks-tabset .itasks-panel.itasks-tabitem.itasks-selected {
display: grid;
border-top: 0;
}
.itasks-tabset .itasks-container.itasks-tabitem.itasks-selected, .itasks-tabset .itasks-viewport.itasks-tabitem.itasks-selected {
display: flex;
border-top: 0;
}
.itasks-tabbar {
text-align: left; text-align: left;
list-style: none; list-style: none;
margin: 0; margin: 0;
...@@ -473,7 +495,7 @@ div.itasks-exception { ...@@ -473,7 +495,7 @@ div.itasks-exception {
background: linear-gradient(#fdb286, #fb7322); background: linear-gradient(#fdb286, #fb7322);
overflow: hidden; overflow: hidden;
} }
.itasks-tabset .itasks-tabbar li { .itasks-tabbar li {
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -484,12 +506,12 @@ div.itasks-exception { ...@@ -484,12 +506,12 @@ div.itasks-exception {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.itasks-tabset .itasks-tabbar li a { .itasks-tabbar li a {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.itasks-tabset .itasks-tabbar li:before, .itasks-tabbar li:before,
.itasks-tabset .itasks-tabbar li:after { .itasks-tabbar li:after {
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
width: 5px; width: 5px;
...@@ -497,31 +519,31 @@ div.itasks-exception { ...@@ -497,31 +519,31 @@ div.itasks-exception {
content: " "; content: " ";
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.itasks-tabset .itasks-tabbar li:before { .itasks-tabbar li:before {
left: -6px; left: -6px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #e1e1e1; box-shadow: 2px 2px 0 #e1e1e1;
} }
.itasks-tabset .itasks-tabbar li:after { .itasks-tabbar li:after {
right: -6px; right: -6px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #e1e1e1; box-shadow: -2px 2px 0 #e1e1e1;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected { .itasks-tabbar li.itasks-selected {
background: #eee; background: #eee;
color: #000; color: #000;
z-index: 2; z-index: 2;
border-bottom-color: #eee; border-bottom-color: #eee;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:before { .itasks-tabbar li.itasks-selected:before {
box-shadow: 2px 2px 0 #eee; box-shadow: 2px 2px 0 #eee;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:after { .itasks-tabbar li.itasks-selected:after {
box-shadow: -2px 2px 0 #eee; box-shadow: -2px 2px 0 #eee;
} }
.itasks-tabset .itasks-tabbar li a.itasks-tabclose { .itasks-tabbar li a.itasks-tabclose {
color: #aaa; color: #aaa;
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -535,7 +557,8 @@ div.itasks-exception { ...@@ -535,7 +557,8 @@ div.itasks-exception {
border-radius: 2px; border-radius: 2px;
padding: 0 2px; padding: 0 2px;
} }
.itasks-tabset .itasks-tabbar:after {
.itasks-tabbar:after {
position: absolute; position: absolute;
content: ""; content: "";
width: 100%; width: 100%;
...@@ -544,10 +567,12 @@ div.itasks-exception { ...@@ -544,10 +567,12 @@ div.itasks-exception {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
z-index: 1; z-index: 1;
} }
.itasks-tabset .itasks-tabbar:before {
.itasks-tabbar:before {
z-index: 1; z-index: 1;
} }
.itasks-tabset .itasks-tabicon {
.itasks-tabicon {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: inline-block; display: inline-block;
...@@ -555,32 +580,14 @@ div.itasks-exception { ...@@ -555,32 +580,14 @@ div.itasks-exception {
position: relative; position: relative;
top: 3px; top: 3px;
} }
.itasks-tabset .itasks-tab-disabled .itasks-tabicon {
.itasks-tab-disabled .itasks-tabicon {
opacity: 0.5; opacity: 0.5;
} }
.itasks-tabset .itasks-tab-disabled span {
.itasks-tab-disabled span {
color: #aaa; color: #aaa;
} }
.itasks-tabset .itasks-tabitems {
z-index: 2;
border: 1px solid #ccc;
border-top-width: 0;
background-color: #eee;
flex: 1;
display: flex;
flex-direction: column;
}
.itasks-tabset .itasks-container.itasks-tabitem, .itasks-tabset .itasks-panel.itasks-tabitem, .itasks-tabset .itasks-viewport.itasks-tabitem {
display: none;
}
.itasks-tabset .itasks-panel.itasks-tabitem.itasks-selected {
display: grid;
border-top: 0;
}
.itasks-tabset .itasks-container.itasks-tabitem.itasks-selected, .itasks-tabset .itasks-viewport.itasks-tabitem.itasks-selected {
display: flex;
border-top: 0;
}
.itasks-toolbar, .itasks-buttonbar { .itasks-toolbar, .itasks-buttonbar {
align-self: stretch; align-self: stretch;
......
...@@ -150,8 +150,9 @@ div.itasks-exception { ...@@ -150,8 +150,9 @@ div.itasks-exception {
font-weight: normal; font-weight: normal;
overflow: auto; overflow: auto;
flex-basis: 0; flex-basis: 0;
flex-direction: column;
} }
*.itasks-viewport div, *.itasks-viewport input, *.itasks-viewport td, *.itasks-viewport th, *.itasks-viewport select { *.itasks-viewport div, *.itasks-viewport input, *.itasks-viewport td, *.itasks-viewport th, *.itasks-viewport select, *.itasks-viewport ul {
font-size: 9pt; font-size: 9pt;
} }
*.itasks-viewport .icon-help { *.itasks-viewport .icon-help {
...@@ -462,7 +463,28 @@ div.itasks-exception { ...@@ -462,7 +463,28 @@ div.itasks-exception {
.itasks-tabset > * { .itasks-tabset > * {
align-self: stretch; align-self: stretch;
} }
.itasks-tabset .itasks-tabbar { .itasks-tabset .itasks-tabitems {
z-index: 2;
border: 1px solid #ccc;
border-top-width: 0;
background-color: #eee;
flex: 1;
display: flex;
flex-direction: column;
}
.itasks-tabset .itasks-container.itasks-tabitem, .itasks-tabset .itasks-panel.itasks-tabitem, .itasks-tabset .itasks-viewport.itasks-tabitem {
display: none;
}
.itasks-tabset .itasks-panel.itasks-tabitem.itasks-selected {
display: grid;
border-top: 0;
}
.itasks-tabset .itasks-container.itasks-tabitem.itasks-selected, .itasks-tabset .itasks-viewport.itasks-tabitem.itasks-selected {
display: flex;
border-top: 0;
}
.itasks-tabbar {
text-align: left; text-align: left;
list-style: none; list-style: none;
margin: 0; margin: 0;
...@@ -473,7 +495,7 @@ div.itasks-exception { ...@@ -473,7 +495,7 @@ div.itasks-exception {
background: linear-gradient(white, #ccc); background: linear-gradient(white, #ccc);
overflow: hidden; overflow: hidden;
} }
.itasks-tabset .itasks-tabbar li { .itasks-tabbar li {
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -484,12 +506,12 @@ div.itasks-exception { ...@@ -484,12 +506,12 @@ div.itasks-exception {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.itasks-tabset .itasks-tabbar li a { .itasks-tabbar li a {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.itasks-tabset .itasks-tabbar li:before, .itasks-tabbar li:before,
.itasks-tabset .itasks-tabbar li:after { .itasks-tabbar li:after {
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
width: 5px; width: 5px;
...@@ -497,31 +519,31 @@ div.itasks-exception { ...@@ -497,31 +519,31 @@ div.itasks-exception {
content: " "; content: " ";
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.itasks-tabset .itasks-tabbar li:before { .itasks-tabbar li:before {
left: -6px; left: -6px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #e1e1e1; box-shadow: 2px 2px 0 #e1e1e1;
} }
.itasks-tabset .itasks-tabbar li:after { .itasks-tabbar li:after {
right: -6px; right: -6px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #e1e1e1; box-shadow: -2px 2px 0 #e1e1e1;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected { .itasks-tabbar li.itasks-selected {
background: #eee; background: #eee;
color: #000; color: #000;
z-index: 2; z-index: 2;
border-bottom-color: #eee; border-bottom-color: #eee;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:before { .itasks-tabbar li.itasks-selected:before {
box-shadow: 2px 2px 0 #eee; box-shadow: 2px 2px 0 #eee;
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:after { .itasks-tabbar li.itasks-selected:after {
box-shadow: -2px 2px 0 #eee; box-shadow: -2px 2px 0 #eee;
} }
.itasks-tabset .itasks-tabbar li a.itasks-tabclose { .itasks-tabbar li a.itasks-tabclose {
color: #aaa; color: #aaa;
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -535,7 +557,8 @@ div.itasks-exception { ...@@ -535,7 +557,8 @@ div.itasks-exception {
border-radius: 2px; border-radius: 2px;
padding: 0 2px; padding: 0 2px;
} }
.itasks-tabset .itasks-tabbar:after {
.itasks-tabbar:after {
position: absolute; position: absolute;
content: ""; content: "";
width: 100%; width: 100%;
...@@ -544,10 +567,12 @@ div.itasks-exception { ...@@ -544,10 +567,12 @@ div.itasks-exception {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
z-index: 1; z-index: 1;
} }
.itasks-tabset .itasks-tabbar:before {
.itasks-tabbar:before {
z-index: 1; z-index: 1;
} }
.itasks-tabset .itasks-tabicon {
.itasks-tabicon {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: inline-block; display: inline-block;
...@@ -555,32 +580,14 @@ div.itasks-exception { ...@@ -555,32 +580,14 @@ div.itasks-exception {
position: relative; position: relative;
top: 3px; top: 3px;
} }
.itasks-tabset .itasks-tab-disabled .itasks-tabicon {
.itasks-tab-disabled .itasks-tabicon {
opacity: 0.5; opacity: 0.5;
} }
.itasks-tabset .itasks-tab-disabled span {
.itasks-tab-disabled span {
color: #aaa; color: #aaa;
} }
.itasks-tabset .itasks-tabitems {
z-index: 2;
border: 1px solid #ccc;
border-top-width: 0;
background-color: #eee;
flex: 1;
display: flex;
flex-direction: column;
}
.itasks-tabset .itasks-container.itasks-tabitem, .itasks-tabset .itasks-panel.itasks-tabitem, .itasks-tabset .itasks-viewport.itasks-tabitem {
display: none;
}
.itasks-tabset .itasks-panel.itasks-tabitem.itasks-selected {
display: grid;
border-top: 0;
}
.itasks-tabset .itasks-container.itasks-tabitem.itasks-selected, .itasks-tabset .itasks-viewport.itasks-tabitem.itasks-selected {
display: flex;
border-top: 0;
}
.itasks-toolbar, .itasks-buttonbar { .itasks-toolbar, .itasks-buttonbar {
align-self: stretch; align-self: stretch;
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
div, input, td, th, select { div, input, td, th, select, ul {
font-size: 9pt; font-size: 9pt;
} }
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
overflow: auto; overflow: auto;
flex-basis: 0; flex-basis: 0;
flex-direction: column;
} }
.#{$prefix}container { .#{$prefix}container {
...@@ -201,110 +202,6 @@ ...@@ -201,110 +202,6 @@
> * { > * {
align-self: stretch; align-self: stretch;
} }
.#{$prefix}tabbar {
text-align: left;
list-style: none;
margin: 0;
padding: 0 10px;
line-height: 24px;
position: relative;
min-height: 24px;
background: linear-gradient(lighten($panel-header-base-color,20%), $panel-header-base-color);
overflow: hidden;
li {
margin: 0;
padding: 0 10px;
border: 1px solid $tab-border-color;
background: darken($tab-base-color, 5%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
li a {
color: $tab-text-color;
text-decoration: none;
}
li:before,
li:after {
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
border: 1px solid $tab-border-color;
}
li:before {
left: -6px;
border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 darken($tab-base-color,5%);
}
li:after {
right: -6px;
border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 darken($tab-base-color,5%);
}
li.#{$prefix}selected {
background: $tab-base-color;
color: $tab-text-color;
z-index: 2;
border-bottom-color: $tab-base-color;
}
li.#{$prefix}selected:before {
box-shadow: 2px 2px 0 $tab-base-color;
}
li.#{$prefix}selected:after {
box-shadow: -2px 2px 0 $tab-base-color;
}
li a.#{$prefix}tabclose {
color: #aaa;
display: inline-block;
position: relative;
top: -5px;
left: 7px;
font-weight: bold;
font-size: 8px;
line-height: 8px;
background: #eee;
border: 1px solid #ccc;
border-radius: 2px;
padding: 0 2px;
}
}
.#{$prefix}tabbar:after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid $tab-border-color;
z-index: 1;
}
.#{$prefix}tabbar:before {
z-index: 1;
}
.#{$prefix}tabicon {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 3px 0 0;
position: relative;
top: 3px;
}
.#{$prefix}tab-disabled .#{$prefix}tabicon {
opacity: 0.5;
}
.#{$prefix}tab-disabled span {
color: #aaa;
}
.#{$prefix}tabitems { .#{$prefix}tabitems {
z-index: 2; z-index: 2;
border: 1px solid $tab-border-color; border: 1px solid $tab-border-color;
...@@ -327,6 +224,110 @@ ...@@ -327,6 +224,110 @@
} }
} }
.#{$prefix}tabbar {
text-align: left;
list-style: none;
margin: 0;
padding: 0 10px;
line-height: 24px;
position: relative;
min-height: 24px;
background: linear-gradient(lighten($panel-header-base-color,20%), $panel-header-base-color);