Commit c1fb00f7 authored by Bas Lijnse's avatar Bas Lijnse

Changed all alignment and spacing attributes to pure css

parent d58f01b5
......@@ -99,6 +99,6 @@ where
,moveSubUIs (SelectByPath [0,0]) [] 2
,removeSubUIs (SelectByPath [0])
,layoutSubUIs (SelectByType UIAction) actionToButton
,setUIAttributes ('DM'.unions [directionAttr Horizontal,paddingAttr 2 2 2 250, classAttr ["summary-bar"]])
,addCSSClass "summary-bar"
,setUIType UIContainer
]
......@@ -13,6 +13,8 @@ body {
.summary-bar {
color: #fff;
background: #004584 url('summary-bar.png') top left no-repeat;
padding: 2px 2px 2px 250px;
flex-direction: row;
}
.icon-incidents {
background-image: url('icons/incident.png');
......
......@@ -42,9 +42,9 @@ whileAuthenticated user ents alwaysOnTasks tlist
controlDash
= (allTasks [ viewInformation () [] ("Welcome " +++ toString user) @! ()
, viewNotifications
] <<@ ApplyLayout (setUIAttributes (directionAttr Horizontal))
] <<@ ArrangeHorizontal
>>* [OnAction (Action "Log out") (always (return ()))]
) <<@ ApplyLayout (setUIAttributes (directionAttr Horizontal))
) <<@ ArrangeHorizontal
workOnTasks :: Task ()
workOnTasks = parallel [ (Embedded, \_ -> listview)
......
......@@ -19,11 +19,9 @@ where
= updateSharedInformation ("Text","Edit text") [noteEditor] state
-||-
updateSharedInformation ("Lines","Edit lines") [listEditor] state
<<@ ApplyLayout horizontal
<<@ ArrangeHorizontal
>>= viewInformation "Result:" []
>>= return
noteEditor = UpdateUsing id (const id) textArea
listEditor = UpdateAs (split "\n") (\_ l -> join "\n" l)
horizontal = setUIAttributes (directionAttr Horizontal)
......@@ -20,10 +20,8 @@ sharedNotes
( updateSharedInformation "Update shared note 1" [UpdateUsing id (const id) textArea] note // an editor to update the shared string
-||-
updateSharedInformation "Update shared note 2" [UpdateUsing id (const id) textArea] note // and an other updating editor
<<@ ApplyLayout horizontal
<<@ ArrangeHorizontal
)
)
>>= viewInformation "Resulting string is:" [ViewUsing id textArea]
>>= return
where
horizontal = setUIAttributes (directionAttr Horizontal)
......@@ -26,8 +26,6 @@ enterSharedPersons
\sharedList -> updateSharedInformation "Modify the Shared List of Persons:" [] sharedList // update that list
-||
viewSharedInformation "Current Content of this Shared List:" [] sharedList // while showing that list
<<@ ApplyLayout horizontal // show both list next to each other (default is below)
<<@ ArrangeHorizontal // show both list next to each other (default is below)
>>= viewInformation "The List contains the following:" [] // show the final result
>>= return // done
where
horizontal = setUIAttributes (directionAttr Horizontal)
......@@ -24,10 +24,8 @@ person1by1 :: [Person] -> Task [Person]
person1by1 persons
= enterInformation "Add a person" []
-||
viewInformation "List so far.." [] persons // <<@ horizontal
viewInformation "List so far.." [] persons
>>* [ OnAction (Action "Add") (hasValue (\v -> person1by1 [v : persons]))
, OnAction (Action "Finish") (always (return persons))
, OnAction ActionCancel (always (return []))
]
where
horizontal = ApplyLayout (setUIAttributes (directionAttr Horizontal))
......@@ -118,7 +118,7 @@ loginAndManageWork welcome
,
viewInformation ("Guest access","Alternatively, you can continue anonymously as guest user") [] ()
>>| (return Nothing)
] <<@ ApplyLayout (setUIAttributes (directionAttr Horizontal)))
] <<@ ArrangeHorizontal)
) <<@ ApplyLayout layout
>>- browse) //Compact layout before login, full screen afterwards
) <<@ ApplyLayout (setUIAttributes (titleAttr welcome))
......@@ -156,7 +156,7 @@ where
[layoutSubUIs SelectChildren actionToButton
,layoutSubUIs (SelectByPath [0]) (setUIType UIContainer)
,setUIType UIContainer
,setUIAttributes ('DM'.unions [heightAttr WrapSize,directionAttr Horizontal,paddingAttr 2 2 2 10])
,addCSSClass "itasks-compact-header"
]
layoutWhatToDo = sequenceLayouts [arrangeWithSideBar 0 LeftSide True, layoutSubUIs (SelectByPath [1]) unwrapUI]
......@@ -206,7 +206,7 @@ where
addNewTask :: !(SharedTaskList ()) -> Task ()
addNewTask list
= ((chooseWorkflow >&> viewWorkflowDetails) <<@ ApplyLayout (setUIAttributes (directionAttr Horizontal))
= ((chooseWorkflow >&> viewWorkflowDetails) <<@ ArrangeHorizontal
>>* [OnAction (Action "Start task") (hasValue (\wf -> startWorkflow list wf @! ()))
,OnAction ActionCancel (always (return ()))
] ) <<@ Title "New work"
......
......@@ -27,7 +27,7 @@ from Data.GenEq import generic gEq
//Provide generic instances for all UI definitions
derive class iTask UI, UIType
derive class iTask UISize, UIBound, UISideSizes, UIDirection, UIVAlign, UIHAlign, UISide, UIWindowType
derive class iTask UISize, UIBound, UIDirection, UIVAlign, UIHAlign, UISide, UIWindowType
derive class iTask UITreeNode
//Representation of a collection of changes that need to be applied to an existing UI
......@@ -147,13 +147,6 @@ derive class iTask UIChange, UIAttributeChange, UIChildChange
| BottomSide
| LeftSide
:: UISideSizes =
{ top :: !Int
, right :: !Int
, bottom :: !Int
, left :: !Int
}
:: UITreeNode =
{ text :: !String
, iconCls :: !Maybe String
......@@ -188,32 +181,16 @@ uiac :: UIType UIAttributes [UI] -> UI
emptyAttr :: UIAttributes
optionalAttr :: !Bool -> UIAttributes
sizeAttr :: !UISize !UISize -> UIAttributes
widthAttr :: !UISize -> UIAttributes
heightAttr :: !UISize -> UIAttributes
minSizeAttr :: !UIBound !UIBound -> UIAttributes
minWidthAttr :: !UIBound -> UIAttributes
minHeightAttr :: !UIBound -> UIAttributes
maxSizeAttr :: !UIBound !UIBound -> UIAttributes
maxWidthAttr :: !UIBound -> UIAttributes
maxHeightAttr :: !UIBound -> UIAttributes
marginsAttr :: !Int !Int !Int !Int -> UIAttributes
topMarginAttr :: !Int -> UIAttributes
rightMarginAttr :: !Int -> UIAttributes
bottomMarginAttr :: !Int -> UIAttributes
leftMarginAttr :: !Int -> UIAttributes
paddingAttr :: !Int !Int !Int !Int -> UIAttributes
topPaddingAttr :: !Int -> UIAttributes
rightPaddingAttr :: !Int -> UIAttributes
bottomPaddingAttr :: !Int -> UIAttributes
leftPaddingAttr :: !Int -> UIAttributes
titleAttr :: !String -> UIAttributes
frameAttr :: !Bool -> UIAttributes
iconClsAttr :: !String -> UIAttributes
tooltipAttr :: !String -> UIAttributes
directionAttr :: !UIDirection -> UIAttributes
halignAttr :: !UIHAlign -> UIAttributes
valignAttr :: !UIVAlign -> UIAttributes
hposAttr :: !UIHAlign -> UIAttributes
vposAttr :: !UIVAlign -> UIAttributes
windowTypeAttr :: !UIWindowType -> UIAttributes
......@@ -262,7 +239,6 @@ instance encodeUI JSONNode
instance encodeUI (Maybe a) | encodeUI a
instance encodeUI [a] | encodeUI a
instance encodeUI UI
instance encodeUI UISideSizes
instance encodeUI UISize
instance encodeUI UIBound
instance encodeUI UIVAlign
......
......@@ -18,7 +18,7 @@ from Text.GenJSON import generic JSONEncode, generic JSONDecode, :: JSONNode
import Text.HTML
derive class iTask UI, UIType
derive class iTask UISize, UIBound, UISideSizes, UIDirection, UIVAlign, UIHAlign, UISide, UIWindowType
derive class iTask UISize, UIBound, UIDirection, UIVAlign, UIHAlign, UISide, UIWindowType
derive class iTask UITreeNode
//SHOULD BE IN Text.GenJSON
......@@ -63,54 +63,6 @@ widthAttr width = 'DM'.fromList [("width",encodeUI width)]
heightAttr :: !UISize -> UIAttributes
heightAttr height = 'DM'.fromList [("height",encodeUI height)]
minSizeAttr :: !UIBound !UIBound -> UIAttributes
minSizeAttr minWidth minHeight = 'DM'.fromList [("minWidth",encodeUI minWidth),("minHeight",encodeUI minHeight)]
minWidthAttr :: !UIBound -> UIAttributes
minWidthAttr minWidth = 'DM'.fromList [("minWidth",encodeUI minWidth)]
minHeightAttr :: !UIBound -> UIAttributes
minHeightAttr minHeight = 'DM'.fromList [("minHeight",encodeUI minHeight)]
maxSizeAttr :: !UIBound !UIBound -> UIAttributes
maxSizeAttr maxWidth maxHeight = 'DM'.fromList [("maxWidth",encodeUI maxWidth),("maxHeight",encodeUI maxHeight)]
maxWidthAttr :: !UIBound -> UIAttributes
maxWidthAttr maxWidth = 'DM'.fromList [("maxWidth",encodeUI maxWidth)]
maxHeightAttr :: !UIBound -> UIAttributes
maxHeightAttr maxHeight = 'DM'.fromList [("maxHeight",encodeUI maxHeight)]
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)]
topMarginAttr :: !Int -> UIAttributes
topMarginAttr top = 'DM'.fromList [("marginTop",JSONInt top)]
rightMarginAttr :: !Int -> UIAttributes
rightMarginAttr right = 'DM'.fromList [("marginRight",JSONInt right)]
bottomMarginAttr :: !Int -> UIAttributes
bottomMarginAttr bottom = 'DM'.fromList [("marginBottom",JSONInt bottom)]
leftMarginAttr :: !Int -> UIAttributes
leftMarginAttr left = 'DM'.fromList [("marginLeft",JSONInt left)]
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)]
topPaddingAttr :: !Int -> UIAttributes
topPaddingAttr top = 'DM'.fromList [("paddingTop",JSONInt top)]
rightPaddingAttr :: !Int -> UIAttributes
rightPaddingAttr right = 'DM'.fromList [("paddingRight",JSONInt right)]
bottomPaddingAttr :: !Int -> UIAttributes
bottomPaddingAttr bottom = 'DM'.fromList [("paddingBottom",JSONInt bottom)]
leftPaddingAttr :: !Int -> UIAttributes
leftPaddingAttr left = 'DM'.fromList [("paddingLeft",JSONInt left)]
titleAttr :: !String -> UIAttributes
titleAttr title = 'DM'.fromList [("title",JSONString title)]
......@@ -123,15 +75,6 @@ iconClsAttr iconCls = 'DM'.fromList [("iconCls",JSONString iconCls)]
tooltipAttr :: !String -> UIAttributes
tooltipAttr tooltip = 'DM'.fromList [("tooltip",JSONString tooltip)]
directionAttr :: !UIDirection -> UIAttributes
directionAttr direction = 'DM'.fromList [("direction",encodeUI direction)]
halignAttr :: !UIHAlign -> UIAttributes
halignAttr align = 'DM'.fromList [("halign",encodeUI align)]
valignAttr :: !UIVAlign -> UIAttributes
valignAttr align = 'DM'.fromList [("valign",encodeUI align)]
hposAttr :: !UIHAlign -> UIAttributes
hposAttr pos = 'DM'.fromList [("hpos",encodeUI pos)]
......@@ -315,11 +258,6 @@ where
toString UIData = "Data"
instance encodeUI UISideSizes
where
encodeUI {top,right,bottom,left}
= JSONString (toString top +++ " " +++ toString right +++ " " +++ toString bottom +++ " " +++ toString left)
instance encodeUI UISize
where
encodeUI (ExactSize s) = JSONInt s
......
......@@ -121,8 +121,7 @@ where
# val = Just <$> val
# counter = maybe [] (\f -> [uia UITextView ('DM'.unions [widthAttr FlexSize, valueAttr (JSONString (f val))])]) count
# button = if (isJust add) [uia UIButton ('DM'.unions [iconClsAttr "icon-add",editAttrs taskId (editorId dp) (Just (JSONString "add"))])] []
# attr = 'DM'.unions [halignAttr AlignRight,heightAttr WrapSize,directionAttr Horizontal]
= uiac UIToolBar attr (counter ++ button)
= uiac UIToolBar (classAttr ["itask-listitem-controls"]) (counter ++ button)
listItemUI taskId dp numItems idx id item
# buttons = (if reorder
......@@ -132,7 +131,7 @@ where
(if remove
[uia UIButton ('DM'.unions [iconClsAttr "icon-remove",editAttrs taskId (editorId dp) (Just (JSONString ("rem_" +++ toString id)))])
] [])
# attr = 'DM'.unions [halignAttr AlignRight,heightAttr WrapSize,directionAttr Horizontal]
# attr = 'DM'.unions [heightAttr WrapSize]
= uiac UIListItem attr (if (reorder || remove) ([flexWidth item] ++ buttons) [flexWidth item])
where
flexWidth (UI type attr content) = UI type ('DM'.union (widthAttr FlexSize) attr) content
......
......@@ -63,27 +63,30 @@ arrangeWithHeader :: !Int -> LayoutRule
arrangeWithHeader index = setAside "itasks-headerbar" index TopSide False
arrangeWithSideBar :: !Int !UISide !Bool -> LayoutRule
arrangeWithSideBar index side resize = setAside "itasks-sidebar" index side resize
arrangeWithSideBar index side resize = setAside ("itasks-sidebar" +++ suffix side) index side resize
where
suffix TopSide = "-top"
suffix BottomSide = "-bottom"
suffix LeftSide = "-left"
suffix RightSide = "-right"
setAside className index side resize = sequenceLayouts
[wrapUI UIPanel //Push the current container down a level
,copySubUIAttributes SelectAll [0] [] //Keep the attributes from the original UI
,setUIAttributes (directionAttr direction)
,addCSSClass className
,moveSubUIs (SelectByPath [0,index]) [] sidePanelIndex
,layoutSubUIs (SelectByPath [sidePanelIndex]) (sequenceLayouts
(if resize
[wrapUI UIPanel
,addCSSClass className
,addCSSClass "aside"
,setUIAttributes (resizableAttr (resizers side))
]
[addCSSClass className]
[addCSSClass "aside"]
)
)
]
where
sidePanelIndex = if (side === TopSide || side === LeftSide) 0 1
mainPanelIndex = if (side === TopSide || side === LeftSide) 1 0
direction = if (side === TopSide|| side === BottomSide) Vertical Horizontal
resizers TopSide = [BottomSide]
resizers BottomSide = [TopSide]
......@@ -171,15 +174,15 @@ where
arrangeSplit :: !UIDirection !Bool -> LayoutRule
arrangeSplit direction resize
= sequenceLayouts
[layoutSubUIs (SelectByPath []) (setUIAttributes (directionAttr direction))
[layoutSubUIs (SelectByPath []) (if (direction === Horizontal) arrangeHorizontal arrangeVertical)
,layoutSubUIs SelectChildren (setUIAttributes (sizeAttr FlexSize FlexSize))
]
arrangeVertical :: LayoutRule
arrangeVertical = setUIAttributes (directionAttr Vertical)
arrangeVertical = addCSSClass "itasks-vertical-container"
arrangeHorizontal :: LayoutRule
arrangeHorizontal = setUIAttributes (directionAttr Horizontal)
arrangeHorizontal = addCSSClass "itasks-horizontal-container"
frameCompact :: LayoutRule
frameCompact = sequenceLayouts
......@@ -335,7 +338,7 @@ toFormItem = layoutSubUIs (SelectAND (SelectByPath []) (SelectOR (SelectByHasAtt
(sequenceLayouts
//Create the 'row' that holds the form item
[wrapUI UIContainer
,setUIAttributes ('DM'.unions [classAttr ["itasks-form-item"],directionAttr Horizontal,valignAttr AlignMiddle, sizeAttr FlexSize WrapSize])
,addCSSClass "itasks-form-item"
//If there is a label attribute, create a label
,optAddLabel
//If there is hint attribute, create an extra icon
......
......@@ -121,14 +121,14 @@ layoutRecord = sequenceLayouts
layoutCons :: LayoutRule
layoutCons = sequenceLayouts
[setUIType UIContainer
,setUIAttributes (directionAttr Horizontal)
,addCSSClass "itasks-cons"
,layoutSubUIs (SelectAND SelectDescendents (SelectByType UICons)) layoutCons
]
layoutVarCons :: LayoutRule
layoutVarCons = sequenceLayouts
[setUIType UIContainer
,setUIAttributes (directionAttr Horizontal)
,addCSSClass "itasks-var-cons"
,layoutSubUIs (SelectByPath [0]) (setUIAttributes (widthAttr WrapSize)) //Make the constructor selection wrapping
,layoutSubUIs (SelectAND SelectDescendents (SelectByType UIVarCons)) layoutVarCons
]
......
......@@ -5,6 +5,7 @@
*/
/* You can customize these options to create branded iTask applications */
*.itasks-viewport {
display: flex;
margin: 0;
overflow: auto;
font-family: tahoma, arial, verdana, sans-serif;
......@@ -148,11 +149,11 @@
transform: translateX(-8px);
}
*.itasks-viewport div, *.itasks-viewport input, *.itasks-viewport td, *.itasks-viewport th, *.itasks-viewport select {
min-height: fit-content;
font-size: 9pt;
}
div.itasks-loader {
display: flex;
font-size: 16pt;
font-style: italic;
text-align: center;
......@@ -180,99 +181,62 @@ div.itasks-exception {
text-align: center;
}
.itasks-vcontainer, .itasks-hcontainer {
display: flex;
align-items: flex-start;
}
.itasks-vcontainer {
flex-direction: column;
}
.itasks-vcontainer > .itasks-flex-width {
/* Sizing children of vertical containers */
.itasks-viewport > .itasks-flex-width,
.itasks-panel > .itasks-inner > .itasks-flex-width,
.itasks-window > .itasks-inner > .itasks-flex-width,
.itasks-container > .itasks-flex-width {
align-self: stretch;
}
.itasks-vcontainer > .itasks-flex-height {
.itasks-viewport > .itasks-flex-height,
.itasks-panel > .itasks-inner > .itasks-flex-height,
.itasks-window > .itasks-inner > .itasks-flex-height,
.itasks-container > .itasks-flex-height {
flex: 1;
}
.itasks-vcontainer > .itasks-wrap-height {
flex-shrink: 0;
min-height: fit-content;
}
.itasks-vcontainer > .itasks-wrap-height * {
min-height: fit-content;
}
.itasks-hcontainer {
flex-direction: row;
.itasks-viewport > .itasks-wrap-height,
.itasks-panel > .itasks-inner > .itasks-wrap-height,
.itasks-window > .itasks-inner > .itasks-wrap-height,
.itasks-container > .itasks-wrap-height {
flex-shrink: 0;
}
.itasks-hcontainer > .itasks-flex-width {
flex-basis: auto;
}
/* Sizing children of horizontal containers */
.itasks-horizontal-container > .itasks-flex-width,
.itasks-form-item > .itasks-flex-width,
.itasks-toolbar > .itasks-flex-width,
.itasks-buttonbar > .itasks-flex-width,
.itasks-cons > .itasks-flex-width,
.itasks-var-cons > .itasks-flex-width,
.itasks-listitem > .itasks-flex-width,
.itasks-listitem-controls > .itasks-flex-width {
flex: 1;
}
.itasks-hcontainer > .itasks-flex-height {
.itasks-horizontal-container > .itasks-flex-height,
.itasks-form-item > .itasks-flex-height,
.itasks-toolbar > .itasks-flex-height,
.itasks-buttonbar > .itasks-flex-height,
.itasks-cons > .itasks-flex-height,
.itasks-var-cons > .itasks-flex-height,
.itasks-listitem > .itasks-flex-height,
.itasks-listitem-controls > .itasks-flex-height {
align-self: stretch;
}
.itasks-hcontainer > .itasks-wrap-width {
.itasks-horizontal-container > .itasks-wrap-width,
.itasks-form-item > .itasks-wrap-width,
.itasks-toolbar > .itasks-wrap-width,
.itasks-buttonbar > .itasks-wrap-width,
.itasks-cons > .itasks-wrap-width,
.itasks-var-cons > .itasks-wrap-width,
.itasks-listitem > .itasks-wrap-width,
.itasks-listitem-controls > .itasks-wrap-width {
flex-shrink: 0;
min-width: fit-content;
}
.itasks-hcontainer > .itasks-wrap-width * {
min-width: fit-content;
}
/* Transititional classes for alignment */
.itasks-vcontainer.itasks-halign-left {
align-items: start;
}
.itasks-vcontainer.itasks-halign-center {
align-items: center;
}
.itasks-vcontainer.itasks-halign-right {
align-items: end;
}
.itasks-vcontainer.itasks-valign-top {
justify-content: flex-start;
}
.itasks-vcontainer.itasks-valign-middle {
justify-content: center;
}
.itasks-vcontainer.itasks-valign-bottom {
justify-content: flex-end;
}
.itasks-hcontainer.itasks-halign-left {
justify-content: flex-start;
}
.itasks-hcontainer.itasks-halign-center {
justify-content: center;
}
.itasks-hcontainer.itasks-halign-right {
justify-content: flex-end;
}
.itasks-hcontainer.itasks-valign-top {
align-items: start;
}
.itasks-hcontainer.itasks-valign-middle {
align-items: center;
}
.itasks-hcontainer.itasks-valign-bottom {
align-items: end;
flex-basis: auto;
}
/* Styles for unlayouted content */
......@@ -390,14 +354,25 @@ div.itasks-exception {
margin: 5px 5px 10px 5px;
}
.itasks-form-item {
.itasks-container.itasks-form-item {
margin: 2px 4px 2px 4px;
flex-direction: row;
align-items: start;
flex: 0;
align-self: stretch;
}
.itasks-form-item .itasks-icon {
margin-left: 5px;
}
.itasks-container.itasks-cons, .itasks-container.itasks-var-cons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: start;
}
.itasks-frame-compact-outer {
flex: 1;
align-self: stretch;
......@@ -440,16 +415,30 @@ div.itasks-exception {
}
.itasks-inner {
display: flex;
flex-direction: column;
flex: 1;
align-items: flex-start;
}
/* Minimal containers */
.itasks-container {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Default flexible sizes */
flex: 1;
align-self: stretch;
}
.itasks-horizontal-container {
flex-direction: row;
}
.itasks-vertical-container {
flex-direction: column;
}
/* Panels */
.itasks-panel {
color: #000;
......@@ -478,7 +467,7 @@ div.itasks-exception {
flex-direction: column;
}
.itasks-tabset * {
.itasks-tabset > * {
align-self: stretch;
}
......@@ -651,11 +640,17 @@ div.itasks-exception {
}
/* Toolbars, button bars & menu's */
.itasks-toolbar {
.itasks-toolbar, .itasks-buttonbar {
align-self: stretch;
flex: 0;