Merge ~deadlight/maas:delete-fabric into maas:master

Proposed by Karl Williams
Status: Merged
Approved by: Karl Williams
Approved revision: 58375a88fc5702029931e1f7cef81d0b94ddce7d
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~deadlight/maas:delete-fabric
Merge into: maas:master
Diff against target: 105 lines (+45/-21)
1 file modified
src/maasserver/static/partials/fabric-details.html (+45/-21)
Reviewer Review Type Date Requested Status
Anthony Dillon Approve
Andres Rodriguez (community) Approve
MAAS Lander Approve
Review via email: mp+343169@code.launchpad.net

Commit message

LP: #1763219 - Restructure fabric deletion action to look good on more viewports.

Description of the change

Updated the delete action on the fabric details page to be a little more robust at various screen sizes.

QA: Delete a fabric from the fabric details page.

To post a comment you must log in.
Revision history for this message
MAAS Lander (maas-lander) wrote :

UNIT TESTS
-b delete-fabric lp:~deadlight/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 58375a88fc5702029931e1f7cef81d0b94ddce7d

review: Approve
Revision history for this message
Andres Rodriguez (andreserl) wrote :

lgtm! I have not tested it though.

review: Approve
Revision history for this message
MAAS Lander (maas-lander) wrote :
Revision history for this message
Anthony Dillon (ya-bo-ng) wrote :

Looks good +1

review: Approve
Revision history for this message
MAAS Lander (maas-lander) wrote :

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1diff --git a/src/maasserver/static/partials/fabric-details.html b/src/maasserver/static/partials/fabric-details.html
2index 9bea87a..70b299f 100644
3--- a/src/maasserver/static/partials/fabric-details.html
4+++ b/src/maasserver/static/partials/fabric-details.html
5@@ -8,39 +8,63 @@
6 <div class="ng-hide u-no-margin--top" data-ng-show="loaded">
7 <header class="p-strip--light is-shallow is-bordered page-header" media-query="min-width: 769px">
8 <div class="row">
9- <div class="col-8">
10- <h1 class="page-header__title">{$ fabric.name $}</h1>
11- </div>
12- <div class="col-4">
13- <div class="page-header__controls ng-hide" data-ng-show="isSuperUser() && !isDefaultFabric() && !loading">
14+ <div>
15+ <h1 class="page-header__title u-hide--small">{$ fabric.name $}</h1>
16+ <div class="col-12 u-hide u-show--small">
17+ <h1 class="page-header__title">{$ fabric.name $}</h1>
18+ </div>
19+ <div class="page-header__controls u-no-margin--top ng-hide" data-ng-show="isSuperUser() && !isDefaultFabric() && !loading">
20 <button class="p-button--negative"
21 data-ng-click="deleteButton()"
22 data-ng-hide="confirmingDelete">Delete fabric</button>
23 </div>
24- <div class="page-header__dropdown" data-ng-class="{ 'u-hide': !confirmingDelete }">
25- <section class="page-header__section ng-hide u-align--right" data-ng-hide="canBeDeleted()">
26- <p class="page-header__message page-header__message--error">
27- Fabric cannot be deleted because it is the default fabric.
28- </p>
29- <div class="page-header__controls">
30+ <div class="page-header__controls u-no-margin--top" data-ng-class="{ 'u-hide': !confirmingDelete }">
31+ <section class="u-no-margin--top u-align--right" data-ng-hide="canBeDeleted()">
32+ <div class="u-hide--small">
33+ <i class="p-icon--error"></i> Fabric cannot be deleted because it is the default fabric.&emsp;
34 <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
35 </div>
36+ <div class="u-hide u-show--small u-align--left">
37+ <div class="col-12 u-align--left">
38+ <p><i class="p-icon--error"></i> Fabric cannot be deleted because it is the default fabric.</p>
39+ </div>
40+ <div class="col-12 u-align--right">
41+ <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
42+ </div>
43+ </div>
44+
45 </section>
46- <section class="page-header__section ng-hide u-align--right" data-ng-show="canBeDeleted() && !error">
47- <p class="page-header__message page-header__message--error">
48- <i class="p-icon--warning"></i> Are you sure you want to delete this fabric?
49- </p>
50- <div class="page-header__controls">
51+ <section class="ng-hide u-no-margin--top u-align--right" data-ng-show="canBeDeleted() && !error">
52+ <div class="u-hide--small">
53+ <i class="p-icon--warning"></i> Are you sure you want to delete this fabric?&emsp;
54 <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
55 <button class="p-button--negative" data-ng-click="deleteConfirmButton()">Delete fabric</button>
56 </div>
57+ <div class="u-hide u-show--small u-align--left">
58+ <div class="col-12 u-align--left">
59+ <p><i class="p-icon--warning"></i> Are you sure you want to delete this fabric?</p>
60+ </div>
61+ <div class="col-12 u-align--right">
62+ <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
63+ <button class="p-button--negative" data-ng-click="deleteConfirmButton()">Delete fabric</button>
64+ </div>
65+ </div>
66 </section>
67- <section class="page-header__section ng-hide u-align--right" data-ng-show="canBeDeleted() && error">
68- <p class="page-header__message page-header__message--error">{$ error $}</p>
69- <div class="page-header__controls">
70+ <section class="page-header__controls u-no-margin--top u-align--right" data-ng-show="canBeDeleted() && error">
71+ <div class="u-hide--small">
72+ <i class="p-icon--error"></i> {$ error $}&emsp;
73 <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
74 <button class="p-button--neutral" data-ng-click="deleteConfirmButton()">Retry</button>
75 </div>
76+ <div class="u-hide u-show--small u-align--left">
77+ <div class="col-12 u-align--left">
78+ <p><i class="p-icon--error"></i> {$ error $}</p>
79+ </div>
80+ <div class="col-12 u-align--right">
81+ <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
82+ <button class="p-button--neutral" data-ng-click="deleteConfirmButton()">Retry</button>
83+ </div>
84+ </div>
85 </section>
86 </div>
87 </div>
88@@ -82,7 +106,7 @@
89 </div>
90 <div class="p-form__control">
91 <span data-ng-repeat="rack in racks | orderBy:'hostname' track by rack.system_id">
92- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
93+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
94 </span>
95 </div>
96 </div>
97@@ -104,7 +128,7 @@
98 </div>
99 <div class="p-form__control">
100 <span data-ng-repeat="rack in racks | orderBy:'hostname' track by rack.system_id">
101- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
102+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
103 </span>
104 </div>
105 </div>

Subscribers

People subscribed via source and target branches