PEEK Mobile Theme Documentation

PEEK Mobile Theme DocumentationRelease 0.0.0

Synerty

Sep 19, 2017

Contents:

1 Overview 3

2 Design Guidelines 7

3 Peek Screens 13

4 Generic Sections 21

5 Plugin Screens 41

i

ii

PEEK Mobile Theme Documentation, Release 0.0.0

The Peek Mobile Theme will style the Peek app built upon Bootstrap.

Contents: 1


2 Contents:

3


CHAPTER 1

Overview

4 Chapter 1. Overview


The main aim of the Peek application is to display and transmit data.

What is Peek

Peek is a semi distributed pluggable python platform.

Plugins are installed across the peek services and communicate with other plugins to retrieve, transmit, store or displaydata.

Peek provides a platform for Python similar to the functionality JBOSS provides for JAVA. (Or at least that is in theintention, it’s early days)

The Big Bang

Peek was created and is maintained by Synerty to be a distributed, pluggable python platform that provides many ofthe core services needed for enterprise applications.

We wanted to integrate smaller pieces of code, that can leverage different existing boilerplate code which the platformprovides. For example, services for parallel processing or services for business integrations.

The Peek Platform allows developers to better write and integrate smaller units of code.

Synerty uses the Peek platform to provide scalable enterprise grade applications to the power utilities sector.

Bootstrap

The scss for the peek app is based upon bootstrap. For more detail to bootstrap documentation please visit BootStrap.

The bootstrap classes that are related to the layouts will only work on HTML, not NativeScript. Therefore the themewill avoid selecting by bootstrap classes that are related to layouts.

The looks and feel classes are to be used. These will need to be styled from scratch for NativeScript.

The scss will be structured in such a way to ignore hierarchy and tag selection.

Note: NativeScript does not use Bootstrap for layout.

NativeScript User Interface

The user interface of NativeScript mobile apps consists of pages. Typically, the design of the user interface is developedand stored in XML files, styling is done via CSS and the business logic is developed and stored in JavaScript orTypeScript files.

1.1. What is Peek 5

https://www.synerty.com

https://www.synerty.com

http://getbootstrap.com

https://docs.nativescript.org/ui/basics


6 Chapter 1. Overview

CHAPTER 2

Design Guidelines

Design Objective

The objective of this project is to stylise the existing layout to make it very impressive without changing the HTML /javascript of a page to a large extent. The job mainly involves CSS/SCSS upgrade to the base Bootstrap theme.

This app will be viewed predominately during the day. The design and layout must be clear to read in very brightsunlight.

7


8 Chapter 2. Design Guidelines


2.1. Design Objective 9


Design Overview



Design requirements

1. Data must be

(a) Readable in daylight

(b) Without transparent backgrounds

2. Large icons with text in the icons on home page

3. Home page icons need to be more like apple icons

4. Home page design must be impressive

5. All screens do not need to have the same background

6. Other screens must have static background to avoid distractions

7. Use Nodal background as used in Peek App Branding

8. Each icon on the home screen represents and App / Plugin and the background image for each App can changewhen a user clicks into it, hence having its own subtle branding but still share allot of common elements in theentire app.

Design restrictions

1. Design must not be dark or have a dark background

Branding

Logo

Colours

2.3. Branding 11


Fonts

Source (Google fonts): Play

Platform

Operating system

iOS, Android and Web.

Future development: Microsoft app.

Devices

The application has been developed for screens of a resolution greater than, 1136 x 640 pixels. This is the iPhone 5resolution.

Note: The application will function on devices with lower resolution but may not display correctly.


https://fonts.google.com/specimen/Play

CHAPTER 3

Peek Screens

This section describes the styling of the built in peek platform displays.

Title Bar

The Title Bar is fixed to the top of the screen.

The buttons remain a fixed size throughout a responsive lifecycle.

Plugins can add buttons after the “Home” button on the left, or on the right of the Title Bar.

The buttons on the right of the Title Bar will range from none to three.

The Title Bar will contain no more than four buttons.

The centralized title remains a single line and truncates a ... if the line exceeds the minimum screen width.

The title has a fixed width of 40px.

The Title Bar is unique, therefore the classes used will be specific for the Title Bar.

Classes

The .peek-title-bar class contains the classes specific to the Title Bar.

.peek-title-bar{/* Contains the Title Bar classes */

...

}

13


.title-bar-btn{/* Contains the button attributes unique to the Title Bar */

...

}.title-bar-title{/* Contains the title attributes unique to the Title Bar */

...

}}.peek-mobile-page-contents{/* Contains the padding to stop the screens being covered by the title-bar */

...

}

SCSS Files

The Title Bar style classes are found in the _title_bar.scss.

The Title Bar HTML layout classes are found in the _title_bar.web.scss.

The Title Bar NativeScript layout classes are found in the _title_bar.ns.scss.

HTML

<div class="peek-title-bar"[class.bg-danger]="!vortexIsOnline">

<div class="btn-group pull-left"role="group">

<button class="title-bar-btn"[routerLink]="['/']">

Home

</button></div><div class="title-bar-title pull-left">{{title}}

</div><div class="btn-group pull-right"

role="group"><button class="title-bar-btn"

*ngFor="let link of rightLinks"[routerLink]="[link.resourcePath]">

{{linkTitle(link)}}

</button></div>

</div>

14 Chapter 3. Peek Screens


NativeScript

<GridLayout class="peek-title-bar"[class.bg-danger]="!vortexIsOnline"rows="auto" columns="auto, *, auto">

<Button class="btn" col="0" row="0"text="Home"[nsRouterLink]="['/']">

</Button>

<Button class="btn"

*ngFor="let link of leftLinks"col="0" row="0"[text]="linkTitle(link)"[nsRouterLink]="[link.resourcePath]">

</Button>

<Label class="title"col="1" row="0"[text]="title">

</Label>

<Button class="btn"

*ngFor="let link of rightLinks"col="2" row="0"[text]="linkTitle(link)"[nsRouterLink]="[link.resourcePath]">

</Button></GridLayout>

Home Screen

The Home Screen is a unique screen in Peek that displays a link to available plugins that have front-ends.

3.2. Home Screen 15


Classes

The .peek-home-screen class will contain the classes specific to the Home Screen.

.peek-home-screen{/*

Contains the Home Screen classes

*/...

.home-screen-icon{/*



Contains the Button attributes unique to the Home ScreenButtons responsively wrap

*/...

}.home-screen-image{/*

Contains the Image attributes unique to the Home ScreenStrictly uses images

*/...

}.home-screen-title{/* Contains the Button Title attributes unique to the Home Screen */

...

}}

.peek-home-screen-background{/*

Contains the Background attributesHome Screen background is unique and different to other screensCannot use the body tag

*/...

}

3.2. Home Screen 17


Background Image

SCSS Files

The Home Screen style classes are found in the _home_screen.scss.

The Home Screen HTML layout classes are found in the _home_screen.web.scss.

The Home Screen NativeScript layout classes are found in the _home_screen.ns.scss.

HTML

<div class="peek-home-screen"><div class="container-fluid"><div class="row">

<div class="title h3"

*ngIf="!appDetails.length">No Plugins Installed

</div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"

*ngFor="let app of appDetails"><a class="home-screen-icon"

[routerLink]="[app.resourcePath]"><img class="home-screen-image"

[src]="[app.pluginIconPath]"><div class="home-screen-title">{{app.title}}



</div></a>

</div></div>

</div></div>

NativeScript

<ScrollView class="peek-home-screen"><WrapLayout><Label class="message"

*ngIf="!appDetails.length"text="No Plugins Installed">

</Label><GridLayout class="icon"

*ngFor="let app of appDetails"rows="*,auto" columns="*"[nsRouterLink]="[app.resourcePath]">

<Image class="image"row="0" col="0"src="~{{app.pluginIconPath}}">

</Image><Label class="title"

row="1" col="0"[text]="app.title">

</Label></GridLayout>

</WrapLayout></ScrollView>

Footer

The footer is fixed at the bottom of the screen.

Text is always centered in the footer.

The text remains a single line and truncates a ”...” if the line exceeds the minimum screen width.

Classes

The .peek-footer class contains the classes specific to the Footer.

3.3. Footer 19


.peek-footer{/* Contains the Footer looks classes */

...

}.footer-title{/*

Contains the title looks attributes unique to the FooterThis title will be dynamically set by the plugins installed

*/...

}}

SCSS Files

The Footer style classes are found in the _footer.scss.

The Footer HTML layout classes are found in the _footer.web.scss.

The Footer NativeScript layout classes are found in the _footer.ns.scss.

HTML

<div class="peek-footer"><div class="footer-title">Offline, xxx minutes</div>

</div>

NativeScript

<GridLayout class="peek-footer"...

</GridLayout>


CHAPTER 4

Generic Sections

These sections describe the styling of the reusable looks classes.

Navigation Section

The Navigation Section is positioned below the Title Bar, above the plugin screen and contains buttons that route toother screens or toggle the data presented.

The sample below shows an example of breadcrumbs navigation (left) and forward / next and back / previous buttons(right).

The Navigation Section serves as primary navigation routes for the active plugin.

If a Navigation Section is required it is constructed by the plugin screen.

Navigation Types:

• Breadcrumbs

• Pagination

• forward and / or back, next and / or previous

The buttons remain a fixed size throughout a responsive lifecycle. The buttons are sized around the text they contain.

Note: The buttons require a different theme to the Title Bar and generic peek theme buttons.

21


Classes

The .peek-nav-section class contains the looks classes specific to the Navigation Section.

.peek-nav-section{/* Contains the Navigation Section attributes */...

.nav-section-btn{/* Contains the Button attributes unique to the Navigation Section */...

}}

.peek-nav-bar-padding {/* Provides padding for the screen under the Navigation Section */

...}

SCSS Files

The Navigation Section style classes are found in the _navigation_section.scss.

The Navigation Section HTML layout classes are found in the _navigation_section.web.scss.

The Navigation Section NativeScript layout classes are found in the _navigation_section.ns.scss.

HTML

The peek-nav-section is to be included before the code of the plugin screen requiring the Nav Bar.

<div class="peek-nav-section" *ngIf="!confirmDialogShown()"><div class="btn-group pull-left" role="group">

<Button class="nav-section-btn"role="group"(click)="navToMyJobs()">

My Jobs</Button><Button class="nav-section-btn"

role="group"(click)="navToJob()">

Job</Button><Button class="nav-section-btn"

role="group"(click)="navToOperations()">

Operations</Button>

</div>

<div class="btn-group pull-right" role="group">

<button class="nav-section-btn"role="group"[disabled]="!lastOperationEnabled()"(click)="navToLastOperation()">

<</button><button class="nav-section-btn"

role="group"[disabled]="!nextOperationEnabled()"(click)="navToNextOperation()">

></button>

<Button class="nav-section-btn"

*ngIf="confirmEnabled()"(click)="confirmOp()">

Confirm</Button>

</div></div>

<div class="peek-nav-bar-padding">

</div>

NativeScript

The peek-nav-section is to be included before the code of the plugin screen requiring the Nav Bar.

<GridLayout class="peek-nav-section"rows="auto" columns="auto, *, auto"

*ngIf="!confirmDialogShown()"><WrapLayout class="btn-group"

row="0" col="0"><Button class="nav-section-btn"

text="My Jobs"(tap)="navToMyJobs()"></Button>

<Button class="nav-section-btn"text="Job"(tap)="navToJob()"></Button>

<Button class="nav-section-btn"text="Operations"(tap)="navToOperations()"></Button>

<Button class="nav-section-btn"[text]="Confirm"

*ngIf="confirmEnabled()"(tap)="confirmOp()"></Button>

</WrapLayout><WrapLayout class="btn-group"

row="0" col="2">

4.1. Navigation Section 23


<Button class="nav-section-btn"text="<"[isEnabled]="lastOperationEnabled()"(tap)="navToLastOperation()"></Button>

<Button class="nav-section-btn"text=">"[isEnabled]="nextOperationEnabled()"(tap)="navToNextOperation()"></Button>

</WrapLayout></GridLayout><StackLayout class="hr-dark"></StackLayout>

Mobile Dialog Section

The Mobile Dialog Section presents inputs and/or options to the Peek app user. It can involve a select drop down witha confirm and cancel buttons as per the example below.

The input types can be customised by the developer depending on the plugin requirements.

Uses:

• List Selection

• Text Input

• File Select

• Action Confirm

Any plugin screen dialog will be able to use the .mobile-dialog attributes.

Classes

The .mobile-dialog class contain the classes specific to a Mobile Dialog Section.

.mobile-dialog {/* Contains the Mobile Dialog Section looks classes unique for mobile devices */

...

.dialog-label {/*



Contains the label attributes unique to the Mobile Dialog Section

*/...

}.dialog-selector {/*

Contains the selector attributes unique to the Mobile Dialog Section

*/...

}.dialog-action-btn {/*

Contains the action button attributes unique to the Mobile Dialog Section

*/...

}}

SCSS Files

The Mobile Dialog Section style classes are found in the _mobile_dialog_section.scss.

The Mobile Dialog Section HTML layout classes are found in the _mobile_dialog_section.web.scss.

The Mobile Dialog Section NativeScript layout classes are found in the _mobile_dialog_section.ns.scss.

HTML

The Mobile Dialog Section uses Bootstraps Forms.

Refer to the Forms for more information about creating Forms using Bootstrap.

Below is the HTML code extract op-confirm.component shown in the image at the top of, Mobile Dialog Section:

<div class="mobile-dialog" [@dialogAnimation]="dialogAnimationState"(@dialogAnimation.done)="animationDone($event)">

<div class="container-fluid">

<div class="form-group"><div class="dialog-label"

for="operationDate">Operation Date / Time :</div><input id="operationDate" class="dialog-selector form-control"

[(ngModel)]="inputData.operationDate" ng2-datetime-pickerclose-on-select="false"date-format="DD-MMM-YYYY HH:mm"/>

</div><div class="form-group">

<div class="dialog-label text-muted">Request Further Instructions :<button class="dialog-action-btn btn-sm"

(click)="inputData.requestFurtherInstructions=!inputData.→˓requestFurtherInstructions"

4.2. Mobile Dialog Section 25

http://getbootstrap.com/css/#forms

http://getbootstrap.com/css/#forms


[class.btn-success]="inputData.requestFurtherInstructions"type="button">{{inputData.requestFurtherInstructions ? "Yes" :

"No"}}</button>

</div></div>

<div class="btn-group pull-right">

<Button class="dialog-action-btn" (click)="webConfirmClicked()">{{inputData.actionName}}

</Button>

<Button class="dialog-action-btn" (click)="cancelClicked(false)">Cancel</Button>

</div></div>

</div>

NativeScript

The Mobile Dialog Section uses the NativeScript recursive layout system.

The StackLayout defines the horizontal groups of GridLayout Content is placed in the GridLayout that is the immediatechild of the StackLayout.

Refer to the ListPicker for more information about using NativeScript ListPicker.

Below is the NativeScript code extract op-confirm.component:

<StackLayout class="mobile-dialog"><StackLayout class="input-field" horizontalAlignment="stretch">

<GridLayout rows="auto, auto" columns="auto, auto"><Label row="0" col="0" colspan="2"

class="dialog-label" text="Operation Date / Time :"></Label><DatePicker class="dialog-selector" row="1" col="0" #datePicker

(loaded)="nsConfigureDate(datePicker)"(dateChange)="nsDateChanged($event)">

</DatePicker><TimePicker class="dialog-selector" row="1" col="1" #timePicker

(loaded)="nsConfigureTime(timePicker)"(timeChange)="nsTimeChanged($event)">

</TimePicker></GridLayout>



<WrapLayout><Label class="dialog-label"

text="Request Further Instructions : " textWrap="true"></Label><Switch #furtherInstruct

[checked]="inputData.requestFurtherInstructions"(checkedChange)="inputData.requestFurtherInstructions =

→˓furtherInstruct.checked"


https://docs.nativescript.org/ui/layouts

https://docs.nativescript.org/ui/layout-containers#stacklayout

https://docs.nativescript.org/ui/layout-containers#gridlayout

https://docs.nativescript.org/angular/code-samples/ui/listpicker.html#listpicker


></Switch></WrapLayout>

</StackLayout>

<GridLayout columns="*,*" rows="auto"><Button class="dialog-action-btn" col="0" [text]="inputData.actionName"

(tap)="nsConfirmClicked()"></Button><Button class="dialog-action-btn" col="1" text="Cancel"

(tap)="cancelClicked(true)"></Button></GridLayout>

</StackLayout>

Information Section

The Information Section shows useful plugin related descriptions, information and / or instructions. This can includedata from other plugins.

Ideally the Information Section is used as the landing page before presenting the plugin screens. It could be usedthroughout a plugin if required.

4.3. Information Section 27


The Information Section should provide the Peek App user any relevant information needed to use a plugin.

Uses:

• Initial landing page

• Sub section landing page (instructions for part of a plugin that may function differently)

Any plugin Screen will be able to use the .peek-information-section attributes.



Classes

The .peek-information-section class contain the classes specific to a Information Section.

.peek-information-section {/*

Contains the Information Section classes

*/...

.information-section-icon {/*

Contains the icon attributes unique to the peek-information-section class

*/...

}.information-section-title {/*

Contains the title attributes unique to the peek-information-section class

*/...

}}

SCSS Files

The Information style classes are found in the _information_section.scss.

The Information Section HTML layout classes are found in the _information_section.web.scss.

The Information Section NativeScript layout classes are found in the _information_section.ns.scss.

HTML

<div class="peek-information-section"><div class="information-section-title">Welcome to Field Switching</div><img class="information-section-icon"

src="/assets/peek_plugin_pof_field_switching/plugin_icon.png">

<div class="p">Peek Field Switching allows field engineers working on theelectricity network to electronically<ul>

<li>View switching instructions</li><li>Receive instructions from the control room</li><li>And field confirm field switching operations</li>

</ul></div>

<hr><div class="information-section-title">Logged in as {{userDetails.displayName}}</div>

</div>

4.3. Information Section 29


NativeScript

<StackLayout class="peek-information-section"><Image class="information-section-icon"

src="~/assets/peek_plugin_pof_field_switching/plugin_icon.png"></Image>

<label class="information-section-title"text="Welcome to Field Switching"></label>

<label class="p"></label>

<label class="p"textwrap="true"text="Peek Field Switching allows field engineers working on the

→˓electricity network to electronically:"></label><label class="p"></label>

<label class="p" text="* View switching instructions"></label><label class="p" text="* Receive instructions from the control room"></label><label class="p" text="* And field confirm field switching operations"></label><label class="p"></label>

<label class="information-section-title"text="Logged in as {{userDetails.displayName}}"></label>

</StackLayout>

Details Section

The Details Section presents data (text, numbers, images, or other data) of importance to the Peek app user. It involvesenumerating important characteristics, emphasizing significant figures and identifying important features of data.

Ideally this section will be configured to present only required data to the user reducing the need for the Peek app userscrolling / filtering through unnecessary data. Prioritises information by providing focus to the values.



Uses:

• Instructions

• Itinerary

• Form Data (displaying not editing)

Any plugin Screen will be able to use the .peek-details-section attributes.

Classes

The .peek-details-section class contain the classes specific to a Details Section.

.peek-details-section {/* Contains the Details Section looks classes */

...

.details-section-title {/*

Contains the title attributes unique to the Details Sectionthis text will have the text-muted effect

*/...

}.details-section-value {/*

Contains the value attributes unique to the Details Sectiontext to have the focus of attention

*/....multiline {/*

For HTML.This class is to be used for multi-line support.Whitespace is preserved by the browser. Text will wrap whennecessary, and on line breaks. Must be in a span

*/...

}.editable {/*

Contains the editable attributes unique to the .details-section-value→˓class

*/...

}

//Select lists...

}

//Single line inputs...

}

4.4. Details Section 31


//Multi line inputs...

}}

}

SCSS Files

The Details style classes are found in the _details_section.scss.

The Details Section HTML layout classes are found in the _details_section.web.scss.

The Details Section NativeScript layout classes are found in the _details_section.ns.scss.

HTML

The Details Section uses Bootstraps Grid System.

A Container contains row’s. Row create horizontal groups of columns, rows are made up of 12 columns. Content isplaced in columns and only column’s can be immediate children of row’s.

Refer to the Grid System for more information about creating page layouts using the Bootstrap grid system.

Below is the HTML code extract of three rows:

<div class="peek-nav-bar-padding peek-details-section"><div class="container-fluid">

<div class="row">

<div class="col-xs-6"><div class="details-section-title">

Control Engineer</div><div class="details-section-value">

{{job.activeControlEngineer}}</div>

</div><div class="col-xs-6">

<div class="details-section-title">Field State

</div><div class="details-section-value">

{{job.fieldStatus.niceName}}</div>

</div></div>

<hr><div class="row">

<div class="col-xs-12"><div class="details-section-title">

Name</div><div class="details-section-value">

{{job.jobName}}


http://getbootstrap.com/css/#grid

http://getbootstrap.com/css/#grid


</div></div>

</div>

<hr><div class="row">

<div class="col-xs-12"><div class="details-section-title">Work Description</div><div class="details-section-value">

<span class="multiline">{{job.workSummary}}</span></div>

</div></div>

<hr>

NativeScript

The Details Section uses the NativeScript recursive layout system.

The StackLayout defines the horizontal groups of GridLayout Content is placed in the GridLayout that is the immediatechild of the StackLayout.

Below is the NativeScript code extract of two rows from the screenshot in the beginning of the Details Section:

<StackLayout class="peek-details-section"><GridLayout rows="auto, auto" columns="*, *">

<Label row="0" col="0" class="details-section-title"

text="Control Engineer"></Label><Label row="1" col="0" class="details-section-value" textWrap="true"

[text]="job.activeControlEngineer"></Label><Label row="0" col="1" class="details-section-title"

text="Field State"></Label><Label row="1" col="1" class="details-section-value"

[text]="job.fieldStatus.niceName"></Label></GridLayout>

<Label class="h3" text=""></Label>

<GridLayout rows="auto, auto" columns="*">

<Label row="0" col="0" class="details-section-title" text="Name"></Label><Label row="1" col="0" class="details-section-value" textWrap="true"

[text]="job.jobName"></Label></GridLayout>

<Label class="h3" text=""></Label>



4.4. Details Section 33

https://docs.nativescript.org/ui/layouts

https://docs.nativescript.org/ui/layout-containers#stacklayout

https://docs.nativescript.org/ui/layout-containers#gridlayout


Tables Section

The Tables Section is best suited when there’s logical relationships among text, numbers, images, or other data exist intwo dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columnsand rows must be recognizable in order for the logical relationships to be perceived.

Useful for viewing detailed data and precise values, good for comparing individual values.

The objective of this technique is to present tabular information in a way that preserves relationships within theinformation.

• Filter or sort data

• Show exact data

• Visualise single or two dimensional data.

Any plugin Screen will be able to use the .peek-tables-section attributes.

Classes

The .peek-tables-section class contain the classes specific to a Tables Section.

.peek-tables-section{/* Contains the Tables Section classes */...

.table{/* Contains the table attributes unique to the Tables Section */...

}

.tr{/* Contains the table row attributes unique to the .table class */...



}.th{/* Contains the table head cell attributes unique to the .table class */...

}.td{/* Contains the table row cell attributes unique to the .table class */...

}}

SCSS Files

The Tables style classes are found in the _tables_section.scss.

The Tables Section HTML layout classes are found in the _tables_section.web.scss.

The Tables Section NativeScript layout classes are found in the _tables_section.ns.scss.

HTML

The Tables Section uses Bootstraps Tables.

Below is the HTML code extract of table header and two rows from Tables Section:

<div class="peek-tables-section"><div class="table table-striped">

<thead><tr class="tr">

<th class="th">ID</th><th class="th">Name</th><th class="th">Scheduled Date</th><th class="th">Status</th>

</tr></thead><tbody><tr class="tr"

[class.bg-primary]="item.fieldStatus.isActive"[class.bg-warning]="item.fieldStatus.isDispatched"[class.bg-success]="item.fieldStatus.isAccepted"

*ngFor="let item of jobs"(click)="jobClicked(item)"><td class="td">

{{item.jobNumber}}

</td><td class="td">

{{item.jobName}}


{{item.scheduledDate| date:'HH:mm EE dd-MMM'}}

4.5. Tables Section 35

http://getbootstrap.com/css/#tables



{{item.fieldStatus.niceName}}

</td></tr></tbody>

</div></div>

NativeScript

The Tables Section uses Listview.

Below is the NativeScript code extract of table header and two rows from Tables Section:

<StackLayout class="peek-tables-section"><StackLayout class="table">

<GridLayout class="tr" rows="auto" columns="2*, 3*, 2*"><Label class="th" row="0" col="0" text="Job"></Label><Label class="th" row="0" col="1" text="Scheduled"></Label><Label class="th" row="0" col="2" text="Status"></Label>

</GridLayout>

<ListView class="td"[items]="jobs">

<ng-template let-item="item" let-i="index" let-odd="odd" let-even="even"><StackLayout

[class.odd]="odd" [class.even]="even"[class.bg-primary]="item.fieldStatus.isActive"[class.bg-info]="item.fieldStatus.isAccepted"[class.bg-success]="item.fieldStatus.isDispatched"(tap)="jobClicked(item)">

<GridLayout rows="2*,2*,*" columns="2*, 3*, 2*"><Label row="0" col="0"

[text]="item.jobNumber"></Label><Label row="0" col="1"

[text]="item.scheduledDate | date:'HH:mm EE dd-MMM'"></→˓Label>

<Label row="0" col="2"[text]="item.fieldStatus.niceName"></Label>

<Label row="1" col="0" colSpan="3"

[text]="item.jobName" textWrap="true"></Label><Label row="2" col="0" text=""></Label>

</GridLayout></StackLayout>

</ng-template></ListView>

</StackLayout></StackLayout>


https://docs.nativescript.org/ui/list-view


Other Useful Styles

Peek Theme is applied to bootstrap and some newly created classes as not all Peek Plugins require specific styleconfigurations.

Most of the Peek Plugin Screens will use the generic bootstrap classes.

These classes are available throughout Peek and attribute changes are found in _bootstrap_adjustments.scss.

Title

Generic Peek theme Title.

.title {/* Applies the title theme */

...

}

Headings

Generic Headings 1 through to 6.

Bootstrap Headings

.h1 {/* Applies the heading theme */

...

}.h2 {/* Applies the heading theme */

...


...


...


...

4.6. Other Useful Styles 37

http://getbootstrap.com/css/#type-headings



...

}

Text

Generic Peek theme Text.

.p {/* Applies the text theme */

...

}

Divider

The divider is styled as per the peek theme and can be used throughout the peek app.

The <hr> tag defines a thematic break in the HTML app.

The <StackLayout class=”hr”> element defines the thematic break in the NativeScript app.

.hr {background-color: $divider_colour_navigation_section;

}

Contextual Backgrounds

Set the background of an element to any contextual class.

Bootstrap Contextual Backgrounds

NativeScript Contextual Colors

Note: Only bg-primary and bg-danger exist in the NativeScript Styling Infrastructure. The other classes needtheir attributes created from scratch to function in NativeScript.

.bg-primary{/* Applies the primary background theme */

color: #fff;background-color: #337ab7;

...

}


http://getbootstrap.com/css/#helper-classes-backgrounds

https://docs.nativescript.org/ui/theme#contextual-colors


.bg-success{/* Applies the success background theme */

background-color: #dff0d8;

...

}.bg-info{/* Applies the info background theme */

background-color: #d9edf7;

...

}.bg-warning{/* Applies the warning background theme */

background-color: #fcf8e3;

...

}.bg-danger{/* Applies the danger background theme */

background-color: #f2dede;

...

}

Button

Generic Peek theme button.

Bootstrap button example

NativeScript Button

.btn {/*

Contains the generic button attributes

*/

...

}

Contextual Buttons

Modify the button background colour and/or text colour of any button element.

Bootstrap Contextual Buttons

4.6. Other Useful Styles 39

http://getbootstrap.com/components/#btn-groups-single

https://docs.nativescript.org/angular/code-samples/ui/button.html#button

http://getbootstrap.com/css/#buttons-options


NativeScript Contextual Colors

Note: These classes need their attributes created from scratch to function in

NativeScript.

.btn-primary {/* Applies the primary button theme */...

}

.btn-success {/* Applies the success button theme */...

}

.btn-info {/* Applies the info button theme */...

}

.btn-warning {/* Applies the warning button theme */...

}

.btn-danger {/* Applies the danger button theme */...

}


https://docs.nativescript.org/ui/theme#contextual-colors

CHAPTER 5

Plugin Screens

This section describes the styling of the public plugin displays.

Peek Plugin Inbox

Peek Plugin Inbox displays a list of unacknowledged items issued to the logged in user.

Inbox:

41


Peek Plugin Activity display a log of items issued to the logged in user.

Activity:

If a device user has a role of performing tasks, which are managed by Peek, Peek will issue items to the user via thisplugin.

1. The active task plugin receives items from other plugins

2. The new items are persisted within the Peek Storage database

3. Delivery to the users device is ensured

4. Once the item is on the user device, it may be :

(a) Selected from the ‘Inbox’ tab, this will route to the plugin that issued the item.

(b) Actioned, actions will be delivered back to the initiating plugin back on the peek server.

5. All items and the state of items are viewable from an administrators page.

6. The Inbox Screen is accessed by the ‘Tasks’ button in the Title Bar.

7. The ‘Tasks’ button also shows the number of tasks.

42 Chapter 5. Plugin Screens


Examples:

1. The following are use case examples of what can be done with the Active Task plugin.

2. Notifications that arrive as read, and require no action. This can create an audit trail for the user.

3. Notification that are unread until the user selects them. Selecting them will navigate to another plugin, theinitiating plugin will be notified and it can then mark the task as read or delete it.

4. Actions that are required. Actions can be created by initiating plugins, and stay “unread / unactioned” until theuser completes what ever action is required within another plugin. The initiating plugin then removes or marksthe action as completed.

5. Question. A task can be created with multiple actions, upon selecting an action, the initiating plugin will benotified, it can then remove the task.

Components

The plugin-active-task-client component builds the navigation tabs. The tabs route to the components plugin-active-task-task-list and plugin-active-task-activity-list.

The plugin-active-task-task-list component builds rows of outstanding tasks from plugins configured to issue tasks.

The plugin-active-task-activity-list component builds rows of the activity from the plugins configured to show activ-ity.

Classes

The .plugin-inbox class contains the classes specific to the Peek Plugin Active Task.

.plugin-inbox,

.pl-inboxActivity,

.pl-inboxTasks {

.pl-inbox {/*

Contains the style and classes for the inbox container

*/...

.pl-inbox-item {/*

Contains the style and classes for the

*/...

.pl-inbox-icon {/*

Contains the icon attributes unique to the .pl-inbox-item class

*/...

}.pl-inbox-info {

/*Contains the info attributes unique to the .pl-inbox-item class

*/...

5.1. Peek Plugin Inbox 43


.pl-inbox-title {/*

Contains the title text attributes unique to the .pl-inbox-info class

*/...

}.pl-inbox-description {/*

Contains the description text attributes unique to the .pl-inbox-info→˓class

*/...

}.pl-inbox-date-time {/*

Contains the date and time attributes unique to the .pl-inbox-info class

*/...

}}

}.pl-inbox-read-more {

/*Contains the read more link attributes unique to the .plugin-inbox class

*/...

}}

}}

SCSS Files

The Inbox style classes are found in the _plugin_inbox.scss.

The Inbox HTML layout classes are found in the _plugin_inbox.web.scss.

The Inbox NativeScript layout classes are found in the _plugin_inbox.ns.scss.

HTML

plugin-active-task-client

<div class="plugin-inbox">

<ul class="nav nav-tabs"role="tablist"><li class="active"

role="presentation"><a aria-controls="home"



data-toggle="tab"href="http://localhost:4200/#inboxTasks"role="tab">Inbox

</a></li><li role="presentation">

<a aria-controls="profile"data-toggle="tab"href="http://localhost:4200/#inboxActivity"role="tab">Activity

</a></li>

</ul><div class="tab-content">

<div class="tab-pane active"role="tabpanel"id="pl-inboxTasks">

<plugin-active-task-task-list></plugin-active-task-task-list>

</div><div class="tab-pane"

role="tabpanel"id="pl-inboxActivity">

<plugin-active-task-activity-list></plugin-active-task-activity-list>

</div></div>

</div>

plugin-active-task-task-list

<div class="pl-inbox-tasks"><div class="h3"

*ngIf="tasks.length === 0">The inbox is empty.

</div><div class="pl-inbox-item bg-success"

*ngFor="let task of tasks"(click)="taskClicked(task)"><div class="pl-inbox-icon">

<i class="fa fa-comment"aria-hidden="true"></i>

</div><div class="pl-inbox-info">

<div class="pl-inbox-title">{{task.title}}

</div><div class="pl-inbox-description">

{{task.description}}

5.1. Peek Plugin Inbox 45


</div><div class="pl-inbox-date-time">

{{timePast(task)}} ago, {{dateTime(task)}}

</div></div><div class="pl-inbox-read-more">

<i class="fa fa-chevron-right"aria-hidden="true"></i>

</div></div>

</div>

plugin-active-task-activity-list

<div class="pl-inbox-activity"><div class="message"

*ngIf="activities.length === 0">There is no recent activity.

</div><div class="pl-inbox-item"

*ngFor="let activity of activities"(click)="activityClicked(activity)"><div class="pl-inbox-info">

<div class="pl-inbox-title">{{activity.title}}

</div><div class="pl-inbox-description">

{{activity.description}}

</div><div class="pl-inbox-date-time">

{{timePast(activity)}} ago, {{dateTime(activity)}}

</div></div><div class="pl-inbox-read-more">

<i class="fa fa-chevron-right"aria-hidden="true"></i>

</div></div>

</div>

Peek Plugin Chat

Peek Plugin Chat displays active chat sessions and their messages.

• The active chat sessions should indicate if there are unread messages.



• The message lists will display sent messages on the right and received messages on the left.

• Background contextual colours will distinguish a successfully sent message or an emergency “SOS” messagereceived.

Chats:

Messages:

5.2. Peek Plugin Chat 47




Originally this plugin was designed to send messages between the power grid control room and field engineers.

Simple communications with external systems.

Components

The chat-list component displays a list of active chat sessions that route to the msg-list component. The “New Chat”button in the Navigation Bar routes to the new-chat component.

The new-chat component creates new chat sessions. The user builds a list of one or more users for a new chat session.

The msg-list component shows the list of sent and received messages for the selected chat session. The “angle-left”button in the Navigation Bar routes to the chat-list component. The user has the option to compose a new message tosend of send an “SOS” message.

Classes

The .plugin-chat-list class contain the classes specific to the chat-list component. The .plugin-chat-messages class contains the classes specific to the msg-list component. The new-chat componentuses generic classes, see Other Useful Styles.

.plugin-chat-list {/*

Contains the chat-list component classes

*/...

.chat-list-messages {/*

Contains the Messages attributes unique to the Chat List

*/...

.chat-list-icon {/*

Contains the icon attributes unique to the message classThe icon is used to indicate unread messages

*/...

}.chat-list-title {

/*Contains the topic text attributes unique to the message class

*/...

}}

}

.plugin-chat-messages {/*

Contains the msg-list component classes

*/...



.chat-messages-list {/*

Attributes for the container of messages, unique to the ChatMessages.Scrolls through the messages with most recent at the bottom.

*/...

.chat-messages-sent {/*

Contains the sent message attributes unique to the message-listclass.Container is right aligned with background colour different to thereceived class.bg-success class applied for a successfully sent message.

*/...

}.chat-messages-received {

/*Contains the received text attributes unique to the message-listclass.Container is right aligned with background colour different to thesent class.bg-warning class applied for an emergency priority message.

*/...

}.chat-messages-details {

/*Contains the message details text attributes unique to themessage-list class.The message details should not be the focus of attention (text-muted)

*/...

}.chat-messages-emergency {

/*Contains the emergency priority message text attributes unique to themessage-list class

*/...

}.chat-messages-normal {

/*Contains the normal priority message text attributes unique to themessage-list class

*/...

}}.chat-messages-compose {/*



Contains the compose message area attributes unique to thechat messages.Fixed to the bottom of the screen.

*/...

.chat-messages-new-text {/*

Contains the new message text attributes unique to thechat-messages-compose class.

*/...

}

.chat-messages-btn {/*

Contains the button attributes unique to thechat-messages-compose class.

*/...

}}

}

SCSS Files

The Inbox style classes are found in the _plugin_chat.scss.

The Inbox HTML layout classes are found in the _plugin_chat.web.scss.

The Inbox NativeScript layout classes are found in the _plugin_chat.ns.scss.

HTML

chat-list component

<pl-chat-new-chat

*ngIf="isNewChatDialogShown()"(create)="dialogConfirmed($event)"(cancel)="dialogCanceled()"[data]="newChatDialogData">

</pl-chat-new-chat>

<div class="peek-nav-section"><div class="btn-group pull-left"

*ngIf="!isNewChatDialogShown()"



role="group"><button class="btn"

role="group"(click)="newChatClicked()">

New Chat</button>

</div></div>

<div class="plugin-chat-list"><ng-template ngFor let-chat [ngForOf]="chats" let-i="index">

<div class="chat-list-messages" (click)="chatClicked(chat)">

<fa class="chat-list-icon" name="fw" *ngIf="isChatRead(chat)"></fa><fa class="chat-list-icon" name="comment-o" *ngIf="!isChatRead(chat)"></

→˓fa>

<div class="chat-list-title" *ngFor="let user of otherChatUsers(chat)">

{{userDisplayName(user)}} ({{user.userId}})</div>

</div></ng-template>

</div>

new-chat component

<div [@dialogAnimation]="dialogAnimationState"(@dialogAnimation.done)="animationDone($event)">

<div class="h2">Start a chat wth :

</div>

<div class="p"

*ngIf="!createButtonEnabled()">No users selected

</div><ul>

<li *ngFor="let u of data.users">{{u.displayName}}

</li></ul>

<div class="form-group"><label class="h4"

for="userIdField">Add User:

</label><select class="form-control"

id="userIdField"name="userId"[(ngModel)]="selectedUserIndex">

<option [value]="i" *ngFor="let i = index; let item of usersStrList">



{{item}}</option>

</select></div>

<div>

<Button class="btn" (click)="addUserClicked()"[disabled]="!newButtonEnabled()">

Add User</Button>

<Button class="btn" (click)="confirmClicked(false)"[disabled]="!createButtonEnabled()">

Create Chat</Button>

<Button class="btn" (click)="cancelClicked(false)">Cancel

</Button></div>

</div>

msg-list component

<div class="peek-nav-section"><div class="btn-group pull-left"

role="group"><button class="btn"

role="group"(click)="navToChatsClicked()">

<fa name="angle-left"></fa></button>

</div></div>

<div class="plugin-chat-messages"#messageListRef>

<div class="h3"

*ngIf="!haveMessages()">No messages

</div><div class="chat-messages-list">

<div *ngFor="let i=index; let msg of messages()"><hr *ngIf="isFirstUnreadMesage(i)"/>

<div [class.sent]="isMessageFromThisUser(msg)"

[class.received]="!isMessageFromThisUser(msg)"><div class="chat-messages-details"

*ngIf="!isMessageFromThisUser(msg)">



From {{userDisplayName(msg)}} ({{msg.fromUserId}}), {→˓{timePast(msg)}}

ago

</div><div class="chat-messages-details"

*ngIf="isMessageFromThisUser(msg)">{{timePast(msg)}} ago

</div><div [class.chat-messages-sent]="isMessageFromThisUser(msg)"

[class.chat-messages-received]="!isMessageFromThisUser(msg)"[class.bg-success]="isNormalPriority(msg)"[class.bg-danger]="isEmergencyPriority(msg)">

<div class="chat-messages-normal"

*ngIf="isNormalPriority(msg)">{{msg.message}}

</div><div class="chat-messages-emergency"

*ngIf="isEmergencyPriority(msg)">{{msg.message}}

</div></div>

</div></div>

</div>

<div class="chat-messages-compose"><textarea class="form-control"

[(ngModel)]="newMessageText">

</textarea><button class="btn" type="button"

[disabled]="!sendEnabled()"(click)="sendMsgClicked()">

Send

</button><button class="btn" type="button"

(click)="sendSosClicked()">SOS

</button></div>

</div>

Documents

PEEK Mobile Theme Documentation