mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
Styling update on the activity stream action details modal. Removed its dependency on the form generator and moved it out into a directive.
This commit is contained in:
Michael Abashian
parent
a2cf365325
commit
49a458b178
@ -7,7 +7,9 @@
|
||||
import activityStreamRoute from './activitystream.route';
|
||||
import activityStreamController from './activitystream.controller';
|
||||
|
||||
export default angular.module('activityStream', [])
|
||||
import streamDetailModal from './streamDetailModal/main';
|
||||
|
||||
export default angular.module('activityStream', [streamDetailModal.name])
|
||||
.controller('activityStreamController', activityStreamController)
|
||||
.run(['$stateExtender', function($stateExtender) {
|
||||
$stateExtender.addState(activityStreamRoute);
|
||||
|
||||
11
awx/ui/client/src/activity-stream/streamDetailModal/main.js
Normal file
11
awx/ui/client/src/activity-stream/streamDetailModal/main.js
Normal file
@ -0,0 +1,11 @@
|
||||
/*************************************************
|
||||
* Copyright (c) 2015 Ansible, Inc.
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
import streamDetailModalDirective from './streamDetailModal.directive';
|
||||
|
||||
export default
|
||||
angular.module('streamDetailModal', [])
|
||||
.directive('streamDetailModal', streamDetailModalDirective);
|
||||
@ -0,0 +1,35 @@
|
||||
@import "../shared/branding/colors.default.less";
|
||||
|
||||
.Detail-actionButton {
|
||||
padding: 4px 25px!important;
|
||||
}
|
||||
|
||||
.Detail-inlineRow {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Detail-rowTitle {
|
||||
color: @default-interface-txt;
|
||||
}
|
||||
|
||||
.Detail-inlineRowTitle {
|
||||
flex: 0 0 110px;
|
||||
}
|
||||
|
||||
.Detail-inlineRowData {
|
||||
flex: 1 0;
|
||||
}
|
||||
|
||||
.Detail-changesRowTitle {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.Detail-changes {
|
||||
border: none;
|
||||
background-color: @default-secondary-bg;
|
||||
margin-bottom: 0;
|
||||
max-height: 200px;
|
||||
overflow: scroll;
|
||||
color: @as-detail-changes-txt;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/*************************************************
|
||||
* Copyright (c) 2015 Ansible, Inc.
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
/* jshint unused: vars */
|
||||
export default
|
||||
[ 'templateUrl',
|
||||
function(templateUrl) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
replace: true,
|
||||
templateUrl: templateUrl('activity-stream/streamDetailModal/streamDetailModal')
|
||||
};
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,29 @@
|
||||
<div id="stream-detail-modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="Modal-content modal-content">
|
||||
<div class="Modal-header">
|
||||
<div class="Modal-title" id="detail-header" ng-bind-html="header"></div>
|
||||
<div class="Modal-exitHolder">
|
||||
<button class="close Modal-exit" data-target="#stream-detail-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Modal-body" id="detail-body">
|
||||
<div ng-show="user" class="Detail-inlineRow">
|
||||
<div class="Detail-rowTitle Detail-inlineRowTitle">INITIATED BY</div>
|
||||
<div class="Detail-inlineRowData" ng-bind="user"></div>
|
||||
</div>
|
||||
<div ng-show="operation" class="Detail-inlineRow">
|
||||
<div class="Detail-rowTitle Detail-inlineRowTitle">ACTION</div>
|
||||
<div class="Detail-inlineRowData" ng-bind="operation"></div>
|
||||
</div>
|
||||
<div ng-show="changes">
|
||||
<div class="Detail-rowTitle Detail-changesRowTitle">CHANGES</div>
|
||||
<pre class="Detail-changes">{{ changes | json : spacing}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Modal-footer">
|
||||
<a href="#" data-target="#stream-detail-modal" data-dismiss="modal" id="action_cancel_btn" class="btn Modal-defaultButton Modal-footerButton Detail-actionButton">OK</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -152,3 +152,6 @@
|
||||
// panel
|
||||
@panel-bg: @default-bg;
|
||||
@panel-border: @default-border;
|
||||
|
||||
// activity stream details modal
|
||||
@as-detail-changes-txt: #707070;
|
||||
|
||||
105
awx/ui/client/src/shared/modal/modal.less
Normal file
105
awx/ui/client/src/shared/modal/modal.less
Normal file
@ -0,0 +1,105 @@
|
||||
@import "awx/ui/client/src/shared/branding/colors.default.less";
|
||||
|
||||
.Modal-content {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
flex-direction: row;
|
||||
padding: 15px 20px;
|
||||
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.Modal-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.Modal-title {
|
||||
flex: 1 0 auto;
|
||||
text-transform: uppercase;
|
||||
color: @list-header-txt;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.Modal-exitHolder{
|
||||
justify-content: flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.Modal-exit{
|
||||
cursor:pointer;
|
||||
padding:0px;
|
||||
border: none;
|
||||
height:20px;
|
||||
font-size: 20px;
|
||||
background-color:@default-bg;
|
||||
color:@default-icon;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.Modal-exit:hover{
|
||||
color:@default-icon-hov;
|
||||
}
|
||||
|
||||
.Modal-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Modal-bodyQuery {
|
||||
margin-bottom: 20px;
|
||||
color: @default-interface-txt;
|
||||
}
|
||||
|
||||
.Modal-bodyTarget {
|
||||
color: @default-data-txt;
|
||||
}
|
||||
|
||||
.Modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Modal-defaultButton {
|
||||
background-color: @default-bg;
|
||||
color: @btn-txt;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
border: 1px solid @btn-bord;
|
||||
transition: background-color 0.2s;
|
||||
padding-left:15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.Modal-defaultButton:hover {
|
||||
background-color: @btn-bg-hov;
|
||||
color: @btn-txt;
|
||||
}
|
||||
|
||||
.Modal-errorButton {
|
||||
background-color: @default-err;
|
||||
color: @btn-txt-sel;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s;
|
||||
padding-left:15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.Modal-errorButton:hover {
|
||||
background-color: @default-err-hov;
|
||||
color: @btn-txt-sel;
|
||||
}
|
||||
|
||||
.Modal-footerButton {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.Modal-footerButton + .Modal-footerButton {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -45,7 +45,7 @@ angular.module('PromptDialog', ['Utilities', 'sanitizeFilter'])
|
||||
|
||||
local_backdrop = (params.backdrop === undefined) ? "static" : params.backdrop;
|
||||
|
||||
cls = (params['class'] === null || params['class'] === undefined) ? 'Prompt-errorButton' : params['class'];
|
||||
cls = (params['class'] === null || params['class'] === undefined) ? 'Modal-errorButton' : params['class'];
|
||||
|
||||
$('#prompt_action_btn').removeClass(cls).addClass(cls);
|
||||
|
||||
|
||||
@ -1,54 +1,5 @@
|
||||
@import "awx/ui/client/src/shared/branding/colors.default.less";
|
||||
|
||||
.Prompt-content {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
flex-direction: row;
|
||||
padding: 15px 20px;
|
||||
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.Prompt-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.Prompt-title {
|
||||
flex: 1 0 auto;
|
||||
text-transform: uppercase;
|
||||
color: @list-header-txt;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.Prompt-exitHolder{
|
||||
justify-content: flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.Prompt-exit{
|
||||
cursor:pointer;
|
||||
padding:0px;
|
||||
border: none;
|
||||
height:20px;
|
||||
font-size: 20px;
|
||||
background-color:@default-bg;
|
||||
color:@default-icon;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.Prompt-exit:hover{
|
||||
color:@default-icon-hov;
|
||||
}
|
||||
|
||||
.Prompt-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Prompt-bodyQuery {
|
||||
margin-bottom: 20px;
|
||||
color: @default-interface-txt;
|
||||
@ -57,49 +8,3 @@
|
||||
.Prompt-bodyTarget {
|
||||
color: @default-data-txt;
|
||||
}
|
||||
|
||||
.Prompt-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Prompt-defaultButton {
|
||||
background-color: @default-bg;
|
||||
color: @btn-txt;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
border: 1px solid @btn-bord;
|
||||
transition: background-color 0.2s;
|
||||
padding-left:15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.Prompt-defaultButton:hover {
|
||||
background-color: @btn-bg-hov;
|
||||
color: @btn-txt;
|
||||
}
|
||||
|
||||
.Prompt-errorButton {
|
||||
background-color: @default-err;
|
||||
color: @btn-txt-sel;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s;
|
||||
padding-left:15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.Prompt-errorButton:hover {
|
||||
background-color: @default-err-hov;
|
||||
color: @btn-txt-sel;
|
||||
}
|
||||
|
||||
.Prompt-footerButton {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.Prompt-footerButton + .Prompt-footerButton {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@ -231,42 +231,29 @@ angular.module('StreamWidget', ['RestServices', 'Utilities', 'StreamListDefiniti
|
||||
|
||||
var activity_id = params.activity_id,
|
||||
parent_scope = params.scope,
|
||||
generator = GenerateForm,
|
||||
form = ActivityDetailForm,
|
||||
activity = Find({ list: parent_scope.activities, key: 'id', val: activity_id }),
|
||||
n, rows, scope;
|
||||
scope, element;
|
||||
|
||||
if (activity) {
|
||||
// Setup changes field
|
||||
activity.changes_stringified = JSON.stringify(activity.changes, null, '\t');
|
||||
n = activity.changes_stringified.match(/\n/g);
|
||||
rows = (n) ? n.length : 1;
|
||||
rows = (rows < 1) ? 3 : 10;
|
||||
form.fields.changes.rows = 10;
|
||||
|
||||
// Load the form
|
||||
scope = generator.inject(form, { mode: 'edit', modal: true, related: false });
|
||||
scope.changes = activity.changes_stringified;
|
||||
// Grab our element out of the dom
|
||||
element = angular.element(document.getElementById('stream-detail-modal'));
|
||||
|
||||
// Grab the modal's scope so that we can set a few variables
|
||||
scope = element.scope();
|
||||
|
||||
scope.changes = activity.changes;
|
||||
scope.user = ((activity.summary_fields.actor) ? activity.summary_fields.actor.username : 'system') +
|
||||
' on ' + $filter('longDate')(activity.timestamp);
|
||||
scope.operation = activity.description_nolink;
|
||||
scope.header = "Event " + activity.id;
|
||||
|
||||
scope.formModalAction = function () {
|
||||
$('#form-modal').modal("hide");
|
||||
};
|
||||
|
||||
$('#form-modal').on('show.bs.modal', function () {
|
||||
$('#form-modal-body').css({
|
||||
width: 'auto', //probably not needed
|
||||
height: 'auto', //probably not needed
|
||||
'max-height': '100%'
|
||||
// Open the modal
|
||||
$('#stream-detail-modal').modal({
|
||||
show: true,
|
||||
backdrop: 'static',
|
||||
keyboard: true
|
||||
});
|
||||
});
|
||||
|
||||
scope.formModalActionLabel = 'OK';
|
||||
scope.formModalCancelShow = false;
|
||||
scope.formModalInfo = false;
|
||||
scope.formModalHeader = "Event " + activity.id;
|
||||
|
||||
if (!scope.$$phase) {
|
||||
scope.$digest();
|
||||
|
||||
@ -54,6 +54,8 @@
|
||||
<div id="password-modal" style="display: none;"></div>
|
||||
<div id="idle-modal" style="display:none">Your session will expire in <span id="remaining_seconds">60</span> seconds, would you like to continue?</div>
|
||||
|
||||
<stream-detail-modal></stream-detail-modal>
|
||||
|
||||
<!-- Generic Form dialog -->
|
||||
<div id="form-modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
@ -97,18 +99,18 @@
|
||||
<!-- Confirmation Dialog -->
|
||||
<div id="prompt-modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="Prompt-content modal-content">
|
||||
<div class="Prompt-header">
|
||||
<div class="Prompt-title" ng-bind="promptHeader" id="prompt-header"></div>
|
||||
<div class="Prompt-exitHolder">
|
||||
<button class="close Prompt-exit" data-target="#prompt-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
|
||||
<div class="Modal-content modal-content">
|
||||
<div class="Modal-header">
|
||||
<div class="Modal-title" ng-bind="promptHeader" id="prompt-header"></div>
|
||||
<div class="Modal-exitHolder">
|
||||
<button class="close Modal-exit" data-target="#prompt-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Prompt-body" ng-bind-html="promptBody" id="prompt-body">
|
||||
<div class="Modal-body" ng-bind-html="promptBody" id="prompt-body">
|
||||
</div>
|
||||
<div class="Prompt-footer">
|
||||
<a href="" ng-class="promptActionBtnClass" ng-click="promptAction()" id="prompt_action_btn" class="btn Prompt-footerButton" ng-bind="promptActionText"></a>
|
||||
<a href="#" data-target="#prompt-modal" data-dismiss="modal" id="prompt_cancel_btn" class="btn Prompt-defaultButton Prompt-footerButton">CANCEL</a>
|
||||
<div class="Modal-footer">
|
||||
<a href="" ng-class="promptActionBtnClass" ng-click="promptAction()" id="prompt_action_btn" class="btn Modal-footerButton" ng-bind="promptActionText"></a>
|
||||
<a href="#" data-target="#prompt-modal" data-dismiss="modal" id="prompt_cancel_btn" class="btn Modal-defaultButton Modal-footerButton">CANCEL</a>
|
||||
</div>
|
||||
</div><!-- modal-content -->
|
||||
</div><!-- modal-dialog -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user