pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #164 from dod-ccpo/ui/tooltips

Browse Source 
UI/tooltips
This commit is contained in:
andrewdds
2018-08-14 08:48:32 -04:00
committed by GitHub
parent 4d7067ae22 3a5f8694ba
commit c05e72d98f
16 changed files with 280 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/base.html
View File

@@ -3,11 +3,12 @@
{% set context=g.navigationContext %}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}JEDI{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}JEDI Cloud{% endblock %}</title>
{% assets "css" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
{% endassets %}

10
templates/components/options_input.html
View File

@@ -1,19 +1,23 @@
{% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}
{% macro OptionsInput(field, inline=False) -%}
{% macro OptionsInput(field, tooltip, inline=False) -%}
<optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
<fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
<legend>
{{ field.label | striptags}}
<div class="usa-input__title">
{{ field.label | striptags}}
{% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
</div>
{% if field.description %}
<span class='usa-input__help'>{{ field.description | safe }}</span>
{% endif %}
{% if field.errors %}
{{ Icon('alert') }}
{{ Icon('alert',classes="icon-validation") }}
{% endif %}
</legend>

11
templates/components/text_input.html
View File

@@ -1,6 +1,7 @@
{% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}
{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False) -%}
<textinput
name='{{ field.name }}'
validation='{{ validation }}'
@@ -13,14 +14,14 @@
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<label for={{field.name}}>
{{ field.label | striptags }}
<div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
{% if field.description %}
<span class='usa-input__help'>{{ field.description | safe }}</span>
{% endif %}
<span v-show='showError'>{{ Icon('alert') }}</span>
<span v-show='showValid'>{{ Icon('ok') }}</span>
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
</label>
@@ -61,5 +62,5 @@
</template>
</div>
</textinput>
</textinput>
{%- endmacro %}

9
templates/components/tooltip.html Normal file
View File

@@ -0,0 +1,9 @@
{% from "components/icon.html" import Icon %}
{% macro Tooltip(message,title='Help') -%}
<span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
{{ Icon('help') }}<span>{{ title }}</span>
</span>
{%- endmacro %}

22
templates/requests/screen-1.html
View File

@@ -25,34 +25,36 @@
<h2>General</h2>
{{ OptionsInput(f.dod_component) }}
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="Briefly describe how you are expecting to use the JEDI Cloud. \n e.g. We are migrating XYZ application to the cloud so that...",tooltip="Your answer will help us provide tangible examples to DoD leadership how and why commercial cloud resources are accelerating the Department\\'s missions.") }}
<h2>Cloud Readiness</h2>
{{ TextInput(f.num_software_systems, validation='integer') }}
{{ OptionsInput(f.jedi_migration) }}
{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }}
{{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
<template v-if="jediMigrationOptionSelected">
<template v-if='isJediMigration' v-cloak>
{{ OptionsInput(f.rationalization_software_systems) }}
{{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
{{ OptionsInput(f.technical_support_team) }}
<template v-if="hasTechnicalSupportTeam">
{{ OptionsInput(f.organization_providing_assistance) }}
</template>
{{ OptionsInput(f.engineering_assessment) }}
{{ OptionsInput(f.engineering_assessment, tooltip="An engineering assessment is an evaluation to convert your application architecture from on-premises to using the commercial cloud") }}
{{ OptionsInput(f.data_transfers) }}
{{ OptionsInput(f.expected_completion_date) }}
</template>
<template v-else-if='!isJediMigration' v-cloak>
{{ OptionsInput(f.cloud_native) }}
{{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
</template>
</template>
<h2>Financial Usage</h2>
{{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
<p>So this means you are spending approximately <b>!{ annualSpendStr }</b> annually</p>
{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }}
<p>So this means you are spending approximately <span class="label">!{ annualSpendStr }</span> annually</p>
{{ TextInput(f.dollar_value, validation='dollars') }}
<template v-if="annualSpend > 1000000">
{{ TextInput(f.number_user_sessions, validation='integer') }}
{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
{{ TextInput(f.number_user_sessions, validation='integer') }}
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }}
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes") }}
</template>
{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}

5
templates/requests/screen-2.html
View File

@@ -24,11 +24,10 @@
{{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }}
{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
<p>We want to collect the following information from you for security auditing and determining priviledged user access</p>
<p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>
{{ TextInput(f.service_branch,placeholder='e.g. US Air Force, US Army, US Navy, Marine Corps, Defense Media Agency') }}
{{ OptionsInput(f.citizenship) }}
{{ OptionsInput(f.designation) }}
{{ TextInput(f.date_latest_training, placeholder='MM / DD / YYYY', validation='date') }}
{{ TextInput(f.date_latest_training,tooltip="When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.",placeholder="MM / DD / YYYY", validation="date") }}
{% endblock %}

7
templates/requests/screen-4.html
View File

@@ -98,10 +98,15 @@
</div>
<div>
<dt>Average Daily Traffic</dt>
<dt>Average Daily Traffic (Number of Requests)</dt>
<dd>{{data['details_of_use']['average_daily_traffic']}}</dd>
</div>
<div>
<dt>Average Daily Traffic (GB)</dt>
<dd>{{data['details_of_use']['average_daily_traffic_gb']}}</dd>
</div>
<div>
<dt>Start Date</dt>
<dd>{{data['details_of_use']['start_date']}}</dd>

23
templates/styleguide.html
View File

@@ -3,6 +3,7 @@
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/alert.html" import Alert %}
{% from "components/tooltip.html" import Tooltip %}
{% block content %}
@@ -128,7 +129,6 @@
<div class='col col--grow'>col 12</div>
</div>
<form>
<textinput inline-template validation='dollars' value='1231231'>
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
@@ -286,6 +286,27 @@
</div>
</div>
<div class="panel">
<div class="panel__content">
<h5>Tooltips</h5>
{{ Tooltip('this is a tooltip text') }}<code>default</code> <br>
<span v-tooltip.top-start="'this is a tooltip text'">{{ Icon('help') }}</span><code>top-start</code> <br>
<span v-tooltip.right="'this is a tooltip text'">{{ Icon('help') }}</span><code>right</code> <br>
<span v-tooltip.bottom="'this is a tooltip text'">{{ Icon('help') }}</span><code>bottom</code> <br>
</div>
</div>
<div class="panel">
<div class="panel__content">
<h5>Labels</h5>
<span class="label">Label</span>
<span class="label label--info">Label Info</span>
<span class="label label--warning">Label Warning</span>
<span class="label label--error">Label Error</span>
<span class="label label--success">Label Success</span>
</div>
</div>
<div class='panel'>
Another panel without padding
</div>