SALT Mobile extensions

0 votes
asked Aug 14 in Wanted features by kjw
edited Aug 14

Hi I have been getting familiar with the Salt (Wireframe) functionality and was wondering 
how it could be extended with styles and some features from other 
projects to promote a mobile theme. Using IOS as an example here but generic would do.

This is a bit of a fanatasy mashup but it would be good to polish up the Salt Project for presentations and other documents.

Following list scrapped from : 

https://developer.apple.com/design/human-interface-guidelines/


Icons and Images
=================
App Icons
-----------
(&appSettings)
(&appPhone)
(&appMail) 
(&appMessage)
(&appClock)
(&appPhoto)

Launch Screens
--------------
-Describes Screen Sizes

System Icons - /ios/icons-and-images/system-icons/
-------------
(&share) Share Icon
(&add) Add Icon
(&book) Bookmarks Icon
(&camera) Camera Icon
(&cancel) Cancel Icon
(&done)
(&edit)
(&fforward) Fast Forward Icon
(&organize) 
(&pause)
(&play)
(&redo)
(&refresh)
(&reply)
(&rewind)
(&save)
(&glass) Search Icon
(&stop)
(&trash)
(&undo)

Other Icons
(&lt) Left < Icon
(&gt) Right > Icon
(&plus) Plus Icon
(&cloud)
(&vanish) 

Bar
======
Navigation Bars - /ios/bars/navigation-bars
||<centre>[[All][Missed]]</centre>|| -Sort Centred Buttons

Search Bars -/ios/bars/search-bars/
||[(&glass) Search ..]|| -Full width Search Bar
||[(&glass) Search | ..]|| -Half Width Search Bar
||<centre>[(&glass) Search]</centre>|| -Centered Search Bar

Scope Bars - 

||[All Mailboxes][Current Mailboxes]|| -Full width Scope Bar

Status Bar
----------

Tab Bar /ios/bars/tab-bars/
-------

|| "(&multi)\n Photos" | "(&run)\n Memories" |(&cloud)\n Shared|(&vanish) \n Albums ||
 

Tool Bar
---------


Controls
==========
Buttons - /ios/controls/buttons/
(+) Add Button
(i) Info Button
(t) Tick Button
(x) Cross Button
(|>) Play Button

Context Menu - /ios/controls/context-menus/

(&copy) Copy Icon
(&share) Share Icon
(&love) Favourite Icom
(&multi) Show All Icon
(&trash) Remove Icon

Page Controls - /ios/controls/page-controls/
[(*..)] small indicator dots left hightlight
[(.*.)] small indicator dots centre hightlight
[(..*)] small indicator dots right hightlight

Sliders - /ios/controls/sliders/

||(&leftSlider)|| Full width knob left
||(&rightSlider)|| Full width knob centre
||(&centrelider)|| Full width knob right
||(&dim)(&rightSlider)(&bight)|| Full width knob centre

Switch /ios/controls/switches/
(&offSwitch)
(&onSwitch)

List not complete but indicative


@startsalt

!define IOSPuml https://raw.githubusercontent.com/mobilesalt/ios-icons-for-plantuml/master/dist

!includeurl IOSPuml/IOSCommon.puml

!includeurl IOSPuml/icons/all.puml

skinparam applescreenX 320px

skinparam applescreenY 568px

skinparam ios {

IOSScreenX IOS_X

IOSScreenY IOS_Y

    BackgroundColor IOS_BG_COLOR

    BorderColor IOS_BORDER_COLOR

}

screen <<IOS>>{

  ||No SIM <&wifi> | <&bluetooth> <&battery-full>||

  ||< <centre>My Mobile Page</center>||

  ||..||

  ||<centre><img:http://plantuml.com/logo3.png></centre>

  ||..

  ||To do something, select Option1 | *

  ||-- | --

  ||Operation1 | (&offSwitch)

  ||-- | --

  ||Link to View1 | >

  ||-- | --

  ||Link to View2 | >

  ||-- | --

  ||Link to View3 | >

  ||-- | --

  ||<br:6> '6 breaking lines

  ||-- | --

  ||(&home)Home | (i)help  | (&glass) Search) | apply

  ||-- | --

} as screen1

@endsalt

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

[Antispam2 Feature: please please wait 1 or 2 minutes (this message will disappear) before pressing the button otherwise it will fail](--------)
To avoid this verification in future, please log in or register.
...