Commit 03a3350a authored by Steffen Michels's avatar Steffen Michels

Merge branch '2-fullscreen-view-in-manageworklist-ui' into 'master'

Resolve "Fullscreen view in manageWorklist UI"

Closes #2

See merge request clean-and-itasks/iTasks-SDK!151
parents 17db4da8 b7d29fbd
......@@ -72,6 +72,18 @@ where
choices = ["string" +++ toString i\\i<-[0..20]]
```
## Panels
In some cases, such as when you apply a title, the user interface is automatically lifted to a panel.
However, this can also be done manually with the option of making the panel fullscreenable.
```clean
toPanel :: Bool -> Layout
:: InPanel = InPanel Bool
```
If the boolean flag is set to true, the panel includes a small icon (![](Libraries/iTasks/UI/WebPublic/css/icons/fullscreen.png)) on the bottom right that, when clicked, makes the panel full screen.
If the small icon is clicked again, the panel shrinks back to the original size again.
## Conclusion
In this guide we have shown how you how to decorate tasks with layout combinators so that you can change the way they appear in the client.
......
implementation module iTasks.Extensions.Admin.WorkflowAdmin
import iTasks
import StdMisc, Data.Tuple, Text, Data.Either, Data.Functor
import StdMisc, Data.Tuple, Text, Data.Either, Data.Functor, Data.Func
import iTasks.Internal.SDS
import iTasks.Internal.Serialization
import iTasks.Internal.Store
......@@ -202,9 +202,11 @@ where
layoutManageWork = foldl1 sequenceLayouts
//Split the screen space
[arrangeWithSideBar 0 TopSide 200 True
//Layout all dynamically added tasks as tabs
,layoutSubUIs (SelectByPath [1]) (arrangeWithTabs False)
[ arrangeWithSideBar 0 TopSide 200 True
//Layout all dynamically added tasks as tabs
, layoutSubUIs (SelectByPath [1]) (arrangeWithTabs False)
, layoutSubUIs (SelectByPath [1]) $
layoutSubUIs (SelectByDepth 1) (setUIAttributes $ 'DM'.put "fullscreenable" (JSONBool True) 'DM'.newMap)
]
addNewTask :: !(SharedTaskList ()) -> Task ()
......
......@@ -10,6 +10,7 @@ from iTasks.UI.Prompt import :: Title, :: Label, :: Icon
from iTasks.UI.Tune import class tune
from iTasks.WF.Definition import :: Task
/**
* Create a tabset with all child items as separate tabs
* The flag denotes whether close buttons should be lifted to the tabs
......@@ -90,7 +91,7 @@ instance tune ArrangeHorizontal Task
//Changing container types
toContainer :: Layout
toPanel :: Layout
toPanel :: Bool -> Layout
toWindow :: UIWindowType UIVAlign UIHAlign -> Layout
toEmpty :: Layout
......@@ -100,7 +101,7 @@ InFloatingWindow :== ToWindow FloatingWindow AlignMiddle AlignCenter
InNotificationBubble :== ToWindow NotificationBubble AlignTop AlignRight
instance tune ToWindow Task
:: InPanel = InPanel //Indicate that a task should be wrapped in a panel
:: InPanel = InPanel Bool //Indicate that a task should be wrapped in a panel
instance tune InPanel Task
:: InContainer = InContainer //Indicate that a task should be wrapped in a panel
......
......@@ -211,8 +211,10 @@ toEmpty = setUIType UIEmpty
toContainer :: Layout
toContainer = setUIType UIContainer
toPanel :: Layout
toPanel = setUIType UIPanel
toPanel :: Bool -> Layout
toPanel fs = sequenceLayouts
(setUIType UIPanel)
(if fs (setUIAttributes ('DM'.put "fullscreenable" (JSONBool True) 'DM'.newMap)) idLayout)
actionToButton :: Layout
actionToButton = foldl1 sequenceLayouts
......@@ -287,7 +289,7 @@ where
instance tune InPanel Task
where
tune InPanel t = tune (ApplyLayout toPanel) t
tune (InPanel fullscreenable) t = tune (ApplyLayout (toPanel fullscreenable)) t
instance tune InContainer Task
where
......
......@@ -74,3 +74,6 @@
.icon-finish {
background-image: url('#{$icon-path}flag.png') !important;
}
.icon-fullscreen {
background-image: url('#{$icon-path}fullscreen.png') !important;
}
This diff was suppressed by a .gitattributes entry.
......@@ -64,6 +64,8 @@
background-image: url("/css/icons/cog.png") !important; }
*.itasks-viewport .icon-finish {
background-image: url("/css/icons/flag.png") !important; }
*.itasks-viewport .icon-fullscreen {
background-image: url("/css/icons/fullscreen.png") !important; }
*.itasks-viewport [tooltip] {
position: relative;
display: inline-block; }
......
itasks.Container = {
cssCls: 'container',
initDOMEl: function() {
if(this.baseCls) {
this.domEl.classList.add(this.baseCls);
var me = this;
if(me.baseCls) {
me.domEl.classList.add(me.baseCls);
}
if(this.attributes.resizable){
var me = this;
if(me.attributes.resizable){
me.domEl.style.position = 'relative';
function resizer(me, c, w, h, l, r, t, b, rw, rh){
......@@ -94,6 +93,49 @@ itasks.Panel = {
if(me.baseCls) {
me.domEl.classList.add(me.attributes.baseCls);
}
//Fullscreenable
if(me.attributes.fullscreenable){
me.domEl.style.position = 'relative';
var fullscreener = document.createElement('a');
var button = document.createElement('div');
button.classList.add(me.cssPrefix + "button-icon");
button.classList.add("icon-fullscreen");
fullscreener.appendChild(button);
fullscreener.style.position = 'absolute';
fullscreener.style.bottom = 0;
fullscreener.style.right = 0;
fullscreener.href = '#';
me.fullscreen = false;
fullscreener.onclick = function () {
if(me.fullscreen){
me.domEl.style.position = 'relative';
me.domEl.style.top = null;
me.domEl.style.left = null;
me.domEl.style.right = null;
me.domEl.style.bottom = null;
me.domEl.style.width = null;
me.domEl.style.height = null;
fullscreener.style.zIndex = null;
me.domEl.style.zIndex = null;
me.fullscreen = false;
} else {
me.domEl.style.position = 'absolute';
me.domEl.style.top = 0;
me.domEl.style.left = 0;
me.domEl.style.right = 0;
me.domEl.style.bottom = 0;
me.domEl.style.width = '100%';
me.domEl.style.height = '100%';
fullscreener.style.zIndex = 999;
me.domEl.style.zIndex = 998;
me.fullscreen = true;
console.log(me.oldstyle);
}
};
me.domEl.appendChild(fullscreener);
}
}
};
itasks.TabSet = {
......
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