Skip to content
Snippets Groups Projects
Commit 8ad3b7ce authored by Allen Gilliland's avatar Allen Gilliland
Browse files

admin forms updated with all the latest stylings.

parent f08c7908
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/admin/databases/partials/database_edit.html
+ 36
− 27
View file @ 8ad3b7ce
......@@ -6,59 +6,68 @@
<h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
</section>
<section class="Grid Grid--gutters Grid--1of3">
<section class="Grid Grid--gutters Grid--full">
<!-- form -->
<div class="Grid-cell Cell--2of3">
<form class="bg-white rounded bordered shadowed" name="form" novalidate>
<form class="Form-new bordered rounded shadowed" name="form" novalidate>
<div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
<div class="Form-field">
<label class="Form-label">Database Type:</label>
<label class="Select">
<div class="Form-field" ng-class="{'Form--fieldError': form.engine.$error.message !== undefined}">
<mb-form-label form="form" display-name="Database type" field-name="engine"></mb-form-label>
<label class="Select Form-input Form-offset">
<select name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
</label>
</div>
<div class="Form-field" ng-init="" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
<label class="Form-label Form-offset">Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
<input class="Form-input Form-offset full" name="name" ng-model="database.name" />
<div class="Form-field" ng-class="{'Form--fieldError': form.name.$error.message !== undefined}">
<mb-form-label form="form" display-name="Name" field-name="name"></mb-form-label>
<input class="Form-input Form-offset full" name="name" placeholder="How would you like to refer to this database?" ng-model="database.name" required />
<span class="Form-charm"></span>
</div>
<!-- TODO: database type dependent inputs -->
<div class="FormInputGroup" ng-show="database.engine == 'postgres'">
<div class="Form-field" ng-class="{'FormFieldError': form.host.$error.message != undefined}">
<label class="Form-label Form-offset">Host: <span ng-show="form.host.$error.message">{{form.host.$error.message}}</span></label>
<input class="Form-input Form-offset full" name="host" ng-model="details.host" required />
<div class="Form-field" ng-class="{'Form--fieldError': form.host.$error.message !== undefined}">
<mb-form-label form="form" display-name="Host" field-name="host"></mb-form-label>
<input class="Form-input Form-offset full" name="host" placeholder="localhost" ng-model="details.host" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'Form--error': form.port.$error.message == undefined}">
<label class="Form-label">Port: <span ng-show="form.port.$error.message">{{form.port.$error.message}}</span></label>
<input class="Form-input full" name="port" ng-model="details.port" required />
<div class="Form-field" ng-class="{'Form--fieldError': form.port.$error.message !== undefined}">
<mb-form-label form="form" display-name="Port" field-name="port"></mb-form-label>
<input class="Form-input Form-offset full" name="port" placeholder="5432" ng-model="details.port" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.dbname.$error.message == undefined}">
<label class="Form-label">Database name: <span ng-show="form.dbname.$error.message">{{form.dbname.$error.message}}</span></label>
<input class="Form-input full" name="dbname" ng-model="details.dbname" />
<div class="Form-field" ng-class="{'Form--fieldError': form.dbname.$error.message !== undefined}">
<mb-form-label form="form" display-name="Database name" field-name="dbname"></mb-form-label>
<input class="Form-input Form-offset full" name="dbname" placeholder="What is the name of your database?" ng-model="details.dbname" />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.user.$error.message == undefined}">
<label class="Form-label">Database username: <span ng-show="form.user.$error.message">{{form.user.$error.message}}</span></l abel>
<input class="Form-input full" name="user" ng-model="details.user" required />
<div class="Form-field" ng-class="{'Form--fieldError': form.user.$error.message !== undefined}">
<mb-form-label form="form" display-name="Database username" field-name="user"></mb-form-label>
<input class="Form-input Form-offset full" name="user" placeholder="What username do you use to login to the database?" ng-model="details.user" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormField--error': form.pass.$error.message == undefined}">
<label class="Form-label">Database password: <span ng-show="form.pass.$error.message">{{form.pass.$error.message}}</span></label>
<input class="Form-input full" name="pass" ng-model="details.pass" />
<div class="Form-field" ng-class="{'Form--fieldError': form.pass.$error.message !== undefined}">
<mb-form-label form="form" display-name="Database password" field-name="pass"></mb-form-label>
<input class="Form-input Form-offset full" name="pass" placeholder="*******" ng-model="details.pass" />
<span class="Form-charm"></span>
</div>
</div>
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
Save
</button>
<div class="Form-actions">
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
Save
</button>
</div>
</form>
</div>
<!-- actions -->
<div class="Grid-cell">
<div class="Grid-cell Cell--1of3">
<div class="Actions">
<h3>Actions</h3>
<div class="Actions-group">
......
resources/frontend_client/app/admin/emailreport/partials/emailreport_detail.html
+ 52
− 35
View file @ 8ad3b7ce
......@@ -6,72 +6,89 @@
<h2 class="Breadcrumb Breadcrumb--page" ng-if="report.id">{{report.name}}</h2>
</section>
<section class="Grid Grid--gutters">
<section class="Grid Grid--gutters Grid--full">
<!-- form -->
<div class="Grid-cell p4 bordered rounded shadowed">
<form name="form" novalidate>
<div class="Form-field" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
<div class="Grid-cell Cell--2of3">
<form class="Form-new bordered rounded shadowed" name="form" novalidate>
<div class="Form-field" ng-class="{'Form--fieldError': form.name.$error.message !== undefined}">
<mb-form-label form="form" display-name="Name" field-name="name"></mb-form-label>
<input class="Form-input full" name="name" ng-model="report.name" required />
<input class="Form-input Form-offset full" name="name" placeholder="How would you like to refer to this report?" ng-model="report.name" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.description.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.description.$error.message !== undefined}">
<mb-form-label form="form" display-name="Description" field-name="description"></mb-form-label>
<input class="Form-input full" name="description" ng-model="report.description" />
<input class="Form-input Form-offset full" name="description" placeholder="What should people know about this report?" ng-model="report.description" />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.mode.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.mode.$error.message !== undefined}">
<mb-form-label form="form" display-name="Mode" field-name="mode"></mb-form-label>
<div class="Button-group">
<button class="Button" ng-class="{ 'Button--active' : report.mode === 1 }" ng-click="report.mode = 1" ng-disabled>Active</button>
<button class="Button" ng-class="{ 'Button--disabled' : report.mode === 2 }" ng-click="report.mode = 2">Disabled</button>
<div class="Form-offset">
<div class="Button-group">
<!-- TODO: hardcoding values :( -->
<button class="Button" ng-class="{'Button--active': report.mode === 1}" ng-click="report.mode = 1" ng-disabled>Active</button>
<button class="Button" ng-class="{'Button--disabled': report.mode === 2}" ng-click="report.mode = 2">Disabled</button>
</div>
</div>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.public_perms.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.public_perms.$error.message !== undefined}">
<mb-form-label form="form" display-name="Permissions" field-name="public_perms"></mb-form-label>
<select class="Select" name="public_perms" ng-model="report.public_perms" ng-options="perm.id as perm.name for perm in form_input.permissions" required ></select>
<label class="Select Form-offset">
<select name="public_perms" ng-model="report.public_perms" ng-options="perm.id as perm.name for perm in form_input.permissions" required ></select>
</label>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.recipients.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.recipients.$error.message !== undefined}">
<mb-form-label form="form" display-name="Recipients" field-name="recipients"></mb-form-label>
<ul class="Checkbox-group">
<ul class="Checkbox-group Form-offset">
<li ng-repeat="user in form_input.users">
<input type="checkbox" ng-model="user.incl" /> {{user.name}}
</li>
</li>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.email_addresses.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.email_addresses.$error.message !== undefined}">
<mb-form-label form="form" display-name="Email aliases" field-name="email_addresses"></mb-form-label>
<textarea class="Form-input full" name="email_addresses" ng-model="report.email_addresses" placeholder="Enter emails (separated by commas) of other recipients, who may need this email"></textarea>
<textarea class="Form-input Form-offset full" name="email_addresses" ng-model="report.email_addresses" placeholder="Enter emails (separated by commas) of other recipients, who may need this email"></textarea>
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.dataset_query.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.dataset_query.$error.message !== undefined}">
<mb-form-label form="form" display-name="Email contents" field-name="dataset_query"></mb-form-label>
<select class="Select" ng-model="report.dataset_query.database" ng-options="db.id as db.name for db in form_input.databases" ng-change="refreshTableList(report.dataset_query.database)">
<option value="">Select a database</option>
</select>
<select class="Select" name="dataset_query" ng-model="report.dataset_query.query.source_table" ng-options="tbl.id as tbl.name for tbl in tables" ng-disabled="!report.dataset_query.database">
<option value="">Select a table</option>
</select>
<label class="Select Form-offset">
<select ng-model="report.dataset_query.database" ng-options="db.id as db.name for db in form_input.databases" ng-change="refreshTableList(report.dataset_query.database)">
<option value="">Select a database</option>
</select>
</label>
<label class="Select Form-offset">
<select class="Select" name="dataset_query" ng-model="report.dataset_query.query.source_table" ng-options="tbl.id as tbl.name for tbl in tables" ng-disabled="!report.dataset_query.database">
<option value="">Select a table</option>
</select>
</label>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.schedule.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.schedule.$error.message !== undefined}">
<mb-form-label form="form" display-name="Schedule" field-name="schedule"></mb-form-label>
<div class="Button-group">
<button class="Button" ng-class="{ 'Button--active' : report.schedule.days_of_week[day.id] }" ng-model="report.schedule.days_of_week[day.id]" ng-repeat="day in form_input.days_of_week" btn-checkbox>{{day.name}}</button>
<div class="Form-offset">
<div class="Button-group">
<button class="Button" ng-class="{ 'Button--active' : report.schedule.days_of_week[day.id] }" ng-model="report.schedule.days_of_week[day.id]" ng-repeat="day in form_input.days_of_week" btn-checkbox>{{day.name}}</button>
</div>
</div>
<select ng-model="report.schedule.time_of_day" ng-options="tod.id as tod.name for tod in form_input.times_of_day">
</select>
<select ng-model="report.schedule.timezone" ng-options="tz for tz in form_input['timezones']">
<option value="">--- default timezone ---</option>
</select>
<label class="Select Form-offset">
<select ng-model="report.schedule.time_of_day" ng-options="tod.id as tod.name for tod in form_input.times_of_day"></select>
</label>
<label class="Select Form-offset">
<select ng-model="report.schedule.timezone" ng-options="tz for tz in form_input['timezones']">
<option value="">--- default timezone ---</option>
</select>
</label>
<span class="py1">{{human_readable_schedule}}</span>
<span class="py1 Form-offset">{{human_readable_schedule}}</span>
</div>
<div>
<div class="Form-actions">
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(report)" ng-disabled="!form.$valid || report.dataset_query.query.source_table == ''">
Save
</button>
......@@ -82,7 +99,7 @@
</div>
<!-- actions -->
<div class="Grid-cell" ng-if="report.id">
<div class="Grid-cell Cell--1of3" ng-if="report.id">
<div class="Actions">
<h3>Actions</h3>
<div class="Actions-group">
......
resources/frontend_client/app/admin/people/partials/people_add.html
+ 13
− 10
View file @ 8ad3b7ce
......@@ -5,27 +5,30 @@
<h2 class="Breadcrumb Breadcrumb--page">Add person</h2>
</section>
<section class="Grid Grid--1of2">
<div class="Grid-cell p4 bordered rounded shadowed">
<form name="form" novalidate>
<section class="Grid Grid--gutters Grid--full Grid--2of3">
<div class="Grid-cell Cell--2of3">
<form class="Form-new bordered rounded shadowed" name="form" novalidate>
<div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
<div class="Form-field" ng-class="{'FormFieldError': form.first_name.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.first_name.$error.message !== undefined}">
<mb-form-label form="form" display-name="First name" field-name="first_name"></mb-form-label>
<input class="Form-input full" name="first_name" placeholder="John" ng-model="newUser.first_name" required />
<input class="Form-input Form-offset full" name="first_name" placeholder="John" ng-model="newUser.first_name" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.last_name.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.last_name.$error.message !== undefined}">
<mb-form-label form="form" display-name="Last name" field-name="last_name"></mb-form-label>
<input class="Form-input full" name="last_name" placeholder="Doe" ng-model="newUser.last_name" required />
<input class="Form-input Form-offset full" name="last_name" placeholder="Doe" ng-model="newUser.last_name" required />
<span class="Form-charm"></span>
</div>
<div class="Form-field" ng-class="{'FormFieldError': form.email.$error.message == undefined}">
<div class="Form-field" ng-class="{'Form--fieldError': form.email.$error.message !== undefined}">
<mb-form-label form="form" display-name="Email" field-name="email"></mb-form-label>
<input class="Form-input full" name="email" placeholder="johndoe@mycompany.com" ng-model="newUser.email" required />
<input class="Form-input Form-offset full" name="email" placeholder="johndoe@mycompany.com" ng-model="newUser.email" required />
<span class="Form-charm"></span>
</div>
<div>
<div class="Form-actions">
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(newUser)" ng-disabled="!form.$valid">
Create
</button>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment