shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Styling update on the activity stream action details modal. Removed its dependency on the form generator and moved it out into a directive.

Browse Source
This commit is contained in:
Michael Abashian 2016-02-08 16:59:20 -05:00
parent a2cf365325
commit 49a458b178
11 changed files with 231 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/src/activity-stream/main.js
View File

@ -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
View 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);

35
awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less Normal file
View File

@ -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;
}

18
awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.directive.js Normal file
View File

@ -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')
};
}
];

29
awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html Normal file
View File

@ -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>

3
awx/ui/client/src/shared/branding/colors.default.less
View File

@ -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
View 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;
}

2
awx/ui/client/src/shared/prompt-dialog.js
View File

@ -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);

95
awx/ui/client/src/shared/prompt/prompt.less
View File

@ -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;
}

43
awx/ui/client/src/widgets/Stream.js
View File

@ -231,43 +231,30 @@ 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);
' 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();
}

20
awx/ui/templates/ui/index.html
View File

@ -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 -->