MDriven Stylesheet
No edit summary
No edit summary
Line 65: Line 65:
!'''Style reference'''
!'''Style reference'''
|-
|-
|<figure-inline class="mw-default-size">[[File:upload-btn.png|link=https://wiki.scifree.se/bluespice/File:upload-btn.png|159x159px]]</figure-inline>
|[[File:Upload-btn.png|link=https://wiki.scifree.se/bluespice/File:upload-btn.png|center|frameless|159x159px]]
|
|
'''''tk''-''upload-btn''''' ''primary''
'''''tk''-''upload-btn''''' ''primary''
|-
|-
|[[File:Delete-btn.png|center|frameless]]<figure-inline class="mw-default-size"></figure-inline>
|[[File:Delete-btn.png|center|frameless]]
|
|
'''''tk''-''delete-btn''''' ''primary''
'''''tk''-''delete-btn''''' ''primary''
Line 89: Line 89:
(standalone icon without text)
(standalone icon without text)
|-
|-
|[[File:Screenshot 2020-09-28 at 03.33.23.png|center|frameless|link=https://wiki.scifree.se/bluespice/File:Screenshot_2020-09-28_at_03.33.23.png]]
|[[File:Tk-add-btn.png|center|frameless|113x113px]]
|'''''tk''-''add-btn''''' ''primary'' ''flat''
|'''''tk''-''add-btn''''' ''primary'' ''flat''
(standalone icon without text)
(standalone icon without text)

Revision as of 01:24, 30 November 2020

What is modifier-classes?

Modifier-classes define the SciFree style and customise it within the Turnkey Style System.

To use turnkey or mdriven modifier classes put them into the style ref in View Model Editor.

Example style for the buttons:

1326px-Screenshot 2020-08-16 at 00.43.17.png

Here you can download the css file (stylesheet) that contains all the SciFree style data with the latest changes.

TEXT

You can style the text with modifier-classes like:

TEXT
Type here tk-bold
Type here tk-italic

Type here

tk-primary
CHIPS

Type here

tk-grey-chip

Type here

tk-blue-chip

Type here

tk-green-chip

Type here

tk-yellow-chip

Type here

th-red-chip

Chips can be used in the table to highlight different statuses or process stages. E.g.:

Pending...

BUTTONS

There are three forms of buttons in the Turnkey Style System: default, outlined and flat.

Also, you can use colors like: primary (main SciFree color), danger or success. For more colors follow the Turnkey style system.

Choose needed form and color then put their modifier-classes into the style-ref. (you don't need to add 'default' styling)

E.g. : primary, primary outlined, primary flat, danger, danger flat etc.

THIS MODIFIER CLASSES IS FOR BUTTONS AND LINKS ONLY, USE MD-PREFIXED CLASSES FOR STYLING TEXT- e.g. tk-primary.

Screenshot 2020-11-30 at 02.32.33.png

SPECIAL BUTTONS

Also you can stack on top modifier-classes for special buttons.

(adds a special Material Design Icons)

Example Style reference
Upload-btn.png

tk-upload-btn primary

Delete-btn.png

tk-delete-btn primary

Back-btn.png

tk-back-btn primary

tk-next-btn primary

tk-search-btn primary

Remove-flat.png
tk-remove-btn primary flat

(standalone icon without text)

Tk-add-btn.png
tk-add-btn primary flat

(standalone icon without text)

SPECIAL ICONS

You can add icons to any element by using the following classes. TAB-BUTTONS was used as an example elements.

<figure-inline class="mw-default-size">File:document-icon.png</figure-inline>
tk-document tk-organisations

tk-icon-outlined

tk-organisations

INFO-ELEMENTS

Info-elements can be static or removable.

tk-info-text

(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)

tk-info-box

(static text that can be added anywhere on the page,preferably take less than 6 col, tagged value: HideHeading)

tk-info-banner

(special info-help for newbies, removable groupbox, that contains text and action to remove it, can be added at the top of the page, tagged value: HideHeading)

How to create info-banner?

Create groupbox of 1 row and 12 col with style-ref: tk-info-banner, add static-text of 11cols and action tk-remove-btn of 1 col inside

To make it removable:

  1. Create a boolean variable (vRemoveInfo, false)
  2. Make groupbox visible, when vRemoveInfo is true only
  3. Set the remove action EAL expression to vRemoveInfo := true

TABLES

tk-table tk-table--alt

Both variants can be used without heading by adding a tagged value: HideHeading.

Choose the style of the text for each column: e.g. Main object is bold - tk-bold , or with scifree colors - tk-primary

REPORTING STATES

Use reporting states with icons by adding the following modifier-classes. You can choose to colour them in sf-primary colour or just leave it default grey , without adding any additional modifier classes.

tk-uploading-state

tk-primary

tk-extracting-state

tk-primary

tk-waiting-state

tk-primary

CARDS (wrappers for groupboxes)

sf-group-card

(tagged-value: HideHeading)

LISTS

Tables in a form of lists

sf-items-list--default sf-items-list--primary

To make a list of affilliations like in the example,

  • use sf-organisations style ref to the name of the organisation column
  • add "remove action" with sf-remove-btn flat style ref

SEARCH with DROPDOWN OF SUGGESTIONS

<figure-inline>File:Screenshot 2020-10-16 at 07.59.11.png</figure-inline>

To make a search field like in the example(with an add action),

  • create a groupbox with sf-searchbox style ref that includes search input with vSeekParam variable and a table of results - vSeekerResult <figure-inline>File:Screenshot 2020-10-16 at 08.04.44.png</figure-inline>
  • include search input that takes 1 row and add "HideHeading" and proper "Placeholder" tagged values <figure-inline>File:Screenshot 2020-10-16 at 08.13.12.png</figure-inline>
  • set style ref for search input as an expression (if the vSeekParam is not empty and there are more than 0 results then 'sf-searchbox--searching' class should be added)
if not vSeekParam.isNullOrEmpty and (Institution.allInstances->size > 0) then 'sf-searchbox__input sf-searchbox--searching' else 'sf-searchbox__input'  endif
  • set table of results is a nested ViewModel class that contains one or two attributes and optional action; (optional) add "add action" with sf-add-btn primary style ref to the nesting and set its expression to
vCurrent_SearchResultGrid;/*Choose the current row in the results grid*/ vCurrent_UserAffiliations.AffiliatedTo.add(vCurrent_SearchResultGrid); /*Main action*/ vSeekParam := String.NullValue /*Clean the search input field*/
  • set "HideHeading" tagged value
  • set style ref - "sf-searchbox__results";
  • set visible expression to results if the search field is not empty and there are more than 0 results
not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0) 

Now you can set a search server side action that runs every 30ms only when the search field is not empty ( DisabledExpression: vSeekParam->isEmpty ) more about server side actions

SPECIAL FIELDS FOR DOCUMENT MANAGING

UI KIT

This page was edited 3 days ago on 03/26/2024. What links here