UI DESIGN DOC

Requirements
    - Responsive but favoring larger screens primarily
        - Smaller screens will be able to do everything but the layout is not the primary one
        - Service techs have an ipad or notebook
        - Anticipate a list of things each role needs immediately in front of them and try for that
    - componentized UI elements so can re-use and mix and even support customizing with user defined layout
        - So for example a customer list is a self contained subset of a list widget and can be plunked down anywhere required
        - This will save me time so identify the "types" of ui elements (picklist, filterable data list, entry form etc)
            - Then can build specific versions of the types identified like a client list is a specialized filterable data list etc.
                - If a list then it also knows which element is selected or a list of selected elements so other widgets can operate on it
            - A menu or command widget that can be inserted into another widget, i.e. a part picker for a workorder part list widget or elsewhere a part is required
            - This way I'm only making a few UI objects, not a new one for every single element.
                - Kind of making the pallet first of all required objects then I can "paint" with them on to the UI without getting bogged down in minute details every time I make a form
            - UI elements should be responsive and generic enough to work for many different use cases
            - they should be rights aware and mode aware (editable, read only) enough to handle all that without recoding again and again
            - the page or shell or whatever that holds the widgets should be end user customizable from a widget pallet.
            - The more self contained the widget the more useful

    - Most people seem to prefer WBI over RI and the reason always seems to be RI is too simple or requires too many clicks
    - So plan on the bigger screen layout being the main UI and smaller screen secondary    
    - I want things to be simpler and cleaner than it seems many people do so beware of that tendency
        - People don't want to have to open sub screens any more than absolutely necessary
        - Make sure a screen contains as much as possible to complete it on one screen
    - Clean interface with good negative space but not dumbed down too much
    - Pro-marketing style, stuff that makes it easier to sell
        - emphasize simple fonts with good contrast
        - Blue is a good colour, no purple or pastels
    - DAshboard / customizable UI
        - Ideally people can see as much detail as they want or remove unused ui widget elements
        - So, for example on the dashboard they can customize by plunking down a client list widget, adding a "My workorders" widget for a tech
        - or for a Ops person they can plunk down on their dashboard a current server status widget or active jobs widget etc


Graphics and themes for AyaNova
    - No bitmap graphics, vector only!!   
    - For the manual and docs will use material theme with MKDOCS generator.

ICON FONT - Going with Font Awesome 5.x SOLID FREE icons
=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
- I'll choose the replacement fonts as I need them from the FontAwesome5 collection and document them here.
- https://fontawesome.com/icons?d=gallery&s=regular,solid&m=free

- v7:
    - v7 icons, all orangey brown in color with bits of highlight in each one of other colors.  3d in general
        - Service Workorder (wrench and screwdriver)
            - Workorder items (single wrench alone no screwdriver)
            - Scheduled users (torso in front of calendar)
            - Parts (3d cube)
            - Labor (hammer)
            - Travel (truck looks like loomis courier truck)
            - Loans (plug from electrical cord for no apparent reason)
            - Expenses (riffle of US dollar bills)
        - Service templates (looks like rubber stamp)
        - Quote (pen and paper)
            - all subitems same as for service workorder
        - PM (alarm clock and paper)
            - all subitems same as for service workorder
        - Schedule (looks like the schedule calendar screen but tiny and a bit cluttered)
        - Inventory (3 shapes, pyramid, ball, cube in 3d effect)
            - Parts (cube)
            - PO items and PO receipts (both are kind of just documents, PO receipt is same but with a corner to corner orangey stripe across it that is indechipherable)
            - Part requests (document like a po with a wrnch and hammer Service icon in front of it weirdly when it should be a cube I think)
        - Clients (house icon with door and front mat)
            - Headoffices (larger building, low rise apartment or office tower)
            - Contracts (two hands shaking)
            - Projects (some kind of closed book that looks like a dayplanner with colored tabs sticking out)
        - Dashboard (speedometer / analog meter black dial, silver surround and lettering like from an old time auto dashboard)
        - Units (cog which I don't like)
            - Unit models (some kind of mechanical looking pentagram with a circular thing in the center, weird)
            - Loan items (power plug for no apparent reason)
        - Vendors (shopping basket handheld kind)
        - Current user pane (hard hatted torso person)
            - Memos (inbox looking thing)
            - Notification subscriptions (loudhorn but not 3d, flat side view instead, looks more like a hatchet, man these old icons are fucked and confusing)
            - Notification deliveries (loudhorn but smaller and on top of a sheet of paper)
            - Wiki page (atomic diagram looking thing)
        - Search (magnifying glass)
        - Administration (torso with suit and set of keys superimposed)
            - Global settings (planet right on the nose)
            - Regions (pie chart with wedge extracted slightly)
            - Security groups (keys)
            - Users (hard hatted torso but front on and flat)
            - Custom field ("Abc", probably the font chooser icon in most apps)
            - Localized text design (address card)
            - Notification deliveries (bull horn / hatchet and sheet of paper)
            - Report templates (sheet of paper and small rubber stamp)
            - Files in database (filing cabinet)
            - Schedule markers (post it note with pin and folded up lower right corner)
        - WIKI (atomic nucleus diagram / weird flower)
        - GENERAL UI
            - Delete (red circle with white X through it)
            - OK / ACCEPT (Green circle with white checkmark through it)
            - Cancel (orange circle with white "forbidden" bar across it diagonally from top right to lower left)
            - Save (3.5'' diskette!?)
            - Document attachments (two hardcover books back to back on an angle in 3d)
            - Record history (analog clock face)
            - Follow up (schedule marker post-it note with a chain link overtop of it)
            - Print / report (inkjet printer)
            - Duplicate (rabbit)
            - Plugin (puzzle piece)
            - Attach file [wiki] (file folder)
            - Edit [wiki] (pencil)
            - Reply [memo] (inbox used for memo with left facing green arrow superimposed)
            - Forward [memo] (inbox used for memo with right facing green arrow superimposed)
            - Recent [MRU on main menu] (binoculars)




LOGO
    - Need to standardize on a logo and stick to it from now on
    - Simple and clean (script AyaNova used for RI is maybe out)
    - Single colour canucks blue with green contrast if absolutely necessary (don't make it necessary)
    
COLOURS
    - Canucks colours of course, Blue primary and green secondary. RI already uses them, get the hex codes there.
    - No indigo or pastels 



=-=-=-=-=-
Ref material kept for new icons possibly:
<!--    

  <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-tachometer-alt</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-toolbox</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Service</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-pen</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Quotes</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-business-time</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Preventive maintenance</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-calendar-alt</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Schedule</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-dolly</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Inventory</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-address-book</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Clients</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-hockey-puck</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Units</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-shopping-basket</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Vendors</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>fa-user</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>currentuser</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-group prepend-icon="fa-cogs" value="true" no-action>
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>Administration</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-globe</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Global settings</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-users</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Users</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-infinity</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Custom fields</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-language</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Localization</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-broadcast-tower</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Notification deliveries</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-pen-fancy</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Report templates</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-hdd</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Files</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click=";">
            <v-list-tile-action>
              <v-icon>fa-lightbulb</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Reminders</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list-group> 
        -->