root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix(export): style fixes and markup fixes for share modal

This commit is contained in:
Torkel Ödegaard 2016-05-25 13:01:40 +02:00
parent fc2a069180
commit 201d30a944
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i class="fa fa-code"></i> <i class="fa fa-code"></i>
</div> </div>
<div> <div class="share-modal-content">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
The html code below can be pasted and included in another web page. Unless anonymous access The html code below can be pasted and included in another web page. Unless anonymous access
is enabled the user viewing that page need to be signed into grafana for the graph to load. is enabled the user viewing that page need to be signed into grafana for the graph to load.
@ -37,9 +37,9 @@
<div ng-include src="'shareLinkOptions.html'"></div> <div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form-group section"> <div class="gf-form-group gf-form--grow">
<div class="gf-form width-30"> <div class="gf-form">
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea> <textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
</div> </div>
</div> </div>
</div> </div>
@ -51,7 +51,7 @@
</script> </script>
<script type="text/ng-template" id="shareLinkOptions.html"> <script type="text/ng-template" id="shareLinkOptions.html">
<div class="gf-form-group section"> <div class="gf-form-group">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Current time range" label-class="width-12" switch-class="max-width-6" label="Current time range" label-class="width-12" switch-class="max-width-6"
checked="options.forCurrent" on-change="buildUrl()"> checked="options.forCurrent" on-change="buildUrl()">
@ -74,24 +74,24 @@
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i class="fa fa-link"></i> <i class="fa fa-link"></i>
</div> </div>
<div> <div class="share-modal-content">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below. Create a direct link to this dashboard or panel, customized with the options below.
</p> </p>
<div ng-include src="'shareLinkOptions.html'"></div> <div ng-include src="'shareLinkOptions.html'"></div>
<div> <div>
<div class="gf-form-group section"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form width-30"> <div class="gf-form gf-form--grow">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input> <input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div> </div>
<div class="gf-form pull-right"> <div class="gf-form">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button> <button class="btn btn-inverse" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form section" ng-show="modeSharePanel"> <div class="gf-form" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a> <a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div> </div>
</div> </div>
@ -99,21 +99,23 @@
<script type="text/ng-template" id="shareSnapshot.html"> <script type="text/ng-template" id="shareSnapshot.html">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()"> <div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-header" ng-if="step === 1"> <div class="share-modal-header">
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> <i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i> <i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
</div> </div>
<div> <div class="share-modal-content">
<p class="share-modal-info-text"> <div ng-if="step === 1">
A snapshot is an instant way to share an interactive dashboard publicly. <p class="share-modal-info-text">
When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links, A snapshot is an instant way to share an interactive dashboard publicly.
leaving only the visible metric data and series names embedded into your dashboard. When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
</p> leaving only the visible metric data and series names embedded into your dashboard.
<p class="share-modal-info-text"> </p>
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL. <p class="share-modal-info-text">
Share wisely. Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
</p> Share wisely.
</p>
</div>
<div class="share-modal-header" ng-if="step === 3"> <div class="share-modal-header" ng-if="step === 3">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
@ -141,7 +143,7 @@
{{snapshotUrl}} {{snapshotUrl}}
</a> </a>
<br> <br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button> <button class="btn btn-inverse" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -150,6 +150,10 @@
margin: 0px 0 22px 0; margin: 0px 0 22px 0;
} }
.share-modal-content {
flex-grow: 1;
}
.tight-form { .tight-form {
text-align: left; text-align: left;
} }