Merge pull request #2361 from marshmalien/fix/panel-header-docs

Modify panel header to accept title and badge string bindings
2024-10-31 23:51:09 +03:00 · 2018-07-03 11:16:36 -04:00 · 2018-07-03 11:16:36 -04:00 · f3ff624873
commit f3ff624873
parent 1c478b5ccb 642cc88fcd
21 changed files with 106 additions and 61 deletions
--- a/awx/ui/client/features/applications/add-edit-applications.view.html
+++ b/awx/ui/client/features/applications/add-edit-applications.view.html
@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group>
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
--- a/awx/ui/client/features/applications/applications.strings.js
+++ b/awx/ui/client/features/applications/applications.strings.js
@ -25,6 +25,7 @@ function ApplicationsStrings (BaseString) {
    };

    ns.list = {
+        PANEL_TITLE: t.s('APPLICATIONS'),
        ROW_ITEM_LABEL_EXPIRED: t.s('EXPIRATION'),
        ROW_ITEM_LABEL_ORGANIZATION: t.s('ORG'),
        ROW_ITEM_LABEL_MODIFIED: t.s('LAST MODIFIED')
--- a/awx/ui/client/features/applications/list-applications.view.html
+++ b/awx/ui/client/features/applications/list-applications.view.html
@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
-        APPLICATIONS
-        <span class="badge List-titleBadge">
-            {{ vm.applicationsCount }}
-        </span>
+    <at-panel-heading
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+        badge="{{ vm.applicationsCount }}"
+        hide-dismiss="true">
    </at-panel-heading>

    <at-panel-body>
--- a/awx/ui/client/features/credentials/add-edit-credentials.view.html
+++ b/awx/ui/client/features/credentials/add-edit-credentials.view.html
@ -1,5 +1,5 @@
 <at-panel ng-if="!$state.current.name.includes('permissions')">
-    <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group>
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
@ -29,7 +29,7 @@
 </at-panel>

 <at-panel ng-if="$state.current.name.includes('permissions')" on-dismiss="credentials">
-    <at-panel-heading>{{:: vm.strings.get('permissions.TITLE') }}</at-panel-heading>
+    <at-panel-heading title="{{:: vm.strings.get('permissions.TITLE') }}"></at-panel-heading>

    <at-tab-group class="at-TabGroup--padBelow">
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
--- a/awx/ui/client/features/jobs/index.view.html
+++ b/awx/ui/client/features/jobs/index.view.html
@ -3,17 +3,10 @@
    <at-panel ng-cloak id="htmlTemplate">
        <div>
            <div ng-hide="$state.includes('schedules')">
-                <at-panel-heading hide-dismiss="true">
-                    <translate>JOBS</translate>
+                <at-panel-heading title="{{:: vm.strings.get('list.PANEL_TITLE') }}" hide-dismiss="true">
                </at-panel-heading>
                <div ui-view="jobsList"></div>
            </div>
-            <div ng-hide="!$state.includes('schedules')">
-                <at-panel-heading hide-dismiss="true">
-                    <translate>SCHEDULES</translate>
-                </at-panel-heading>
-                <div ui-view="schedulesList"></div>
-            </div>
        </div>
    </at-panel>
    <div ng-include="'/static/partials/logviewer.html'"></div>
--- a/awx/ui/client/features/jobs/jobs.strings.js
+++ b/awx/ui/client/features/jobs/jobs.strings.js
@ -5,6 +5,7 @@ function JobsStrings (BaseString) {
    const ns = this.jobs;

    ns.list = {
+        PANEL_TITLE: t.s('JOBS'),
        ROW_ITEM_LABEL_STARTED: t.s('Started'),
        ROW_ITEM_LABEL_FINISHED: t.s('Finished'),
        ROW_ITEM_LABEL_WORKFLOW_JOB: t.s('Workflow Job'),
--- a/awx/ui/client/features/jobs/routes/jobs.route.js
+++ b/awx/ui/client/features/jobs/routes/jobs.route.js
@ -58,7 +58,12 @@ export default {
    },
    views: {
        '@': {
-            templateUrl: indexTemplate
+            templateUrl: indexTemplate,
+            controller: ['JobsStrings', function (strings) {
+                const vm = this || {};
+                vm.strings = strings;
+            }],
+            controllerAs: 'vm'
        },
        'jobsList@jobs': {
            templateUrl: jobsListTemplate,
--- a/awx/ui/client/features/templates/index.view.html
+++ b/awx/ui/client/features/templates/index.view.html
@ -2,19 +2,16 @@
 <div ui-view="form"></div>
 <at-panel ng-cloak id="htmlTemplate">
    <div ng-if="$state.is('templates')">
-        <at-panel-heading hide-dismiss="true">
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
-                {{ vm.count }}
-            </div>
+        <at-panel-heading
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+            hide-dismiss="true"
+            badge="{{ vm.count }}">
        </at-panel-heading>
    </div>
    <div ng-if="!$state.is('templates')">
-        <at-panel-heading>
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
-                {{ vm.count }}
-            </div>
+        <at-panel-heading
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+            badge="{{ vm.count }}">
        </at-panel-heading>
    </div>
    <div ui-view="templatesList"></div>
--- a/awx/ui/client/features/users/tokens/users-tokens-add.partial.html
+++ b/awx/ui/client/features/users/tokens/users-tokens-add.partial.html
@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-panel-body>
        <at-form state="vm.form" autocomplete="off">
--- a/awx/ui/client/lib/components/panel/_index.less
+++ b/awx/ui/client/lib/components/panel/_index.less
@ -5,12 +5,14 @@
 }

 .at-Panel-heading {
-    margin: 0;
+    margin-bottom: 20px;
    padding: 0;
 }

 .at-Panel-headingRow {
-    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }

 .at-Panel-dismiss {
@ -42,7 +44,13 @@
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
-    margin-left: 5px;
+    margin-left: 10px;
+    margin-right: auto;
+}
+
+.at-Panel-headingCustomContent {
+    display: flex;
+    flex: 1;
 }

 .at-Panel-label {
--- a/awx/ui/client/lib/components/panel/heading.directive.js
+++ b/awx/ui/client/lib/components/panel/heading.directive.js
@ -12,7 +12,11 @@ function atPanelHeading () {
        replace: true,
        transclude: true,
        templateUrl,
-        link
+        link,
+        scope: {
+            title: '@',
+            badge: '@?'
+        }
    };
 }

--- a/awx/ui/client/lib/components/panel/heading.partial.html
+++ b/awx/ui/client/lib/components/panel/heading.partial.html
@ -1,20 +1,27 @@
-<div class="row at-Panel-headingRow">
-    <div class="col-xs-10"
+<div class="at-Panel-heading">
+    <div class="at-Panel-headingRow"
        ng-if="!hideDismiss">
        <h3 class="at-Panel-headingTitle">
-            <ng-transclude></ng-transclude>
+            {{ title }}
        </h3>
-    </div>
-    <div class="col-xs-2"
-        ng-if="!hideDismiss">
+        <span ng-if="badge" class="at-Panel-headingTitleBadge">
+            {{ badge }}
+        </span>
+
+        <div class="at-Panel-headingCustomContent" ng-transclude></div>
+
        <div class="at-Panel-dismiss">
            <i class="fa fa-times-circle fa-lg" ng-click="dismiss()"></i>
        </div>
    </div>
-    <div class="col-xs-12"
+
+    <div class="at-Panel-headingRow"
        ng-if="hideDismiss">
        <h3 class="at-Panel-headingTitle">
-            <ng-transclude></ng-transclude>
+            {{ title }}
        </h3>
+        <span ng-if="badge" class="at-Panel-headingTitleBadge">
+            {{ badge }}
+        </span>
    </div>
 </div>
--- a/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html
+++ b/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html
@ -1,6 +1,8 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
+    <at-panel-heading title="{{:: vm.panelTitle }}">
+        <a class="Panel-docsLink" ng-href="{{ vm.docs.url }}" target="_blank" aw-tool-tip="{{:: vm.docs.help_text }}">
+            <i class="fa fa-book"></i>
+        </a>
    </at-panel-heading>

    <at-tab-group>
--- a/awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js
+++ b/awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js
@ -6,6 +6,11 @@ function AddController ($state, models, strings) {
    vm.strings = strings;
    vm.panelTitle = strings.get('state.ADD_BREADCRUMB_LABEL');

+    vm.docs = {
+        url: 'https://docs.ansible.com/ansible-tower/latest/html/administration/clustering.html',
+        help_text: vm.strings.get('tooltips.DOCS_HELP_TEXT')
+    };
+
    vm.tab = {
        details: { _active: true },
        instances: {_disabled: true },
--- a/awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js
+++ b/awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js
@ -8,6 +8,11 @@ function EditController ($rootScope, $state, models, strings) {
    vm.strings = strings;
    vm.panelTitle = instanceGroup.get('name');

+    vm.docs = {
+        url: 'https://docs.ansible.com/ansible-tower/latest/html/administration/clustering.html',
+        help_text: vm.strings.get('tooltips.DOCS_HELP_TEXT')
+    };
+
    vm.tab = {
        details: {
            _active: true,
--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/awx/ui/client/src/instance-groups/instance-group.block.less
@ -48,4 +48,30 @@
    .List-tableRow .List-titleBadge {
            margin: 0 0 0 5px;
    }
+
+    .Panel-docsLink {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 7px;
+        background: @at-white;
+        border-radius: @at-border-radius;
+        height: 30px;
+        width: 30px;
+        margin: 0 20px 0 auto;
+
+        i {
+            font-size: @at-font-size-icon;
+            color: @at-gray-848992;
+        }
+    }
+
+    .Panel-docsLink:hover {
+        background-color: @at-blue;
+
+        i {
+            color: @at-white;
+        }
+    }
 }
--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/awx/ui/client/src/instance-groups/instance-groups.strings.js
@ -28,7 +28,8 @@ function InstanceGroupsStrings (BaseString) {

    ns.tooltips = {
        ADD_INSTANCE_GROUP: t.s('Create a new Instance Group'),
-        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance')
+        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance'),
+        DOCS_HELP_TEXT: t.s('Instance Groups Help')
    };

    ns.instance = {
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group class="at-TabGroup--padBelow">
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
--- a/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html
+++ b/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html
@ -1,7 +1,6 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
+
    <at-tab-group class="at-TabGroup--padBelow">
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
        <at-tab state="vm.tab.instances">{{:: vm.strings.get('tab.INSTANCES') }}</at-tab>
--- a/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html
+++ b/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html
@ -1,6 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
+
    <div ui-view="jobsList"></div>
 </at-panel>
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
-        {{ vm.strings.get('list.PANEL_TITLE') }}
-        <span class="badge List-titleBadge">
-            {{ instanceGroupCount }}
-        </span>
+    <at-panel-heading
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+        hide-dismiss="true"
+        badge="{{ instanceGroupCount }}">
    </at-panel-heading>

    <at-panel-body>