From 49a458b178809901ee0faa1ea6e7894738531d09 Mon Sep 17 00:00:00 2001 From: Michael Abashian Date: Mon, 8 Feb 2016 16:59:20 -0500 Subject: [PATCH 1/2] Styling update on the activity stream action details modal. Removed its dependency on the form generator and moved it out into a directive. --- awx/ui/client/src/activity-stream/main.js | 4 +- .../activity-stream/streamDetailModal/main.js | 11 ++ .../streamDetailModal.block.less | 35 ++++++ .../streamDetailModal.directive.js | 18 +++ .../streamDetailModal.partial.html | 29 +++++ .../src/shared/branding/colors.default.less | 3 + awx/ui/client/src/shared/modal/modal.less | 105 ++++++++++++++++++ awx/ui/client/src/shared/prompt-dialog.js | 2 +- awx/ui/client/src/shared/prompt/prompt.less | 95 ---------------- awx/ui/client/src/widgets/Stream.js | 43 +++---- awx/ui/templates/ui/index.html | 20 ++-- 11 files changed, 231 insertions(+), 134 deletions(-) create mode 100644 awx/ui/client/src/activity-stream/streamDetailModal/main.js create mode 100644 awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less create mode 100644 awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.directive.js create mode 100644 awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html create mode 100644 awx/ui/client/src/shared/modal/modal.less diff --git a/awx/ui/client/src/activity-stream/main.js b/awx/ui/client/src/activity-stream/main.js index 1b3f169de2..80e0ed1e53 100644 --- a/awx/ui/client/src/activity-stream/main.js +++ b/awx/ui/client/src/activity-stream/main.js @@ -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); diff --git a/awx/ui/client/src/activity-stream/streamDetailModal/main.js b/awx/ui/client/src/activity-stream/streamDetailModal/main.js new file mode 100644 index 0000000000..03533073aa --- /dev/null +++ b/awx/ui/client/src/activity-stream/streamDetailModal/main.js @@ -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); diff --git a/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less new file mode 100644 index 0000000000..9c48a85ce5 --- /dev/null +++ b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less @@ -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; +} diff --git a/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.directive.js b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.directive.js new file mode 100644 index 0000000000..e144663f96 --- /dev/null +++ b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.directive.js @@ -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') + }; + } + ]; diff --git a/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html new file mode 100644 index 0000000000..e41b9825bf --- /dev/null +++ b/awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html @@ -0,0 +1,29 @@ + diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index 5eca8fff0a..19bbd4c49c 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -152,3 +152,6 @@ // panel @panel-bg: @default-bg; @panel-border: @default-border; + +// activity stream details modal +@as-detail-changes-txt: #707070; diff --git a/awx/ui/client/src/shared/modal/modal.less b/awx/ui/client/src/shared/modal/modal.less new file mode 100644 index 0000000000..f379a2997b --- /dev/null +++ b/awx/ui/client/src/shared/modal/modal.less @@ -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; +} diff --git a/awx/ui/client/src/shared/prompt-dialog.js b/awx/ui/client/src/shared/prompt-dialog.js index 1ee2ad1fa7..ddabc90bbe 100644 --- a/awx/ui/client/src/shared/prompt-dialog.js +++ b/awx/ui/client/src/shared/prompt-dialog.js @@ -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); diff --git a/awx/ui/client/src/shared/prompt/prompt.less b/awx/ui/client/src/shared/prompt/prompt.less index 316a60f9fc..e0e5ef0c30 100644 --- a/awx/ui/client/src/shared/prompt/prompt.less +++ b/awx/ui/client/src/shared/prompt/prompt.less @@ -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; -} diff --git a/awx/ui/client/src/widgets/Stream.js b/awx/ui/client/src/widgets/Stream.js index af44f1daf2..b791e82279 100644 --- a/awx/ui/client/src/widgets/Stream.js +++ b/awx/ui/client/src/widgets/Stream.js @@ -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(); } diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index c5aefc097d..0312bd74c4 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -54,6 +54,8 @@ + +