Skip to content

Commit e3af4f7

Browse files
rhamiltorhamilto
committed
Changing overlay layout to a single column
Requries openshift/origin-web-catalog#413
1 parent 0ffc72d commit e3af4f7

22 files changed

+309
-292
lines changed

Diff for: ‎app/scripts/directives/processTemplateDialog.js

+24-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,16 @@
4545
onShow: showSelect
4646
};
4747

48+
ctrl.infoStep = {
49+
id: 'info',
50+
label: 'Information',
51+
view: 'views/directives/process-template-dialog/process-template-info.html',
52+
allowed: true,
53+
valid: true,
54+
allowClickNav: true,
55+
onShow: showInfo
56+
};
57+
4858
ctrl.configStep = {
4959
id: 'configuration',
5060
label: 'Configuration',
@@ -157,6 +167,7 @@
157167
ctrl.selectedTemplate = template;
158168
ctrl.template = _.get(template, 'resource');
159169
ctrl.selectStep.valid = !!template;
170+
ctrl.iconClass = getIconClass();
160171
};
161172

162173
ctrl.templateProjectChange = function () {
@@ -191,7 +202,7 @@
191202

192203
function initializeSteps() {
193204
if (!ctrl.steps) {
194-
ctrl.steps = [ctrl.selectStep, ctrl.configStep, ctrl.resultsStep];
205+
ctrl.steps = [ctrl.selectStep, ctrl.infoStep, ctrl.configStep, ctrl.resultsStep];
195206
}
196207
}
197208

@@ -202,7 +213,17 @@
202213
}
203214
}
204215

216+
function showInfo() {
217+
ctrl.infoStep.selected = true;
218+
ctrl.selectStep.selected = false;
219+
ctrl.configStep.selected = false;
220+
ctrl.resultsStep.selected = false;
221+
ctrl.nextTitle = "Next >";
222+
clearValidityWatcher();
223+
}
224+
205225
function showSelect() {
226+
ctrl.infoStep.selected = false;
206227
ctrl.selectStep.selected = true;
207228
ctrl.configStep.selected = false;
208229
ctrl.resultsStep.selected = false;
@@ -212,6 +233,7 @@
212233
}
213234

214235
function showConfig() {
236+
ctrl.infoStep.selected = false;
215237
ctrl.selectStep.selected = false;
216238
ctrl.configStep.selected = true;
217239
ctrl.resultsStep.selected = false;
@@ -225,6 +247,7 @@
225247
}
226248

227249
function showResults() {
250+
ctrl.infoStep.selected = false;
228251
ctrl.selectStep.selected = false;
229252
ctrl.configStep.selected = false;
230253
ctrl.resultsStep.selected = true;

Diff for: ‎app/styles/_catalog.less

-27
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
@bind-service-page-height: 310px;
2-
@bind-service-wizard-min-external-height: 300px;
32
@landing-search-area-height: 52px;
43

5-
.bind-service-config {
6-
padding: 0 (@grid-gutter-width / 2);
7-
width: 100%;
8-
@media (min-width: @screen-sm-min) {
9-
margin-bottom: -(@grid-gutter-width / 2);
10-
margin-top: -(@grid-gutter-width / 2);
11-
overflow-y: auto;
12-
padding-right: 0;
13-
.scroll-shadows-vertical(65%, 0.25);
14-
_::-webkit-full-page-media, _:future, :root & { // only target Safari
15-
.scroll-shadows-vertical-with-covers(65%, 0.25);
16-
}
17-
18-
.form-horizontal .control-label {
19-
padding-right: 0;
20-
}
21-
}
22-
}
23-
244
.landing {
255
@media(min-width: @screen-sm-min) {
266
top: (@navbar-os-header-height-desktop + @landing-search-area-height);
@@ -34,16 +14,9 @@
3414
}
3515
}
3616

37-
.wizard-pf-footer.wizard-pf-position-override {
38-
position: relative;
39-
}
40-
4117
.wizard-pf-main.bind-service-wizard-step {
4218
@media (min-width: @screen-sm-min) {
4319
height: @bind-service-page-height + @grid-gutter-width;
44-
max-height: calc(100vh ~"-" @bind-service-wizard-min-external-height);
45-
min-height: 200px;
46-
overflow-y: auto;
4720
}
4821
}
4922

Diff for: ‎app/styles/_overlay-forms.less

+3-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
1-
.order-service-config-single-column {
2-
width: 100%;
3-
@media (min-width: 768px) {
4-
padding-left: 0;
5-
}
6-
}
7-
81
.wizard-pf-main {
92
.ace_editor.editor {
10-
height: 285px;
3+
height: 265px;
114
.landing-page & {
12-
height: 220px;
5+
height: 200px;
136
}
147
}
158

169
.deploy-image .empty-state-message {
17-
margin: 30px auto;
10+
margin: 30px auto 0;
1811
}
1912
}

Diff for: ‎app/views/directives/bind-service.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="bind-service-wizard">
22
<pf-wizard
3-
hide-header="true"
3+
title="Create Binding"
44
hide-sidebar="true"
55
step-class="bind-service-wizard-step"
66
wizard-ready="ctrl.wizardReady"

Diff for: ‎app/views/directives/deploy-image-dialog.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<pf-wizard
2+
title="Deploy Image"
23
on-cancel="$ctrl.close()"
34
on-finish="$ctrl.close()"
4-
hide-header="true"
55
hide-back-button="true"
66
hide-sidebar="true"
77
next-title="$ctrl.nextButtonTitle"
@@ -20,7 +20,7 @@
2020
allow-click-nav="false"
2121
next-enabled="$ctrl.deployForm.$valid || $ctrl.deployImageNewAppCreated">
2222
<div class="wizard-pf-main-inner-shadow-covers">
23-
<div class="order-service-config order-service-config-single-column">
23+
<div class="order-service-config">
2424
<div class="wizard-pf-main-form-contents">
2525
<form name="$ctrl.deployForm">
2626
<deploy-image is-dialog="true" project="$ctrl.project" context="$ctrl.context"></deploy-image>
@@ -37,7 +37,7 @@
3737
ok-to-nav-away="true"
3838
allow-click-nav="false">
3939
<div class="wizard-pf-main-inner-shadow-covers">
40-
<div class="order-service-config order-service-config-single-column">
40+
<div class="order-service-config">
4141
<div class="wizard-pf-main-form-contents">
4242
<next-steps project="$ctrl.selectedProject"
4343
project-name="$ctrl.selectedProject.metadata.name"

Diff for: ‎app/views/directives/from-file-dialog.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<pf-wizard
2+
title="Import YAML / JSON"
23
on-cancel="$ctrl.close()"
34
on-finish="$ctrl.close()"
4-
hide-header="true"
55
hide-sidebar="true"
66
next-title="$ctrl.nextButtonTitle"
77
next-callback="$ctrl.nextCallback"
@@ -18,7 +18,7 @@
1818
allow-click-nav="false"
1919
next-enabled="!$ctrl.importForm.$invalid">
2020
<div class="wizard-pf-main-inner-shadow-covers">
21-
<div class="order-service-config order-service-config-single-column">
21+
<div class="order-service-config">
2222
<div class="wizard-pf-main-form-contents">
2323
<form name="$ctrl.importForm">
2424
<from-file is-dialog="true" project="$ctrl.project"></from-file>
@@ -78,7 +78,7 @@
7878
allow-click-nav="false"
7979
prev-enabled="false">
8080
<div class="wizard-pf-main-inner-shadow-covers">
81-
<div class="order-service-config order-service-config-single-column">
81+
<div class="order-service-config">
8282
<div class="wizard-pf-main-form-contents">
8383
<!-- 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 -->
8484
<next-steps ng-if="$ctrl.currentStep === 'Results'" project="$ctrl.selectedProject"

Diff for: ‎app/views/directives/header/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747

4848
<sidebar></sidebar>
4949

50-
<overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
50+
<overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
5151
<deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
5252
<from-file-dialog ng-if="ordering.panelName === 'fromFile'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></from-file-dialog>
5353
<process-template-dialog ng-if="ordering.panelName === 'fromProject'" project="project" use-project-template="true" on-dialog-closed="closeOrderingPanel"></process-template-dialog>

Diff for: ‎app/views/directives/process-template-dialog.html

+2-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="order-service">
22
<pf-wizard
3-
hide-header="true"
3+
title="{{!$ctrl.useProjectTemplate && ($ctrl.template | displayName) || 'Select from Project'}}"
44
hide-sidebar="true"
55
hide-back-button="!$ctrl.useProjectTemplate"
66
step-class="order-service-wizard-step"
@@ -22,29 +22,7 @@
2222
step-id="{{step.id}}"
2323
step-priority="{{$index}}">
2424
<div class="wizard-pf-main-inner-shadow-covers">
25-
<div class="order-service-details" ng-if="!$ctrl.selectStep.selected">
26-
<div class="order-service-details-top">
27-
<div class="service-icon">
28-
<span class="icon {{$ctrl.iconClass}}"></span>
29-
</div>
30-
<div class="service-title-area">
31-
<div class="service-title">
32-
{{$ctrl.template | displayName}}
33-
</div>
34-
<div class="order-service-tags">
35-
<span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
36-
{{tag}}
37-
</span>
38-
</div>
39-
</div>
40-
</div>
41-
<div class="order-service-description-block">
42-
<p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
43-
</div>
44-
</div>
45-
<div class="order-service-config" ng-class="{'order-service-config-single-column': $ctrl.selectStep.selected}">
46-
<div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
47-
</div>
25+
<div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
4826
</div>
4927
</pf-wizard-step>
5028
</pf-wizard>

Diff for: ‎app/views/directives/process-template-dialog/process-template-config.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<div class="osc-form">
2-
<form name="$ctrl.form">
3-
<process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
4-
</form>
1+
<div class="order-service-config">
2+
<div class="osc-form">
3+
<form name="$ctrl.form">
4+
<process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
5+
</form>
6+
</div>
57
</div>

Diff for: ‎app/views/directives/process-template-dialog/process-template-info.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="order-service-details">
2+
<div class="order-service-details-top">
3+
<div class="service-icon">
4+
<span class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
5+
</div>
6+
<div class="service-title-area">
7+
<div class="service-title">
8+
{{$ctrl.template | displayName}}
9+
</div>
10+
<div class="order-service-tags">
11+
<span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
12+
{{tag}}
13+
</span>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="order-service-description-block">
18+
<p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
19+
</div>
20+
</div>

Diff for: ‎app/views/directives/process-template-dialog/process-template-results.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<next-steps
2-
project="$ctrl.selectedProject"
3-
project-name="$ctrl.selectedProject.metadata.name"
4-
login-base-url="$ctrl.loginBaseUrl"
5-
on-continue="$ctrl.close">
6-
</next-steps>
1+
<div class="order-service-config">
2+
<next-steps
3+
project="$ctrl.selectedProject"
4+
project-name="$ctrl.selectedProject.metadata.name"
5+
login-base-url="$ctrl.loginBaseUrl"
6+
on-continue="$ctrl.close">
7+
</next-steps>
8+
</div>

Diff for: ‎app/views/directives/process-template-dialog/process-template-select.html

+38-36
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
1-
<div class="config-top">
2-
<div class="select-project-for-template">
3-
<h2>Select from Project</h2>
4-
<ui-select
5-
name="selectProject"
6-
ng-model="$ctrl.templateProject"
7-
ng-change="$ctrl.templateProjectChange()"
8-
search-enabled="$ctrl.searchEnabled">
9-
<ui-select-match placeholder="Select a Project">
10-
{{$select.selected | displayName}}
11-
</ui-select-match>
12-
<ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
13-
<span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
14-
<span ng-if="project | displayName : true" class="small text-muted">
15-
<span ng-if="project.metadata.name">&ndash;</span>
16-
<span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
17-
</span>
18-
</ui-select-choices>
19-
</ui-select>
20-
</div>
21-
<pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
22-
<pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
23-
<div class="services-view">
24-
<div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
25-
<pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
26-
<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)">
27-
<div ng-if="!item.imageUrl" class="services-item-icon">
28-
<span class="{{item.iconClass}}"></span>
29-
</div>
30-
<div ng-if="item.imageUrl" class="services-item-icon">
31-
<img ng-src="{{item.imageUrl}}" alt="">
32-
</div>
33-
<div class="services-item-name" title="{{item.name}}">
34-
{{item.name}}
35-
</div>
36-
</a>
1+
<div class="order-service-config">
2+
<div class="config-top">
3+
<div class="select-project-for-template">
4+
<h2>Select from Project</h2>
5+
<ui-select
6+
name="selectProject"
7+
ng-model="$ctrl.templateProject"
8+
ng-change="$ctrl.templateProjectChange()"
9+
search-enabled="$ctrl.searchEnabled">
10+
<ui-select-match placeholder="Select a Project">
11+
{{$select.selected | displayName}}
12+
</ui-select-match>
13+
<ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
14+
<span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
15+
<span ng-if="project | displayName : true" class="small text-muted">
16+
<span ng-if="project.metadata.name">&ndash;</span>
17+
<span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
18+
</span>
19+
</ui-select-choices>
20+
</ui-select>
21+
</div>
22+
<pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
23+
<pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
24+
<div class="services-view">
25+
<div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
26+
<pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
27+
<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)">
28+
<div ng-if="!item.imageUrl" class="services-item-icon">
29+
<span class="{{item.iconClass}}"></span>
30+
</div>
31+
<div ng-if="item.imageUrl" class="services-item-icon">
32+
<img ng-src="{{item.imageUrl}}" alt="">
33+
</div>
34+
<div class="services-item-name" title="{{item.name}}">
35+
{{item.name}}
36+
</div>
37+
</a>
38+
</div>
3739
</div>
3840
</div>
3941
</div>

Diff for: ‎app/views/directives/resource-service-bindings.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3>Bindings</h3>
2424
<span>There are no service bindings.</span>
2525
</div>
2626
</div>
27-
<overlay-panel single-column="true" show-panel="$ctrl.overlayPanelVisible" show-close="true" handle-close="$ctrl.closeOverlayPanel">
27+
<overlay-panel show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
2828
<bind-service target="$ctrl.apiObject"
2929
project="$ctrl.project"
3030
on-close="$ctrl.closeOverlayPanel"></bind-service>

Diff for: ‎app/views/directives/unbind-service.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="bind-service-wizard unbind-service">
22
<pf-wizard
3-
hide-header="true"
3+
title="Delete Binding"
44
hide-sidebar="true"
55
hide-back-button="true"
66
step-class="bind-service-wizard-step"

Diff for: ‎app/views/landing-page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="middle landing-page">
22
<div class="middle-content">
3-
<overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
3+
<overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
44
<process-template-dialog ng-if="template" template="template" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
55
<deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
66
<from-file-dialog ng-if="ordering.panelName === 'fromFile'" on-dialog-closed="closeOrderingPanel"></from-file-dialog>

0 commit comments

Comments
 (0)