Merge pull request #882 from mabashian/stream-details-modal

Styling update on the activity stream action details modal

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

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

awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less

@@ -0,0 +1,35 @@
+@import "../shared/branding/colors.default.less";
+
+.StreamDetail-actionButton {
+    padding: 4px 25px!important;
+}
+
+.StreamDetail-inlineRow {
+    margin-bottom: 20px;
+    display: flex;
+}
+
+.StreamDetail-rowTitle {
+    color: @default-interface-txt;
+}
+
+.StreamDetail-inlineRowTitle {
+    flex: 0 0 110px;
+}
+
+.StreamDetail-inlineRowData {
+    flex: 1 0;
+}
+
+.StreamDetail-changesRowTitle {
+    margin-bottom: 5px;
+}
+
+.StreamDetail-changes {
+    border: none;
+    background-color: @default-secondary-bg;
+    margin-bottom: 0;
+    max-height: 200px;
+    overflow: scroll;
+    color: @as-detail-changes-txt;
+}

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

awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.partial.html

@@ -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="StreamDetail-inlineRow">
+                  <div class="StreamDetail-rowTitle StreamDetail-inlineRowTitle">INITIATED BY</div>
+                  <div class="StreamDetail-inlineRowData" ng-bind="user"></div>
+              </div>
+              <div ng-show="operation" class="StreamDetail-inlineRow">
+                  <div class="StreamDetail-rowTitle StreamDetail-inlineRowTitle">ACTION</div>
+                  <div class="StreamDetail-inlineRowData" ng-bind="operation"></div>
+              </div>
+              <div ng-show="changes">
+                  <div class="StreamDetail-rowTitle StreamDetail-changesRowTitle">CHANGES</div>
+                  <pre class="StreamDetail-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 StreamDetail-actionButton">OK</a>
+          </div>
+      </div>
+   </div>
+</div>

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;

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

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

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

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
+                // Grab our element out of the dom
-                scope = generator.inject(form, { mode: 'edit', modal: true, related: false });
+                element = angular.element(document.getElementById('stream-detail-modal'));
-                scope.changes = activity.changes_stringified;
+
+                // 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 () {
+                // Open the modal
-                    $('#form-modal').modal("hide");
+                $('#stream-detail-modal').modal({
-                };
+                    show: true,
-
+                    backdrop: 'static',
-                $('#form-modal').on('show.bs.modal', function () {
+                    keyboard: true
-                    $('#form-modal-body').css({
-                        width: 'auto', //probably not needed
-                        height: 'auto', //probably not needed
-                        'max-height': '100%'
-                    });
                 });
 
-                scope.formModalActionLabel = 'OK';
-                scope.formModalCancelShow = false;
-                scope.formModalInfo = false;
-                scope.formModalHeader = "Event " + activity.id;
-
                 if (!scope.$$phase) {
                     scope.$digest();
                 }

awx/ui/templates/ui/index.html

@@ -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="Modal-content modal-content">
-              <div class="Prompt-header">
+              <div class="Modal-header">
-                  <div class="Prompt-title" ng-bind="promptHeader" id="prompt-header"></div>
+                  <div class="Modal-title" ng-bind="promptHeader" id="prompt-header"></div>
-                  <div class="Prompt-exitHolder">
+                  <div class="Modal-exitHolder">
-                      <button class="close Prompt-exit" data-target="#prompt-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
+                      <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">
+              <div class="Modal-footer">
-                  <a href="" ng-class="promptActionBtnClass" ng-click="promptAction()" id="prompt_action_btn" class="btn Prompt-footerButton" ng-bind="promptActionText"></a>
+                  <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 Prompt-defaultButton Prompt-footerButton">CANCEL</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 -->