Commit d4634a4a authored by Bas Lijnse's avatar Bas Lijnse

Small UI fixes in the builtin editors

parent b40ece6a
Pipeline #3904 skipped
......@@ -27,17 +27,22 @@ itasks.HtmlView = {
};
itasks.ProgressBar = {
domTag: 'progress',
width: 'flex',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.innerHTML = me.text;
el.min = 0;
el.max = 100;
if(typeof me.value == 'number') {
el.value = me.value * 100;
el.value = me.value;
}
},
setValue: function(value) {
this.domEl.value = value * 100;
}
onAttributeChange:function(name,value) {
switch(name) {
case 'value': this.domEl.value = value; break;
case 'text': this.domEl.innerHTML = value; break;
}
}
};
......@@ -226,14 +226,20 @@ itasks.Slider = {
var me = this,
el = this.domEl;
el.type = 'range';
el.min = me.minValue | 0;
el.max = me.maxValue | 10;
el.min = me.min;
el.max = me.max;
el.value = me.value;
el.addEventListener('change',function(e) {
me.doEditEvent(me.taskId,me.editorId, (e.target.value | 0),true);
});
}
},
onAttributeChange: function(name,value) {
var me = this;
if(name == 'value') {
me.domEl.value = value;
}
}
};
itasks.Button = {
domTag: 'a',
......@@ -264,6 +270,9 @@ itasks.Button = {
el.appendChild(me.label);
}
el.addEventListener('click',function(e) {
if(typeof(me.value) == 'boolean') { //Toggle edit buttons
me.value = !me.value;
}
if(me.enabled) {
me.doEditEvent(me.taskId,me.editorId,me.value);
}
......
......@@ -235,11 +235,13 @@ itasks.Tree = {
}
label.innerHTML = option.text;
label.addEventListener('click',function(e) {
me.setValue([option.value]);
me.doEditEvent(me.taskId,me.editorId,["sel",option.value,true]);
},me);
if(me.doubleClickAction) {
label.addEventListener('dblclick',function(e) {
me.setValue([option.value]);
me.doEditEvent(me.taskId,me.editorId,["sel",option.value,true]);
me.doEditEvent(me.doubleClickAction[0],null,me.doubleClickAction[1]);
......@@ -274,6 +276,7 @@ itasks.Tree = {
},
setValue: function(value) {
var me = this;
me.selection.forEach(function(idx) {
me.nodes[idx].classList.remove(me.cssPrefix + 'selected');
});
......
......@@ -521,7 +521,7 @@ derive class iTask FileError
gText{|Scale|} _ (Just {Scale|cur}) = [toString cur]
gText{|Scale|} _ _ = [""]
gEditor{|Scale|} = liftEditor toSlider fromSlider slider
gEditor{|Scale|} = liftEditor toSlider fromSlider (slider 1 5)
where
toSlider {Scale|cur} = cur
fromSlider cur = {Scale|min=1,cur=cur,max=5}
......
......@@ -4,6 +4,7 @@ definition module iTasks.UI.Editor.Builtin
* in the client-side UI framework.
*/
import iTasks.UI.Editor
from Data.Maybe import :: Maybe
from Text.HTML import :: HtmlTag
from iTasks.API.Core.Types import :: Document
......@@ -18,15 +19,16 @@ integerField :: Editor Int
decimalField :: Editor Real
documentField :: Editor Document
checkBox :: Editor Bool
slider :: Editor Int
slider :: Int Int -> Editor Int //Min, max
button :: String -> Editor Bool
label :: Editor String
icon :: Editor String
icon :: Editor (String,Maybe String)
// ## Display components ##
// UITextView, UIHtmlView, UIProgressBar
textView :: Editor String
htmlView :: Editor HtmlTag
progressBar :: Editor Int
progressBar :: Editor (Maybe Int,Maybe String) //Percentage, description
// ## Selection components ##
// UIDropdown, UIRadioGroup, UICheckboxGroup, UIChoiceList, UIGrid, UITree
......
......@@ -6,34 +6,37 @@ import Data.Error, Text.JSON, Text.HTML
import qualified Data.Map as DM
textField :: Editor String
textField = fieldComponent toJSON UITextField
textField = fieldComponent [] toJSON UITextField
integerField :: Editor Int
integerField = fieldComponent toJSON UIIntegerField
integerField = fieldComponent [] toJSON UIIntegerField
decimalField :: Editor Real
decimalField = fieldComponent toJSON UIDecimalField
decimalField = fieldComponent [] toJSON UIDecimalField
documentField :: Editor Document
documentField = fieldComponent toJSON UIDocumentField
documentField = fieldComponent [] toJSON UIDocumentField
passwordField :: Editor String
passwordField = fieldComponent toJSON UIPasswordField
passwordField = fieldComponent [] toJSON UIPasswordField
textArea :: Editor String
textArea = fieldComponent toJSON UITextArea
textArea = fieldComponent [] toJSON UITextArea
checkBox :: Editor Bool
checkBox = fieldComponent toJSON UICheckbox
checkBox = fieldComponent [] toJSON UICheckbox
slider :: Editor Int
slider = fieldComponent toJSON UISlider
slider :: Int Int -> Editor Int
slider min max = fieldComponent [("min",JSONInt min),("max",JSONInt max)] toJSON UISlider
label :: Editor String
label = fieldComponent toJSON UILabel
label = viewComponent (\text -> [("text",JSONString text)]) UILabel
icon :: Editor String
icon = fieldComponent toJSON UIIcon
button :: String -> Editor Bool
button text = fieldComponent [("text",JSONString text)] toJSON UIButton
icon :: Editor (String,Maybe String)
icon = viewComponent (\(text,tooltip) -> [("iconCls",JSONString text),("tooltip",maybe JSONNull JSONString tooltip)]) UIIcon
dropdown :: Bool -> Editor ([String], [Int])
dropdown multi = choiceComponent (const 'DM'.newMap) id JSONString (\o i -> i >= 0 && i < length o) UIDropdown multi
......@@ -67,23 +70,23 @@ where
| idx == id = True
| otherwise = or (map (checkNode idx) children)
progressBar :: Editor Int
progressBar = integerField
progressBar :: Editor (Maybe Int, Maybe String)
progressBar = viewComponent (\(amount,text) -> [("value",maybe JSONNull JSONInt amount),("text",maybe JSONNull JSONString text)]) UIProgressBar
textView :: Editor String
textView = fieldComponent toJSON UITextView
textView = viewComponent (\text -> [("value",JSONString text)]) UITextView
htmlView :: Editor HtmlTag
htmlView = fieldComponent (JSONString o toString) UIHtmlView
htmlView = viewComponent (\html -> [("value",JSONString (toString html))]) UIHtmlView
//Field like components for which simply knowing the UI type is sufficient
fieldComponent toValue type = {Editor|genUI=genUI,onEdit=onEdit,onRefresh=onRefresh}
fieldComponent attr toValue type = {Editor|genUI=genUI,onEdit=onEdit,onRefresh=onRefresh}
where
genUI dp val vst=:{VSt|taskId,mode,optional}
# val = if (mode =: Enter) JSONNull (toValue val)
# valid = if (mode =: Enter) optional True //When entering data a value is initially only valid if it is optional
# mask = FieldMask {touched = False, valid = valid, state = val}
# attr = 'DM'.unions [optionalAttr optional, taskIdAttr taskId, editorIdAttr (editorId dp), valueAttr val]
# attr = 'DM'.unions ['DM'.fromList attr,optionalAttr optional, taskIdAttr taskId, editorIdAttr (editorId dp), valueAttr val]
= (Ok (uia type attr,mask),vst)
onEdit dp (tp,e) val mask vst=:{VSt|optional}
......@@ -97,6 +100,20 @@ where
| old === new = (Ok (NoChange,mask),new,vst)
| otherwise = (Ok (ChangeUI [SetAttribute "value" (toValue new)] [],mask),new,vst)
//Components which cannot be edited
viewComponent toAttributes type = {Editor|genUI=genUI,onEdit=onEdit,onRefresh=onRefresh}
where
genUI dp val vst
= (Ok (uia type ('DM'.fromList (toAttributes val)), FieldMask {touched = False, valid = True, state = JSONNull}),vst)
onEdit dp (tp,e) val mask vst
= (Error "Edit event for view component",val,vst)
onRefresh dp new old mask vst
= case [SetAttribute nk nv \\ ((ok,ov),(nk,nv)) <- zip (toAttributes old,toAttributes new) | ok == nk && ov =!= nv] of
[] = (Ok (NoChange,mask),new,vst)
changes = (Ok (ChangeUI changes [],mask),new,vst)
//Choice components that have a set of options
choiceComponent attr getOptions toOption checkBounds type multi = {Editor|genUI=genUI,onEdit=onEdit,onRefresh=onRefresh}
where
......
......@@ -76,7 +76,9 @@ testFullSuite suite=:{TestSuite|tests=tests}
//UTILITY TASKS
testEditor :: (Editor a) a EditMode -> Task a | iTask a
testEditor editor model mode
= interact "Editor test" mode null (const ((),model)) (\v l _ -> (l,v,Nothing)) (\_ l v -> (l,v,Nothing)) (Just editor) @ snd
= (interact "Editor test" mode null (const ((),model)) (\v l _ -> (l,v,Nothing)) (\_ l v -> (l,v,Nothing)) (Just editor) @ snd
>&> viewSharedInformation "Editor value" [ViewAs (toString o toJSON)] @? tvFromMaybe
) <<@ ApplyLayout (setAttributes (directionAttr Horizontal))
testCommonInteractions :: String -> Task a | iTask a
testCommonInteractions typeName
......
......@@ -10,7 +10,7 @@ testBuiltinEditors :: TestSuite
testBuiltinEditors = testsuite "Builtin editors" "These tests check if the builtin editors work"
[testTextField,testTextArea,testPasswordField
,testIntegerField,testDecimalField,testDocumentField
,testCheckbox,testSlider,testLabel,testIcon
,testCheckbox,testSlider,testButton,testLabel,testIcon
,testTextView,testHtmlView,testProgressBar
,testDropdown,testCheckGroup,testChoiceList,testGrid,testTree
]
......@@ -53,7 +53,12 @@ where
testSlider = itest "Slider" "Check if the slider is ok" "You should be able to edit" tut
where
tut :: Task Int
tut = testEditor slider 3 Update
tut = testEditor (slider 1 5) 3 Update
testButton = itest "Button" "Check if the button is ok" "You should be able to edit" tut
where
tut :: Task Bool
tut = testEditor (button "Click") False Update
testLabel = itest "Label" "Check if the label looks ok" "You cannot edit a label" tut
where
......@@ -62,8 +67,8 @@ where
testIcon = itest "Icon" "Check if the icon looks ok" "You cannot edit an icon" tut
where
tut :: Task String
tut = testEditor icon "warning" Update
tut :: Task (String,Maybe String)
tut = testEditor icon ("icon-valid",Just "Icon with a tooltip!") Update
testTextView = itest "Text view" "Check if text looks ok" "You cannot edit a text view" tut
where
......@@ -77,8 +82,8 @@ where
testProgressBar = itest "Progress bar" "Check if hte progress bar looks ok" "You cannot edit the progress" tut
where
tut :: Task Int
tut = testEditor progressBar 90 Update
tut :: Task (Maybe Int,Maybe String)
tut = testEditor progressBar (Just 90,Just "Almost done") Update
testDropdown = itest "Dropdown" "Check if the dropdown works" "You should be able to edit" tut
where
......
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