IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): work on new modal design #4191

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-02 21:27:08 +01:00
parent fd1a0edf7f
commit 8bc1af9d1a
5 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -160,6 +160,7 @@ export class DashNavCtrl {
$scope.appEvent('show-modal', {
src: 'public/app/features/dashboard/partials/saveDashboardAs.html',
scope: newScope,
modalClass: 'modal--narrow'
});
};

29
public/app/features/dashboard/partials/saveDashboardAs.html
View File

@ -1,23 +1,24 @@
<div class="modal-body gf-box gf-box-no-margin" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
<div class="gf-box-header">
<div class="gf-box-title">
<div class="modal-body" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-copy"></i>
Save As...
</div>
<span class="p-l-1">Save As...</span>
</h2>
<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">
<div class="text-center">
<h4>New title</h4>
<input type="text" class="input input-fluid" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
<br>
<br>
<div class="modal-content">
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-label">New name</label>
<input type="text" class="gf-form-input" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
</div>
</div>
<div class="gf-form-button-row text-center">
<a class="btn btn-success" ng-click="saveClone();">Save</a>
<a class="btn-text" ng-click="dismiss();">Cancel</a>
</div>

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

@ -18,7 +18,7 @@
</a>
</div>
<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<div ng-include src="tab.src" class="share-modal-body"></div>
</div>
@ -86,10 +86,8 @@
</div>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form position-center" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
<div class="gf-form position-center" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</script>

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

@ -9,7 +9,7 @@
</a>
</div>
<div class="p-a-2">
<div class="modal-content">
<div class="modal-tagline p-b-2">
Send invite or add existing Grafana users to the organization
@ -42,7 +42,7 @@
<div class="gf-form-inline gf-form-group">
<div class="gf-form">
<a class="btn btn-secondary gf-form-btn" ng-click="addInvite()">
<a class="btn btn-inverse btn-small" ng-click="addInvite()">
<i class="fa fa-plus"></i>
Invite another
</a>

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

@ -28,7 +28,7 @@
@include background-clip(padding-box);
outline: none;
max-width: 800px;
max-width: 750px;
left: 0;
right: 0;
margin-left: auto;
@ -56,7 +56,7 @@
.modal-header-close {
float: right;
padding: ($tabs-padding-top + $tabs-top-margin/2) $spacer $tabs-padding-bottom;
padding: 0.75rem $spacer;
}
// Body (where all modal content resides)
@ -65,6 +65,10 @@
overflow-y: auto;
}
.modal-content {
padding: $spacer*2;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
@ -98,6 +102,10 @@
}
}
.modal--narrow {
max-width: 500px;
}
.confirm-modal {
max-width: 500px;