Skip to content

Commit

Permalink
Merge pull request openshift#2127 from rhamilto/single-column-overlay
Browse files Browse the repository at this point in the history
Merged by openshift-bot
  • Loading branch information
OpenShift Bot committed Sep 22, 2017
2 parents 0ffc72d + e3af4f7 commit d8fc250
Show file tree
Hide file tree
Showing 22 changed files with 309 additions and 292 deletions.
25 changes: 24 additions & 1 deletion app/scripts/directives/processTemplateDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@
onShow: showSelect
};

ctrl.infoStep = {
id: 'info',
label: 'Information',
view: 'views/directives/process-template-dialog/process-template-info.html',
allowed: true,
valid: true,
allowClickNav: true,
onShow: showInfo
};

ctrl.configStep = {
id: 'configuration',
label: 'Configuration',
Expand Down Expand Up @@ -157,6 +167,7 @@
ctrl.selectedTemplate = template;
ctrl.template = _.get(template, 'resource');
ctrl.selectStep.valid = !!template;
ctrl.iconClass = getIconClass();
};

ctrl.templateProjectChange = function () {
Expand Down Expand Up @@ -191,7 +202,7 @@

function initializeSteps() {
if (!ctrl.steps) {
ctrl.steps = [ctrl.selectStep, ctrl.configStep, ctrl.resultsStep];
ctrl.steps = [ctrl.selectStep, ctrl.infoStep, ctrl.configStep, ctrl.resultsStep];
}
}

Expand All @@ -202,7 +213,17 @@
}
}

function showInfo() {
ctrl.infoStep.selected = true;
ctrl.selectStep.selected = false;
ctrl.configStep.selected = false;
ctrl.resultsStep.selected = false;
ctrl.nextTitle = "Next >";
clearValidityWatcher();
}

function showSelect() {
ctrl.infoStep.selected = false;
ctrl.selectStep.selected = true;
ctrl.configStep.selected = false;
ctrl.resultsStep.selected = false;
Expand All @@ -212,6 +233,7 @@
}

function showConfig() {
ctrl.infoStep.selected = false;
ctrl.selectStep.selected = false;
ctrl.configStep.selected = true;
ctrl.resultsStep.selected = false;
Expand All @@ -225,6 +247,7 @@
}

function showResults() {
ctrl.infoStep.selected = false;
ctrl.selectStep.selected = false;
ctrl.configStep.selected = false;
ctrl.resultsStep.selected = true;
Expand Down
27 changes: 0 additions & 27 deletions app/styles/_catalog.less
Original file line number Diff line number Diff line change
@@ -1,26 +1,6 @@
@bind-service-page-height: 310px;
@bind-service-wizard-min-external-height: 300px;
@landing-search-area-height: 52px;

.bind-service-config {
padding: 0 (@grid-gutter-width / 2);
width: 100%;
@media (min-width: @screen-sm-min) {
margin-bottom: -(@grid-gutter-width / 2);
margin-top: -(@grid-gutter-width / 2);
overflow-y: auto;
padding-right: 0;
.scroll-shadows-vertical(65%, 0.25);
_::-webkit-full-page-media, _:future, :root & { // only target Safari
.scroll-shadows-vertical-with-covers(65%, 0.25);
}

.form-horizontal .control-label {
padding-right: 0;
}
}
}

.landing {
@media(min-width: @screen-sm-min) {
top: (@navbar-os-header-height-desktop + @landing-search-area-height);
Expand All @@ -34,16 +14,9 @@
}
}

.wizard-pf-footer.wizard-pf-position-override {
position: relative;
}

.wizard-pf-main.bind-service-wizard-step {
@media (min-width: @screen-sm-min) {
height: @bind-service-page-height + @grid-gutter-width;
max-height: calc(100vh ~"-" @bind-service-wizard-min-external-height);
min-height: 200px;
overflow-y: auto;
}
}

Expand Down
13 changes: 3 additions & 10 deletions app/styles/_overlay-forms.less
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
.order-service-config-single-column {
width: 100%;
@media (min-width: 768px) {
padding-left: 0;
}
}

.wizard-pf-main {
.ace_editor.editor {
height: 285px;
height: 265px;
.landing-page & {
height: 220px;
height: 200px;
}
}

.deploy-image .empty-state-message {
margin: 30px auto;
margin: 30px auto 0;
}
}
2 changes: 1 addition & 1 deletion app/views/directives/bind-service.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="bind-service-wizard">
<pf-wizard
hide-header="true"
title="Create Binding"
hide-sidebar="true"
step-class="bind-service-wizard-step"
wizard-ready="ctrl.wizardReady"
Expand Down
6 changes: 3 additions & 3 deletions app/views/directives/deploy-image-dialog.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<pf-wizard
title="Deploy Image"
on-cancel="$ctrl.close()"
on-finish="$ctrl.close()"
hide-header="true"
hide-back-button="true"
hide-sidebar="true"
next-title="$ctrl.nextButtonTitle"
Expand All @@ -20,7 +20,7 @@
allow-click-nav="false"
next-enabled="$ctrl.deployForm.$valid || $ctrl.deployImageNewAppCreated">
<div class="wizard-pf-main-inner-shadow-covers">
<div class="order-service-config order-service-config-single-column">
<div class="order-service-config">
<div class="wizard-pf-main-form-contents">
<form name="$ctrl.deployForm">
<deploy-image is-dialog="true" project="$ctrl.project" context="$ctrl.context"></deploy-image>
Expand All @@ -37,7 +37,7 @@
ok-to-nav-away="true"
allow-click-nav="false">
<div class="wizard-pf-main-inner-shadow-covers">
<div class="order-service-config order-service-config-single-column">
<div class="order-service-config">
<div class="wizard-pf-main-form-contents">
<next-steps project="$ctrl.selectedProject"
project-name="$ctrl.selectedProject.metadata.name"
Expand Down
6 changes: 3 additions & 3 deletions app/views/directives/from-file-dialog.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<pf-wizard
title="Import YAML / JSON"
on-cancel="$ctrl.close()"
on-finish="$ctrl.close()"
hide-header="true"
hide-sidebar="true"
next-title="$ctrl.nextButtonTitle"
next-callback="$ctrl.nextCallback"
Expand All @@ -18,7 +18,7 @@
allow-click-nav="false"
next-enabled="!$ctrl.importForm.$invalid">
<div class="wizard-pf-main-inner-shadow-covers">
<div class="order-service-config order-service-config-single-column">
<div class="order-service-config">
<div class="wizard-pf-main-form-contents">
<form name="$ctrl.importForm">
<from-file is-dialog="true" project="$ctrl.project"></from-file>
Expand Down Expand Up @@ -78,7 +78,7 @@
allow-click-nav="false"
prev-enabled="false">
<div class="wizard-pf-main-inner-shadow-covers">
<div class="order-service-config order-service-config-single-column">
<div class="order-service-config">
<div class="wizard-pf-main-form-contents">
<!-- We don't want the directive to render until the results step is shown, this makes sure processed template info gets pulled from cache correctly -->
<next-steps ng-if="$ctrl.currentStep === 'Results'" project="$ctrl.selectedProject"
Expand Down
2 changes: 1 addition & 1 deletion app/views/directives/header/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

<sidebar></sidebar>

<overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
<overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
<deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
<from-file-dialog ng-if="ordering.panelName === 'fromFile'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></from-file-dialog>
<process-template-dialog ng-if="ordering.panelName === 'fromProject'" project="project" use-project-template="true" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
Expand Down
26 changes: 2 additions & 24 deletions app/views/directives/process-template-dialog.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="order-service">
<pf-wizard
hide-header="true"
title="{{!$ctrl.useProjectTemplate && ($ctrl.template | displayName) || 'Select from Project'}}"
hide-sidebar="true"
hide-back-button="!$ctrl.useProjectTemplate"
step-class="order-service-wizard-step"
Expand All @@ -22,29 +22,7 @@
step-id="{{step.id}}"
step-priority="{{$index}}">
<div class="wizard-pf-main-inner-shadow-covers">
<div class="order-service-details" ng-if="!$ctrl.selectStep.selected">
<div class="order-service-details-top">
<div class="service-icon">
<span class="icon {{$ctrl.iconClass}}"></span>
</div>
<div class="service-title-area">
<div class="service-title">
{{$ctrl.template | displayName}}
</div>
<div class="order-service-tags">
<span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
{{tag}}
</span>
</div>
</div>
</div>
<div class="order-service-description-block">
<p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
</div>
</div>
<div class="order-service-config" ng-class="{'order-service-config-single-column': $ctrl.selectStep.selected}">
<div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
</div>
<div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
</div>
</pf-wizard-step>
</pf-wizard>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="osc-form">
<form name="$ctrl.form">
<process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
</form>
<div class="order-service-config">
<div class="osc-form">
<form name="$ctrl.form">
<process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
</form>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="order-service-details">
<div class="order-service-details-top">
<div class="service-icon">
<span class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
</div>
<div class="service-title-area">
<div class="service-title">
{{$ctrl.template | displayName}}
</div>
<div class="order-service-tags">
<span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
{{tag}}
</span>
</div>
</div>
</div>
<div class="order-service-description-block">
<p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<next-steps
project="$ctrl.selectedProject"
project-name="$ctrl.selectedProject.metadata.name"
login-base-url="$ctrl.loginBaseUrl"
on-continue="$ctrl.close">
</next-steps>
<div class="order-service-config">
<next-steps
project="$ctrl.selectedProject"
project-name="$ctrl.selectedProject.metadata.name"
login-base-url="$ctrl.loginBaseUrl"
on-continue="$ctrl.close">
</next-steps>
</div>
Original file line number Diff line number Diff line change
@@ -1,39 +1,41 @@
<div class="config-top">
<div class="select-project-for-template">
<h2>Select from Project</h2>
<ui-select
name="selectProject"
ng-model="$ctrl.templateProject"
ng-change="$ctrl.templateProjectChange()"
search-enabled="$ctrl.searchEnabled">
<ui-select-match placeholder="Select a Project">
{{$select.selected | displayName}}
</ui-select-match>
<ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
<span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
<span ng-if="project | displayName : true" class="small text-muted">
<span ng-if="project.metadata.name">&ndash;</span>
<span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
</span>
</ui-select-choices>
</ui-select>
</div>
<pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
<pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
<div class="services-view">
<div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
<pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
<a href="" class="services-item show-selection" ng-class="{'active': item === $ctrl.selectedTemplate}" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.templateSelected(item)">
<div ng-if="!item.imageUrl" class="services-item-icon">
<span class="{{item.iconClass}}"></span>
</div>
<div ng-if="item.imageUrl" class="services-item-icon">
<img ng-src="{{item.imageUrl}}" alt="">
</div>
<div class="services-item-name" title="{{item.name}}">
{{item.name}}
</div>
</a>
<div class="order-service-config">
<div class="config-top">
<div class="select-project-for-template">
<h2>Select from Project</h2>
<ui-select
name="selectProject"
ng-model="$ctrl.templateProject"
ng-change="$ctrl.templateProjectChange()"
search-enabled="$ctrl.searchEnabled">
<ui-select-match placeholder="Select a Project">
{{$select.selected | displayName}}
</ui-select-match>
<ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
<span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
<span ng-if="project | displayName : true" class="small text-muted">
<span ng-if="project.metadata.name">&ndash;</span>
<span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
</span>
</ui-select-choices>
</ui-select>
</div>
<pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
<pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
<div class="services-view">
<div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
<pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
<a href="" class="services-item show-selection" ng-class="{'active': item === $ctrl.selectedTemplate}" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.templateSelected(item)">
<div ng-if="!item.imageUrl" class="services-item-icon">
<span class="{{item.iconClass}}"></span>
</div>
<div ng-if="item.imageUrl" class="services-item-icon">
<img ng-src="{{item.imageUrl}}" alt="">
</div>
<div class="services-item-name" title="{{item.name}}">
{{item.name}}
</div>
</a>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion app/views/directives/resource-service-bindings.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h3>Bindings</h3>
<span>There are no service bindings.</span>
</div>
</div>
<overlay-panel single-column="true" show-panel="$ctrl.overlayPanelVisible" show-close="true" handle-close="$ctrl.closeOverlayPanel">
<overlay-panel show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
<bind-service target="$ctrl.apiObject"
project="$ctrl.project"
on-close="$ctrl.closeOverlayPanel"></bind-service>
Expand Down
2 changes: 1 addition & 1 deletion app/views/directives/unbind-service.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="bind-service-wizard unbind-service">
<pf-wizard
hide-header="true"
title="Delete Binding"
hide-sidebar="true"
hide-back-button="true"
step-class="bind-service-wizard-step"
Expand Down
2 changes: 1 addition & 1 deletion app/views/landing-page.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="middle landing-page">
<div class="middle-content">
<overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
<overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
<process-template-dialog ng-if="template" template="template" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
<deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
<from-file-dialog ng-if="ordering.panelName === 'fromFile'" on-dialog-closed="closeOrderingPanel"></from-file-dialog>
Expand Down

0 comments on commit d8fc250

Please sign in to comment.