Commit 617dc9e3 authored by Bas Lijnse's avatar Bas Lijnse

More small layout tweaks

parent 82da3500
itasks.TextView = { itasks.TextView = {
container: false, paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5,
initDOMEl: function() { initDOMEl: function() {
this.domEl.innerHTML = this.value || ''; this.domEl.innerHTML = this.value || '';
}, },
...@@ -13,6 +17,12 @@ itasks.TextView = { ...@@ -13,6 +17,12 @@ itasks.TextView = {
} }
}; };
itasks.HtmlView = { itasks.HtmlView = {
//Default padding
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5,
initDOMEl: function() { initDOMEl: function() {
this.domEl.innerHTML = this.value || ''; this.domEl.innerHTML = this.value || '';
}, },
...@@ -28,6 +38,7 @@ itasks.HtmlView = { ...@@ -28,6 +38,7 @@ itasks.HtmlView = {
itasks.ProgressBar = { itasks.ProgressBar = {
domTag: 'progress', domTag: 'progress',
width: 'flex', width: 'flex',
height: 'wrap',
initDOMEl: function() { initDOMEl: function() {
var me = this, var me = this,
el = this.domEl; el = this.domEl;
......
...@@ -21,6 +21,7 @@ itasks.TextField = { ...@@ -21,6 +21,7 @@ itasks.TextField = {
}; };
itasks.TextArea = { itasks.TextArea = {
domTag: 'textarea', domTag: 'textarea',
height: 150,
initDOMEl: function() { initDOMEl: function() {
var me = this, var me = this,
el = this.domEl; el = this.domEl;
...@@ -244,7 +245,6 @@ itasks.Slider = { ...@@ -244,7 +245,6 @@ itasks.Slider = {
itasks.Button = { itasks.Button = {
domTag: 'a', domTag: 'a',
cssCls: 'button', cssCls: 'button',
container: false,
height: 'wrap', height: 'wrap',
width: 'wrap', width: 'wrap',
enabled: true, enabled: true,
......
...@@ -42,7 +42,6 @@ itasks.Dropdown = { ...@@ -42,7 +42,6 @@ itasks.Dropdown = {
itasks.RadioGroup = { itasks.RadioGroup = {
domTag: 'ul', domTag: 'ul',
cssCls: 'choice-radiogroup', cssCls: 'choice-radiogroup',
container: false,
initDOMEl: function() { initDOMEl: function() {
var me = this, var me = this,
el = me.domEl, el = me.domEl,
...@@ -116,7 +115,6 @@ itasks.Grid = { ...@@ -116,7 +115,6 @@ itasks.Grid = {
cssCls: 'choicegrid', cssCls: 'choicegrid',
width: 'flex', width: 'flex',
height: 'flex', height: 'flex',
container: false,
initDOMEl: function() { initDOMEl: function() {
var me = this, var me = this,
......
...@@ -72,10 +72,8 @@ itasks.Component = { ...@@ -72,10 +72,8 @@ itasks.Component = {
me.initDOMElSize(); me.initDOMElSize();
//Set margins and alignment //Set margins and alignment
me.initDOMElMargins(); me.initDOMElMargins();
me.initContainerEl();
if(me.container) {
me.initContainerEl();
}
//Add the the child renderings //Add the the child renderings
me.children.forEach(function(child) { me.children.forEach(function(child) {
me.containerEl.appendChild(child.domEl); me.containerEl.appendChild(child.domEl);
...@@ -129,8 +127,7 @@ itasks.Component = { ...@@ -129,8 +127,7 @@ itasks.Component = {
var me = this, var me = this,
el = me.domEl, el = me.domEl,
width = me.width, width = me.width,
height = me.height, height = me.height;
margins = (me.margins && me.margins.split(' ')) || ['0','0','0','0'];
if(!me.parentCmp) { //Do not set margins on the root component, let the embedding page handle that if(!me.parentCmp) { //Do not set margins on the root component, let the embedding page handle that
return; return;
...@@ -144,7 +141,7 @@ itasks.Component = { ...@@ -144,7 +141,7 @@ itasks.Component = {
isLast = (curIdx == lastIdx); isLast = (curIdx == lastIdx);
//Set left and right margins as specified //Set left and right margins as specified
if(me.marginLeft) { el.style.marginLeft = me.marginLeft + 'px' ; } if(me.marginLeft) { el.style.marginLeft = me.marginLeft + 'px'; }
if(me.marginRight) { el.style.marginRight = me.marginRight + 'px' ; } if(me.marginRight) { el.style.marginRight = me.marginRight + 'px' ; }
//Because vertical borders 'collapse' into each other, we never set the //Because vertical borders 'collapse' into each other, we never set the
...@@ -156,9 +153,6 @@ itasks.Component = { ...@@ -156,9 +153,6 @@ itasks.Component = {
el.style.marginTop = ((me.marginTop || 0) + (me.parentCmp.children[curIdx - 1].marginBottom || 0)) + 'px'; el.style.marginTop = ((me.marginTop || 0) + (me.parentCmp.children[curIdx - 1].marginBottom || 0)) + 'px';
} }
//if(me.marginTop) { el.style.marginTop = me.marginTop + 'px' ; }
//if(me.marginBottom) { el.style.marginBottom = me.marginBottom + 'px' ; }
//Set margins to auto based on alignment of parent //Set margins to auto based on alignment of parent
if(parentDirection == 'vertical') { if(parentDirection == 'vertical') {
if(width !== 'flex') { if(width !== 'flex') {
......
...@@ -82,31 +82,31 @@ marginsAttr :: !Int !Int !Int !Int -> UIAttributes ...@@ -82,31 +82,31 @@ marginsAttr :: !Int !Int !Int !Int -> UIAttributes
marginsAttr top right bottom left = 'DM'.fromList [("marginTop",JSONInt top),("marginRight",JSONInt right),("marginBottom",JSONInt bottom),("marginLeft",JSONInt left)] marginsAttr top right bottom left = 'DM'.fromList [("marginTop",JSONInt top),("marginRight",JSONInt right),("marginBottom",JSONInt bottom),("marginLeft",JSONInt left)]
topMarginAttr :: !Int -> UIAttributes topMarginAttr :: !Int -> UIAttributes
topMarginAttr top = 'DM'.fromList [("topMargin",JSONInt top)] topMarginAttr top = 'DM'.fromList [("marginTop",JSONInt top)]
rightMarginAttr :: !Int -> UIAttributes rightMarginAttr :: !Int -> UIAttributes
rightMarginAttr right = 'DM'.fromList [("rightMargin",JSONInt right)] rightMarginAttr right = 'DM'.fromList [("marginRight",JSONInt right)]
bottomMarginAttr :: !Int -> UIAttributes bottomMarginAttr :: !Int -> UIAttributes
bottomMarginAttr bottom = 'DM'.fromList [("bottomMargin",JSONInt bottom)] bottomMarginAttr bottom = 'DM'.fromList [("marginBottom",JSONInt bottom)]
leftMarginAttr :: !Int -> UIAttributes leftMarginAttr :: !Int -> UIAttributes
leftMarginAttr left = 'DM'.fromList [("leftMargin",JSONInt left)] leftMarginAttr left = 'DM'.fromList [("marginLeft",JSONInt left)]
paddingAttr :: !Int !Int !Int !Int -> UIAttributes paddingAttr :: !Int !Int !Int !Int -> UIAttributes
paddingAttr top right bottom left = 'DM'.fromList [("paddingTop",JSONInt top),("paddingRight",JSONInt right),("paddingBottom",JSONInt bottom),("paddingLeft",JSONInt left)] paddingAttr top right bottom left = 'DM'.fromList [("paddingTop",JSONInt top),("paddingRight",JSONInt right),("paddingBottom",JSONInt bottom),("paddingLeft",JSONInt left)]
topPaddingAttr :: !Int -> UIAttributes topPaddingAttr :: !Int -> UIAttributes
topPaddingAttr top = 'DM'.fromList [("topPadding",JSONInt top)] topPaddingAttr top = 'DM'.fromList [("paddingTop",JSONInt top)]
rightPaddingAttr :: !Int -> UIAttributes rightPaddingAttr :: !Int -> UIAttributes
rightPaddingAttr right = 'DM'.fromList [("rightPadding",JSONInt right)] rightPaddingAttr right = 'DM'.fromList [("paddingRight",JSONInt right)]
bottomPaddingAttr :: !Int -> UIAttributes bottomPaddingAttr :: !Int -> UIAttributes
bottomPaddingAttr bottom = 'DM'.fromList [("bottomPadding",JSONInt bottom)] bottomPaddingAttr bottom = 'DM'.fromList [("paddingBottom",JSONInt bottom)]
leftPaddingAttr :: !Int -> UIAttributes leftPaddingAttr :: !Int -> UIAttributes
leftPaddingAttr left = 'DM'.fromList [("leftPadding",JSONInt left)] leftPaddingAttr left = 'DM'.fromList [("paddingLeft",JSONInt left)]
titleAttr :: !String -> UIAttributes titleAttr :: !String -> UIAttributes
titleAttr title = 'DM'.fromList [("title",JSONString title)] titleAttr title = 'DM'.fromList [("title",JSONString title)]
......
...@@ -34,7 +34,8 @@ setNodeType :: UINodeType -> Layout ...@@ -34,7 +34,8 @@ setNodeType :: UINodeType -> Layout
// == Changing attributes === // == Changing attributes ===
setAttributes :: UIAttributes -> Layout setAttributes :: UIAttributes -> Layout
copyAttributes :: NodePath NodePath -> Layout copyAttributes :: [String] NodePath NodePath -> Layout
copyAllAttributes :: NodePath NodePath -> Layout
// === Changing the structure of the tree === // === Changing the structure of the tree ===
......
...@@ -59,10 +59,18 @@ where ...@@ -59,10 +59,18 @@ where
= (ChangeUI attrChanges itemChanges,s) = (ChangeUI attrChanges itemChanges,s)
layout (change,s) = (change,s) layout (change,s) = (change,s)
copyAttributes :: NodePath NodePath -> Layout
copyAttributes src dst = layout //TODO: Also handle attribute updates in the src location, and partial replacements along the path
copyAttributes :: [String] NodePath NodePath -> Layout
copyAttributes selection src dst = copyAttributes` (Just selection) src dst
copyAllAttributes :: NodePath NodePath -> Layout
copyAllAttributes src dst = copyAttributes` Nothing src dst
copyAttributes` :: (Maybe [String]) NodePath NodePath -> Layout
copyAttributes` selection src dst = layout //TODO: Also handle attribute updates in the src location, and partial replacements along the path
where where
layout (ReplaceUI ui,s) = case selectAttr src ui of layout (ReplaceUI ui,s) = case selectAttr src ui of
Just attr = (ReplaceUI (addAttr attr dst ui),s) Just attr = (ReplaceUI (addAttr attr dst ui),s)
Nothing = (ReplaceUI ui,s) Nothing = (ReplaceUI ui,s)
layout (change,s) = (change,s) layout (change,s) = (change,s)
...@@ -72,11 +80,14 @@ where ...@@ -72,11 +80,14 @@ where
| s < length items = selectAttr ss (items !! s) | s < length items = selectAttr ss (items !! s)
= Nothing = Nothing
addAttr extra [] (UI type attr items) = UI type (foldl (\m (k,v) -> 'DM'.put k v m) attr ('DM'.toList extra)) items addAttr extra [] (UI type attr items)
= UI type (foldl (\m (k,v) -> 'DM'.put k v m) attr [(k,v) \\ (k,v) <- 'DM'.toList extra | condition k]) items
addAttr extra [s:ss] (UI type attr items) addAttr extra [s:ss] (UI type attr items)
| s < length items = UI type attr (updateAt s (addAttr extra ss (items !! s)) items) | s < length items = UI type attr (updateAt s (addAttr extra ss (items !! s)) items)
= UI type attr items = UI type attr items
condition = maybe (const True) (flip isMember) selection
wrapUI :: UINodeType -> Layout wrapUI :: UINodeType -> Layout
wrapUI type = layout wrapUI type = layout
where where
......
...@@ -14,8 +14,8 @@ where ...@@ -14,8 +14,8 @@ where
arrangeWithSideBar :: !Int !UISide !Int !Bool -> Layout arrangeWithSideBar :: !Int !UISide !Int !Bool -> Layout
arrangeWithSideBar index side size resize = sequenceLayouts arrangeWithSideBar index side size resize = sequenceLayouts
[wrapUI UIPanel //Push the current container down a level [wrapUI UIPanel //Push the current container down a level
,copyAttributes [0] [] //Keep the attributes from the original UI ,copyAllAttributes [0] [] //Keep the attributes from the original UI
,setAttributes (directionAttr direction) ,setAttributes (directionAttr direction)
,insertSubAt [sidePanelIndex] (ui UIComponent) //Make sure we have a target for the move ,insertSubAt [sidePanelIndex] (ui UIComponent) //Make sure we have a target for the move
,moveSubAt [mainPanelIndex,index] [sidePanelIndex,0] ,moveSubAt [mainPanelIndex,index] [sidePanelIndex,0]
......
...@@ -35,7 +35,7 @@ finalizeInteract = conditionalLayout isInteract layout ...@@ -35,7 +35,7 @@ finalizeInteract = conditionalLayout isInteract layout
where where
layout = sequenceLayouts layout = sequenceLayouts
[layoutSubAt [1] finalizeEditor [layoutSubAt [1] finalizeEditor
,copyAttributes [0] [] ,copyAttributes ["title"] [0] []
,removeEmptyPrompt ,removeEmptyPrompt
,setNodeType UIPanel ,setNodeType UIPanel
] ]
...@@ -161,7 +161,7 @@ labelControl attributes ...@@ -161,7 +161,7 @@ labelControl attributes
Just (JSONString label) Just (JSONString label)
# optional = maybe False (\(JSONBool b) -> b) ('DM'.get "optional" attributes) # optional = maybe False (\(JSONBool b) -> b) ('DM'.get "optional" attributes)
# (UI type attr items) = stringDisplay (formatLabel optional label) # (UI type attr items) = stringDisplay (formatLabel optional label)
# attr = 'DM'.unions [widthAttr (ExactSize LABEL_WIDTH),leftMarginAttr 4, attr] # attr = 'DM'.unions [widthAttr (ExactSize LABEL_WIDTH), attr]
= Just (UI type attr items) = Just (UI type attr items)
_ = Nothing _ = Nothing
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment