IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): worked on new modal design #4191

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-02 20:56:04 +01:00
parent 4c83dba183
commit fd1a0edf7f
7 changed files with 87 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/features/dashboard/partials/shareModal.html
View File

@ -1,18 +1,21 @@
<div class="modal-body gf-box gf-box-no-margin" ng-controller="ShareModalCtrl" ng-init="init()">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-share"></i>
<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
<div class="modal-header">
<h2 class="modal-header-title">
{{modalTitle}}
</div>
</h2>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}">
</div>
</div>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in tabs">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab.title}}
</a>
</li>
</ul>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</a>
</div>
<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
@ -50,13 +53,15 @@
<script type="text/ng-template" id="shareLinkOptions.html">
<div class="gf-form-group position-center">
<div class="gf-form">
<span class="gf-form-label width-5">Include</span>
<editor-checkbox text="Current time range" model="options.forCurrent" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
<span class="gf-form-label width-5">Include</span>
<editor-checkbox text="Template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label">Theme</span>
<span class="gf-form-label width-5">Theme</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</div>

2
public/app/features/org/org_users_ctrl.ts
View File

@ -75,7 +75,7 @@ export class OrgUsersCtrl {
this.$scope.appEvent('show-modal', {
src: 'public/app/features/org/partials/invite.html',
modalClass: 'modal-no-header invite-modal',
modalClass: 'invite-modal',
scope: modalScope
});
}

71
public/app/features/org/partials/invite.html
View File

@ -1,55 +1,62 @@
<div class="modal-body" ng-controller="UserInviteCtrl" ng-init="init()">
<a class="modal-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
<div class="modal-header">
<h2 class="modal-header-title">
Invite Users
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="p-a-2">
<h1>
Invite Users
</h1>
<div class="modal-tagline">
<div class="modal-tagline p-b-2">
Send invite or add existing Grafana users to the organization
<span class="highlight-word">{{contextSrv.user.orgName}}</span>
</div>
<br>
<br>
<form name="inviteForm">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
</div>
<div class="gf-form gf-size-auto">
<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
<i class="fa fa-remove"></i>
</a>
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
</div>
<div class="gf-form gf-size-auto">
<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</div>
<div style="margin-top: 20px; text-align: left;">
<a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a>
<div class="gf-form" style="margin-top: 20px">
<div class="gf-form-inline gf-form-group">
<div class="gf-form">
<a class="btn btn-secondary gf-form-btn" ng-click="addInvite()">
<i class="fa fa-plus"></i>
Invite another
</a>
</div>
<div class="gf-form">
<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
</div>
</div>
<div class="" style="margin-top: 30px; margin-bottom: 20px;">
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
<a class="btn-text" ng-click="dismiss()">Cancel</a>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>

5
public/sass/_variables.scss
View File

@ -225,3 +225,8 @@ $side-menu-width: 14rem;
$panel-margin: 0.4rem;
$dashboard-padding: ($panel-margin * 2) $panel-margin $panel-margin $panel-margin;
// tabs
$tabs-padding-top: 0.6rem;
$tabs-padding-bottom: 0.4rem;
$tabs-top-margin: 0.5rem;

22
public/sass/components/_modals.scss
View File

@ -37,8 +37,26 @@
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid $panel-bg;
background-color: $body-bg;
@include brand-bottom-border();
@include clearfix();
.gf-tabs-link.active {
background-color: $panel-bg;
}
}
.modal-header-title {
font-style: italic;
font-size: $font-size-h3;
float: left;
padding-top: $spacer * 0.75;
margin: 0 $spacer*3 0 $spacer*1.5;
}
.modal-header-close {
float: right;
padding: ($tabs-padding-top + $tabs-top-margin/2) $spacer $tabs-padding-bottom;
}
// Body (where all modal content resides)

4
public/sass/components/_tabbed_view.scss
View File

@ -28,7 +28,7 @@
float: left;
font-style: italic;
padding-top: 0.5rem;
margin: 0 $spacer*1.5 0 $spacer*1.5;
margin: 0 $spacer*3 0 $spacer*1.5;
}
.tabbed-view-close-btn {
@ -37,7 +37,7 @@
margin: 0;
background-color: transparent;
border: none;
padding: $spacer * 0.8;
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
i {
font-size: 120%;
}

4
public/sass/components/_tabs.scss
View File

@ -35,7 +35,7 @@
.gf-tabs {
@include clearfix();
float: left;
margin: 0.4rem 0 0 0;
margin: $tabs-top-margin 0 0 0;
}
.gf-tabs-item {
@ -44,7 +44,7 @@
}
.gf-tabs-link {
padding: 0.60rem 1rem 0.50rem 1rem;
padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer;
margin-right: $spacer/2;
border: 1px solid transparent;
position: relative;