Commit 39bc3f61 authored by Bas Lijnse's avatar Bas Lijnse

Fixed incidone main css and login flow

parent 1bc0bbc7
Pipeline #30626 passed with stage
in 5 minutes and 49 seconds
......@@ -9,7 +9,12 @@ import Incidone.ActionManagementTasks
import Incidone.Util.TaskPatterns
keepWatch :: [Workspace -> Task ()]
keepWatch = [browseCommunications,browseIncidents,browseContacts,browseActions]
keepWatch =
[\ws -> browseCommunications ws <<@ Title "Communication" <<@ Icon "communication"
,\ws -> browseIncidents ws <<@ Title "Incidents" <<@ Icon "incidents"
,\ws -> browseContacts ws <<@ Title "Contacts" <<@ Icon "contacts"
,\ws -> browseActions ws <<@ Title "Actions" <<@ Icon "actions"
]
/*
* The communication dashboard shows all ongoing communication.
......@@ -27,7 +32,7 @@ browseCommunications ws
] @! ()
where
selectCommunication
= Icon "communication" @>> Title "Communication" @>> enterChoiceWithSharedAs [ChooseFromGrid id] allCommunications communicationIdentity
= enterChoiceWithSharedAs [ChooseFromGrid id] allCommunications communicationIdentity
openCommunication ws communicationNo
= addToWorkspace ((doOrClose (updateCommunication communicationNo)) <<@ InWindow) ws @! ()
......@@ -52,7 +57,7 @@ browseIncidents ws
]
)
( withSelection viewNoSelection viewIncidentDetails
) <<@ (ArrangeWithSideBar 1 RightSide True) <<@ (Icon "incidents") <<@ (Title "Incidents")
) <<@ (ArrangeWithSideBar 1 RightSide True)
@! ()
where
selectIncident
......@@ -74,7 +79,7 @@ browseContacts ws
]
)
( withSelection viewNoSelection viewDetails
) <<@ (ArrangeWithSideBar 1 RightSide True) <<@ (Icon "contacts") <<@ (Title "Contacts")
) <<@ (ArrangeWithSideBar 1 RightSide True)
@! ()
where
viewDetails (Left contactNo) = viewContactDetails contactNo
......@@ -109,7 +114,7 @@ where
Just taskId = workOnActionItem taskId
Nothing = viewInformation [] ()
)
) <<@ (ArrangeWithSideBar 0 LeftSide True) <<@ (Icon "actions") <<@ (Title "Actions")
) <<@ (ArrangeWithSideBar 0 LeftSide True)
body {
background: url('login-background.jpg') center center no-repeat;
background: url('/login-background.jpg') center center no-repeat;
/* Set colors */
--panel-header-base-color: #fb7322;
--panel-header-text-color: #fff;
--panel-border-color: #fb7322;
--window-header-base-color: #004584;
--window-header-text-color: #fff;
--window-border-color: #fb7322;
--toolbar-base-color: #fb7322;
--select-base-color: #004584;
--panel-header-base-color-lighter: #fc9b61;
--panel-header-base-color-lighter2: #fdb286;
--panel-header-base-color-darker: #b44503;
--panel-header-base-color-darker2: #e65804;
--window-header-base-color-lighter: #0066c4;
--toolbar-base-color-lighter: #fb8036;
--toolbar-base-color-darker: #d95404;
--toolbar-base-color-darker2: #fb6309;
--choicegrid-up-color: #fb833b;
--choicegrid-down-color: #fca36d;
}
.identify-app {
width: 300px;
height: 55px;
background: url('login-screen.png') top left no-repeat;
background: url('/login-screen.png') top left no-repeat;
}
.identify-app div {
......@@ -12,123 +36,123 @@ body {
}
.summary-bar {
color: #fff;
background: #004584 url('summary-bar.png') top left no-repeat;
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');
background-image: url('/icons/incident.png');
}
.icon-communication {
background-image: url('icons/communication.png');
background-image: url('/icons/communication.png');
}
.icon-new {
background-image: url('icons/new.png');
background-image: url('/icons/new.png');
}
.icon-incident {
background-image: url('icons/incident.png');
background-image: url('/icons/incident.png');
}
.icon-inbound {
background-image: url('icons/inbound.png');
background-image: url('/icons/inbound.png');
}
.icon-outbound {
background-image: url('icons/outbound.png');
background-image: url('/icons/outbound.png');
}
.icon-phone-call {
background-image: url('icons/phone-call.png');
background-image: url('/icons/phone-call.png');
}
.icon-inmarsat-call {
background-image: url('icons/inmarsat-call.png');
background-image: url('/icons/inmarsat-call.png');
}
.icon-vhf-call {
background-image: url('icons/vhf-call.png');
background-image: url('/icons/vhf-call.png');
}
.icon-dsc-message {
background-image: url('icons/dsc-message.png');
background-image: url('/icons/dsc-message.png');
}
.icon-406mhz-message {
background-image: url('icons/406mhz-message.png');
background-image: url('/icons/406mhz-message.png');
}
.icon-p2000-message {
background-image: url('icons/p2000-message.png');
background-image: url('/icons/p2000-message.png');
}
.icon-e-mail-message {
background-image: url('icons/email-message.png');
background-image: url('/icons/email-message.png');
}
.icon-basic-information {
background-image: url('icons/basic-information.png');
background-image: url('/icons/basic-information.png');
}
.icon-details {
background-image: url('icons/details.png');
background-image: url('/icons/details.png');
}
.icon-contacts {
background-image: url('icons/contacts.png');
background-image: url('/icons/contacts.png');
}
.icon-contact-person {
background-image: url('icons/contact-person.png');
background-image: url('/icons/contact-person.png');
}
.icon-contact-vessel {
background-image: url('icons/contact-vessel.png');
background-image: url('/icons/contact-vessel.png');
}
.icon-contact-surfer {
background-image: url('icons/contact-surfer.png');
background-image: url('/icons/contact-surfer.png');
}
.icon-contact-diver {
background-image: url('icons/contact-diver.png');
background-image: url('/icons/contact-diver.png');
}
.icon-contact-airplane {
background-image: url('icons/contact-airplane.png');
background-image: url('/icons/contact-airplane.png');
}
.icon-contact-helicopter {
background-image: url('icons/contact-helicopter.png');
background-image: url('/icons/contact-helicopter.png');
}
.icon-contact-other {
background-image: url('icons/contact-vessel.png');
background-image: url('/icons/contact-vessel.png');
}
.icon-ais {
background-image: url('icons/ais.png');
background-image: url('/icons/ais.png');
}
.icon-actions {
background-image: url('icons/actions.png');
background-image: url('/icons/actions.png');
}
.icon-action-planned {
background-image: url('icons/action-planned.png');
background-image: url('/icons/action-planned.png');
}
.icon-action-active {
background-image: url('icons/action-active.png');
background-image: url('/icons/action-active.png');
}
.icon-action-completed {
background-image: url('icons/action-completed.png');
background-image: url('/icons/action-completed.png');
}
.icon-action-failed {
background-image: url('icons/action-failed.png');
background-image: url('/icons/action-failed.png');
}
.icon-action-canceled {
background-image: url('icons/action-canceled.png');
background-image: url('/icons/action-canceled.png');
}
.icon-action-compound {
background-image: url('icons/action-compound.png');
background-image: url('/icons/action-compound.png');
}
.icon-map {
background-image: url('icons/map.png');
background-image: url('/icons/map.png');
}
.icon-weather {
background-image: url('icons/weather.png');
background-image: url('/icons/weather.png');
}
.icon-log {
background-image: url('icons/log.png');
background-image: url('/icons/log.png');
}
.icon-photos {
background-image: url('icons/photos.png');
background-image: url('/icons/photos.png');
}
.icon-access {
background-image: url('icons/access.png');
background-image: url('/icons/access.png');
}
.icon-share-to-wall {
background-image: url('icons/share-to-wall.png');
background-image: url('/icons/share-to-wall.png');
}
.icon-log-in {
background-image: url('icons/outbound.png');
background-image: url('/icons/outbound.png');
}
.icon-dismiss {
background-image: url('/img/icons/cancel.png');
......@@ -137,7 +161,7 @@ body {
background-image: url('/img/icons/accept.png');
}
.icon-add-predefined, .icon-add-custom, .icon-add-all, .icon-add-selected {
background-image: url('icons/new.png');
background-image: url('/icons/new.png');
}
.incident-log {
width: 700px;
......@@ -184,7 +208,7 @@ body {
/* Wall dashboards */
.wall-header {
color: #fff;
background: #004584 url('summary-bar.png') top left no-repeat;
background: #004584 url('/summary-bar.png') top left no-repeat;
text-align: right;
text-transform: uppercase;
font-size: 14px;
......
......@@ -55,10 +55,10 @@ where
doAuthenticated :: (User -> Task a) -> Task a | iTask a
doAuthenticated task
= enterCredentials <<@ (ApplyLayout credentialsLayout)
= (enterCredentials <<@ AddCSSClass "login"
>>* [OnAction (Action "Login")
(hasValue (\cred -> verifyCredentials cred >>- executeTask task))
]
]) <<@ (ApplyLayout credentialsLayout)
where
enterCredentials :: Task Credentials
enterCredentials
......@@ -66,7 +66,17 @@ where
||- enterInformation []
//Compact layout before login, full screen afterwards
credentialsLayout = sequenceLayouts [setUIAttributes (titleAttr "Login"), frameCompact]
credentialsLayout = ifHasClass "login" (sequenceLayouts [setUIAttributes (titleAttr "Login"), frameCompact])
ifHasClass name rule = layoutSubUIs
(SelectAND
(SelectByPath [])
(SelectByContains
(SelectAND (SelectByDepth 1) (SelectByAttribute "class" (hasClass name)))
)
) rule
where
hasClass name json = maybe False (isMember name) (fromJSON json)
verifyCredentials :: Credentials -> Task (Maybe User)
verifyCredentials credentials=:{Credentials|username,password}
......@@ -95,10 +105,11 @@ where
workOnTasks = doIndependent tasks <<@ ArrangeWithTabs True
layoutControlDash = sequenceLayouts
[moveSubUIs (SelectByPath [0,0]) [] 1
,moveSubUIs (SelectByPath [0,0]) [] 2
,removeSubUIs (SelectByPath [0])
[removeCSSClass "step-actions"
//layoutSubUIs (SelectByPath [0])
//moveSubUIs (SelectByPath [0,0]) [] 1
//,moveSubUIs (SelectByPath [0,0]) [] 2
// ,removeSubUIs (SelectByPath [0])
,layoutSubUIs (SelectByType UIAction) actionToButton
,addCSSClass "summary-bar"
,setUIType UIContainer
]
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Default iTasks styles -->
<link rel="stylesheet" href="/theme.css" type="text/css" >
<!-- Additional Incidone css -->
<link rel="stylesheet" href="/Incidone.css" type="text/css" >
<!-- ABC interpreter -->
<script type="text/javascript" src="/js/abc-interpreter.js"></script>
<script type="text/javascript" src="/js/itasks-abc-interpreter.js"></script>
<!-- iTasks framework -->
<script type="text/javascript" src="/js/itasks-core.js"></script>
<script type="text/javascript" src="/js/itasks-components-raw.js"></script>
<script type="text/javascript" src="/js/itasks-components-form.js"></script>
<script type="text/javascript" src="/js/itasks-components-display.js"></script>
<script type="text/javascript" src="/js/itasks-components-selection.js"></script>
<script type="text/javascript" src="/js/itasks-components-container.js"></script>
<!-- load iTasks viewport -->
<script type="text/javascript">
window.onload = function() {
itasks.viewport({syncTitle: true}, document.body);
};
</script>
</head>
<body style="width: 100%; height: 100%">
</body>
</html>
This diff is collapsed.
/* Icon definitions */
.icon-help {
background-image: url('#{$icon-path}help.png');
}
.icon-info {
background-image: url('#{$icon-path}information.png') !important;
}
.icon-valid {
background-image: url('#{$icon-path}accept.png') !important;
}
.icon-warning {
background-image: url('#{$icon-path}warning.png') !important;
}
.icon-invalid {
background-image: url('#{$icon-path}exclamation.png') !important;
}
.icon-continue {
background-image: url('#{$icon-path}arrow_right.png');
}
.icon-login, .icon-log-in {
background-image: url('#{$icon-path}tick.png');
}
.icon-logout, .icon-log-out {
background-image: url('#{$icon-path}door_in.png');
}
.icon-view {
background-image: url('#{$icon-path}page.png') !important;
}
.icon-edit {
background-image: url('#{$icon-path}pencil.png') !important;
}
.icon-delete {
background-image: url('#{$icon-path}trash.png') !important;
}
.icon-refresh {
background-image: url('#{$icon-path}refresh.png') !important;
}
.icon-up {
background-image: url('#{$icon-path}move-up.png') !important;
}
.icon-down {
background-image: url('#{$icon-path}move-down.png') !important;
}
.icon-add, .icon-new {
background-image: url('#{$icon-path}add.png') !important;
}
.icon-remove {
background-image: url('#{$icon-path}delete.png') !important;
}
.icon-ok {
background-image: url('#{$icon-path}tick.png') !important;
}
.icon-cancel {
background-image: url('#{$icon-path}cancel.png') !important;
}
.icon-open {
background-image: url('#{$icon-path}document-open.png') !important;
}
.icon-save {
background-image: url('#{$icon-path}document-save.png') !important;
}
.icon-close {
background-image: url('#{$icon-path}cancel.png') !important;
}
.icon-previous {
background-image: url('#{$icon-path}arrow_left.png') !important;
}
.icon-next {
background-image: url('#{$icon-path}arrow_right.png') !important;
}
.icon-preferences {
background-image: url('#{$icon-path}cog.png') !important;
}
.#{$prefix}button {
@if $touchscreen {
font-size: 24px;
padding: 10px;
font-weight: bold;
}
@else {
font-size: 8pt;
padding: 3px;
}
background: -moz-linear-gradient(top, $button-base-color + #101010, $button-base-color);
background: -webkit-linear-gradient(top, $button-base-color + #101010, $button-base-color);
background-repeat: none;
border: 1px solid ($button-base-color - #333);
border-radius: 3px;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
align-items: center;
-webkit-align-items: center;
text-decoration: none;
color: $button-text-color;
flex-shrink: 0;
&:hover {
border-color: $button-base-color - #333;
}
}
.#{$prefix}button-label {
margin: 0 4px;
@if not $touchscreen {
height: 16px;
}
}
.#{$prefix}button-icon {
width: 16px;
height: 16px;
}
.#{$prefix}button-disabled {
color: $button-text-color + #aaa;
background: -moz-linear-gradient(top, $button-base-color + #101010, $button-base-color - #222);
background: -webkit-linear-gradient(top, $button-base-color + #101010, $button-base-color - #222);
}
.#{$prefix}button-disabled:hover {
border-color: $button-base-color - #333;
}
.#{$prefix}button-disabled .#{$prefix}button-icon {
opacity: 0.5;
}
.#{$prefix}prompt {
border: #999 solid;
border-width: 0 0 1px 0;
min-height: fit-content;
}
.#{$prefix}header {
font-weight: bold;
font-size: 11px;
height: 25px;
align-self: stretch;
a.close {
float: right;
color: $panel-header-text-color;
display: inline-block;
position: relative;
margin: 4px 4px 0 0;
top: 0px;
font-weight: bold;
font-size: 8px;
line-height: 8px;
background: $panel-header-base-color + #222;
border: 1px solid $panel-header-text-color;
border-radius: 2px;
padding: 0 4px 2px 4px;
text-decoration: none;
}
span {
float: left;
margin: 4px 0 0 4px;
}
}
.#{$prefix}inner {
flex: 1;
}
/* Panels */
.#{$prefix}panel {
color: $canvas-text-color;
background-color: $canvas-base-color;
border: 1px solid $panel-border-color;
display: flex;
flex-direction: column;
> .#{$prefix}header {
color: $panel-header-text-color;
background-color: $panel-header-base-color;
background: -moz-linear-gradient(top, ($panel-header-base-color + #222) 0%, $panel-header-base-color 100%);
background: -webkit-linear-gradient(top, ($panel-header-base-color + #222) 0%, $panel-header-base-color 100%);
}
}
.#{$prefix}framed {
border-radius: 5px;
}
/* Tabs */
.#{$prefix}tabset {
display: flex;
align-items: stretch;
flex-direction: column;
}
.#{$prefix}tabbar {
text-align: left;
list-style: none;
margin: 0;
padding: 0 10px;
line-height: 24px;
position: relative;
min-height: 24px;
background: -moz-linear-gradient(top, $panel-header-base-color + #323232, $panel-header-base-color);
background: -webkit-linear-gradient(top, $panel-header-base-color + #323232, $panel-header-base-color);
overflow: hidden;
}
.#{$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}tabbar li {
margin: 0;
padding: 0 10px;
border: 1px solid $tab-border-color;
background: $tab-base-color - #131313;
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.#{$prefix}tabbar li a {
color: $tab-text-color;
text-decoration: none;
}
.#{$prefix}tabbar li:before,
.#{$prefix}tabbar li:after {
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
border: 1px solid $tab-border-color;
}
.#{$prefix}tabbar li:before {
left: -6px;
border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 ($tab-base-color - #131313);
}
.#{$prefix}tabbar li:after {
right: -6px;
border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 ($tab-base-color - #131313);
}
.#{$prefix}tabbar li.#{$prefix}selected {
background: $tab-base-color;
color: $tab-text-color;
z-index: 2;
border-bottom-color: $tab-base-color;
}
.#{$prefix}tabbar li.#{$prefix}selected:before {
box-shadow: 2px 2px 0 $tab-base-color;
}
.#{$prefix}tabbar li.#{$prefix}selected:after {
box-shadow: -2px 2px 0 $tab-base-color;
}
.#{$prefix}tabbar 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}tabicon {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 3px 0 0;
position: relative;
top: 3px;
}
.#{$prefix}tabitems {
z-index: 2;
border: 1px solid $tab-border-color;
border-top-width: 0;
background-color: $canvas-base-color;
flex: 1;
}
.#{$prefix}tabitem {
display: none;
}
.#{$prefix}tabitem.#{$prefix}selected {
display: flex;
border-top: 0;
}
/* Windows */
.#{$prefix}floating-window, .#{$prefix}notification-bubble {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
display: flex;
flex-direction: column;
> .#{$prefix}inner {
overflow: auto;
}
}
.#{$prefix}floating-window {
color: $canvas-text-color;
background-color: $canvas-base-color;
border: 1px solid $window-border-color;
border-radius: 5px;
box-shadow: 0 5px 5px rgba(0,0,0,0.5);
> .#{$prefix}header {
color: $window-header-text-color;
background-color: $window-header-base-color;
background: -moz-linear-gradient(top, ($window-header-base-color + #222) 0%, $window-header-base-color 100%);
background: -webkit-linear-gradient(top, ($window-header-base-color + #222) 0%, $window-header-base-color 100%);
}
}
.#{$prefix}notification-bubble {
background-color: $canvas-base-color;
border: 3px solid $window-header-base-color;
border-radius: 10px;
opacity: 0.9;
> .#{$prefix}header {
color: $window-header-text-color;
background-color: $window-header-base-color;
}