Merge pull request #5405 from luixxiul/steps-button

Make steps header on adding/editing backup task accessible with keyboard
This commit is contained in:
Kenneth Skovhede
2024-08-13 08:01:30 +02:00
committed by GitHub
4 changed files with 26 additions and 23 deletions
+9 -6
View File
@@ -49,6 +49,10 @@ a {
text-decoration: none;
}
button {
border: none; /* Remove default border */
}
ul {
list-style: none;
margin: 0;
@@ -646,7 +650,6 @@ body {
height: 26px;
background-size: 26px;
cursor: pointer;
border: none; /* Remove default border */
}
.logo {
@@ -1342,11 +1345,6 @@ body {
color: @lColor;
}
}
.step:first-child {
padding-left: 0;
background: transparent;
}
}
.steps-legend {
@@ -1718,6 +1716,11 @@ body {
.step {
padding-left: @step-width - @circle-width;
padding-right: 0;
&:first-child {
padding-inline: 0;
}
}
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -2,30 +2,30 @@
<div class="add" ng-controller="EditBackupController">
<div class="steps">
<div class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0">
<button class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0" aria-labelledby="steps-legend__1">
<span>1</span>
</div>
<div class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1">
</button>
<button class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1" aria-labelledby="steps-legend__2">
<span>2</span>
</div>
<div class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2">
</button>
<button class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2" aria-labelledby="steps-legend__3">
<span>3</span>
</div>
<div class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3">
</button>
<button class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3" aria-labelledby="steps-legend__4">
<span>4</span>
</div>
<div class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4">
</button>
<button class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4" aria-labelledby="steps-legend__5">
<span>5</span>
</div>
</button>
</div>
<!-- .steps -->
<ol class="steps-legend">
<li ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
<li ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1" translate>Destination</li>
<li ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2" translate>Source Data</li>
<li ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3" translate>Schedule</li>
<li ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4" translate>Options</li>
<li id="steps-legend__1" ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
<li id="steps-legend__2" ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1" translate>Destination</li>
<li id="steps-legend__3" ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2" translate>Source Data</li>
<li id="steps-legend__4" ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3" translate>Schedule</li>
<li id="steps-legend__5" ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4" translate>Options</li>
</ol>
<!-- .steps-legend -->