Skip to content

Commit a2d157d

Browse files
author
Rafael Grigorian
committed
Related To #51 - 'Better UI/UX for configuration page'
1 parent c37f7c0 commit a2d157d

File tree

7 files changed

+62
-75
lines changed

7 files changed

+62
-75
lines changed

‎view/adminhtml/templates/configuration.phtml‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,11 @@
1919
?>
2020

2121
<section class="varnish dark-bg" >
22-
<div class="button-container steps" data-stage="<?= $stage ?>" >
23-
<div class="button active previous" >
24-
<img src="<?= $block->getViewFileUrl ('JetRails_Varnish/images/previous.svg') ?>" />
25-
<span>Previous</span>
26-
</div>
27-
<div class="title" ></div>
28-
<div class="button active next" >
29-
<span>Next</span>
30-
<img src="<?= $block->getViewFileUrl ('JetRails_Varnish/images/next.svg') ?>" />
31-
</div>
32-
</div>
3322
<div class="cards one-col" >
34-
<div class="card" data-section="Change Caching Application" >
23+
<div class="card <?= $enabled ? "done" : "" ?>" data-section="Change Caching Application" >
3524
<div class="methods" >
3625
<fieldset class="method-container" >
37-
<h3>Set Caching Application</h3>
26+
<h3>Set Caching Application<span><?= $enabled ? "Complete" : "Pending" ?></span></h3>
3827
<p>The current caching application is set to <code><?= $enabled ? "Varnish Cache" : "Built-In Cache" ?></code>.</p>
3928
<p>
4029
On this step, we change the default caching application from Magento's Built-In Cache to Varnish Cache.
@@ -59,25 +48,32 @@
5948
</fieldset>
6049
</div>
6150
</div>
62-
<div class="card" data-section="Configure Varnish Server(s)" >
51+
<div class="card <?= $edited ? "done" : "" ?>" data-section="Configure Varnish Server(s)" >
6352
<div class="methods" >
6453
<fieldset class="method-container" >
65-
<h3>Configure Varnish Server(s)</h3>
54+
<h3>Configure Varnish Server(s)<span><?= $edited ? "Complete" : "Pending" ?></span></h3>
6655
<p>
6756
On this step, we will configure the available Varnish server(s).
6857
This change can be made through the <b>Command-Line</b> or <b>Env Config File</b>.
6958
</p>
70-
<p>
59+
<table>
60+
<tr>
61+
<th width="50%" >Host</th>
62+
<th width="50%" >Port</th>
63+
</tr>
7164
<?php if ( $edited ): ?>
72-
<ul>
73-
<?php foreach ( $servers as $index => $server ): ?>
74-
<li><?= $server->host . ":" . $server->port ?></li>
75-
<?php endforeach; ?>
76-
</ul>
65+
<?php foreach ( $servers as $index => $server ): ?>
66+
<tr>
67+
<td><?= $server->host ?></td>
68+
<td><?= $server->port ?></td>
69+
</tr>
70+
<?php endforeach; ?>
7771
<?php else: ?>
78-
<p>No Configured Server(s) Detected</p>
72+
<tr>
73+
<td colspan="3" >No Configured Server(s) Detected</td>
74+
</tr>
7975
<?php endif; ?>
80-
</p>
76+
</table>
8177
<div class="tray-labels" >
8278
<div data-tray="cli" >Command-Line<span>&blacktriangleright;</span></div>
8379
<div data-tray="config" >Config File<span>&blacktriangleright;</span></div>
@@ -108,22 +104,22 @@
108104
</fieldset>
109105
</div>
110106
</div>
111-
<div class="card" data-section="Download Custom VCL" >
107+
<div class="card <?= $installed ? "done" : "" ?>" data-section="Download Custom VCL" >
112108
<div class="methods" >
113109
<fieldset class="method-container" >
114-
<h3>Install Varnish Config File</h3>
110+
<h3>Install Varnish Config File<span><?= $installed ? "Complete" : "Pending" ?></span></h3>
115111
<table>
116112
<tr>
117-
<th>Varnish Server</th>
118-
<th>Magento Version</th>
119-
<th>Module Version</th>
113+
<th width="33.33%" >Varnish Server</th>
114+
<th width="33.33%" >Magento Version</th>
115+
<th width="33.33%" >Module Version</th>
120116
</tr>
121117
<?php if ( $edited ): ?>
122118
<?php foreach ( $servers as $index => $server ): ?>
123119
<tr>
124120
<td><?= $server->host . ":" . $server->port ?></td>
125-
<td>Version <?= $server->magento ?></td>
126-
<td>Version <?= $server->version ?></td>
121+
<td><?= $server->magento ?></td>
122+
<td><?= $server->version ?></td>
127123
</tr>
128124
<?php endforeach; ?>
129125
<?php else: ?>
@@ -149,7 +145,7 @@
149145
--backend-port=8080 \
150146
--grace-period=300</code></pre>
151147
</div>
152-
<div class="tray" data-tray="dashboard" >
148+
<div class="tray" data-tray="dashboard" >
153149
<p>
154150
This can be done by navigating to <a href="<?= $block->getUrl ("adminhtml/system_config/edit/section/system") ?>" target="_blank" >Stores &#10095; Settings &#10095; Configuration &#10095; Advanced &#10095; System</a> &#10095; <b>Full Page Cache</b> &#10095; <b>Varnish Configuration</b>.
155151
Once there you can configure your desired backend and download the VCL under <b>Export Configuration</b>.
@@ -158,7 +154,7 @@
158154
</fieldset>
159155
</div>
160156
</div>
161-
<div class="card" data-section="Debug Varnish Cache" >
157+
<div class="card done" data-section="Debug Varnish Cache" >
162158
<div class="methods" >
163159
<fieldset class="method-container" >
164160
<h3>Debug Mode</h3>

‎view/adminhtml/web/css/styles.css‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@ section.varnish .progress-container {
1111
justify-content: space-between;
1212
position: relative;
1313
flex-wrap: wrap;
14-
1514
display: none;
16-
1715
}
1816

1917
section.varnish code {
20-
background: #e2e2e2;
18+
background: #F3F2F1;
2119
border-radius: 3px;
2220
padding: 2px 4px;
2321
margin: 0;
@@ -161,7 +159,6 @@ section.varnish .card {
161159
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
162160
border-radius: 3px;
163161
overflow: hidden;
164-
display: none;
165162
}
166163

167164
section.varnish .card.visible {
@@ -181,7 +178,7 @@ section.varnish .card .method-container {
181178
margin: 0;
182179
border: none;
183180
background: #FFF;
184-
padding: 30px;
181+
padding: 20px;
185182
min-width: initial;
186183
height: 100%;
187184
display: flex;
@@ -196,16 +193,15 @@ section.varnish .card .method-container .tray-labels {
196193
width: 100%;
197194
flex-wrap: nowrap;
198195
justify-content: flex-end;
199-
border-top: solid 1px #DDDDDD;
200-
margin-top: 25px;
196+
margin-top: 5px;
201197
}
202198

203199
section.varnish .card .method-container .tray-labels > div {
204200
color: #1c78d3;
205201
text-transform: uppercase;
206202
font-weight: 600;
207203
font-size: 13px;
208-
margin: 25px 0 0 5px;
204+
margin: 15px 0 0 5px;
209205
padding: 5px 10px;
210206
border-radius: 3px;
211207
cursor: pointer;
@@ -220,7 +216,6 @@ section.varnish .card .method-container .tray-labels > div.active {
220216
section.varnish .card .method-container .tray {
221217
display: none;
222218
padding: 25px 0 0 0;
223-
/* font-family: monospace; */
224219
}
225220

226221
section.varnish table {
@@ -231,6 +226,7 @@ section.varnish table th {
231226
font-weight: bold;
232227
text-align: left;
233228
white-space: nowrap;
229+
background: #F3F2F1;
234230
}
235231

236232
section.varnish table th,
@@ -257,6 +253,33 @@ section.varnish .card .method-container > button {
257253
section.varnish .card .method-container > h3 {
258254
margin: 0;
259255
padding-bottom: 20px;
256+
position: relative;
257+
}
258+
259+
section.varnish .card.done {
260+
box-shadow: 0 0px 2px rgba(0,0,0,0.23);
261+
}
262+
263+
section.varnish .card .method-container > h3 > span {
264+
position: absolute;
265+
right: 0;
266+
font-size: 12px;
267+
padding: 3px 8px 3px 22px;
268+
border-radius: 10px;
269+
border: solid 1px #00000030;
270+
box-sizing: border-box;
271+
color: #000000CC;
272+
background: url("../images/close.svg"), #F3F2F1;
273+
background-repeat: no-repeat;
274+
background-position: 5px center;
275+
background-size: 16px;
276+
text-transform: uppercase;
277+
}
278+
279+
section.varnish .card.done .method-container > h3 > span {
280+
background-image: url("../images/done.svg");
281+
background-color: #A0C766;
282+
color: #000000CC;
260283
}
261284

262285
section.varnish .card .method-container > p {

‎view/adminhtml/web/images/close.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎view/adminhtml/web/images/done.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎view/adminhtml/web/images/next.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎view/adminhtml/web/images/previous.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎view/adminhtml/web/js/functions.js‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,6 @@
22

33
require (["jquery"], function ( $ ) {
44

5-
if ( $(".button-container.steps").length > 0 ) {
6-
7-
const container = $(".varnish .button-container")
8-
const previous = $(container).find (".previous")
9-
const next = $(container).find (".next")
10-
const message = $(container).find (".title")
11-
const count = $(".varnish .card[data-section]").length
12-
13-
function loadStage ( index ) {
14-
const target = $(".varnish .card[data-section]").eq ( index ).data ("section")
15-
container.data ( "stage", index )
16-
$(message).text (`Step ${index + 1} of ${count}: ${target}`)
17-
$(".cards .card").css ( "display", "none" )
18-
$(".cards .card").eq ( index ).css ( "display", "block" )
19-
$(previous) [ index == 0 ? "removeClass" : "addClass" ] ("active")
20-
$(next) [ index >= count - 1 ? "removeClass" : "addClass" ] ("active")
21-
}
22-
23-
$(document).on ( "click", ".previous.active", () => {
24-
const stage = container.data ("stage")
25-
loadStage ( Math.max ( 0, stage - 1 ) )
26-
})
27-
28-
$(document).on ( "click", ".next.active", () => {
29-
const stage = container.data ("stage")
30-
loadStage ( Math.min ( count - 1, stage + 1 ) )
31-
})
32-
33-
loadStage ( container.data ("stage") )
34-
35-
}
36-
375
$(document).on ( "click", ".varnish .tray-labels [data-tray]", function () {
386
const tray = $(this).data ("tray")
397
const open = $(this).data ("open")

0 commit comments

Comments
 (0)