Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

feat(slider): vertical slider, UI fixes and bug fixes #6538

Closed
wants to merge 1 commit into from
Closed

feat(slider): vertical slider, UI fixes and bug fixes #6538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions src/components/slider/demoBasicUsage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,32 @@ <h3>
RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</h3>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">R</span>
</div>
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="">
<md-slider-container>
<span>R</span>
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">G</span>
</div>
<md-slider-container>
<span>G</span>
<md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">B</span>
</div>
<md-slider-container>
<span class="md-body-1">B</span>
<md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<h3>Rating: {{rating}}/5 - demo of theming classes</h3>
<div layout>
Expand All @@ -63,12 +57,20 @@ <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
</div>

<h3>Disabled</h3>
<md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>
<md-slider-container ng-disabled="isDisabled">
<md-icon md-svg-icon="device:brightness-low"></md-icon>
<md-slider ng-model="disabled1" aria-label="Disabled 1" flex md-discrete ng-readonly="readonly"></md-slider>

<h3>Disabled, Discrete</h3>
<md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider>
<md-input-container>
<input flex type="number" ng-model="disabled1" aria-label="green" aria-controls="green-slider">
</md-input-container>
</md-slider-container>
<md-checkbox ng-model="isDisabled">Is disabled</md-checkbox>
<md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>

<h3>Disabled, Discrete, Read Only</h3>
<md-slider ng-model="disabled2" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 2"></md-slider>
<md-slider ng-model="disabled3" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 3" ng-readonly="readonly"></md-slider>
<md-checkbox ng-model="readonly">Read only</md-checkbox>
</md-content>
</div>
11 changes: 8 additions & 3 deletions src/components/slider/demoBasicUsage/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@

angular.module('sliderDemo1', ['ngMaterial'])

.config(function($mdIconProvider) {
$mdIconProvider
.iconSet('device', 'img/icons/sets/device-icons.svg', 24);
})
.controller('AppCtrl', function($scope) {

$scope.color = {
Expand All @@ -13,7 +16,9 @@ angular.module('sliderDemo1', ['ngMaterial'])
$scope.rating2 = 2;
$scope.rating3 = 4;

$scope.disabled1 = 0;
$scope.disabled2 = 70;
$scope.disabled1 = Math.floor(Math.random() * 100);
$scope.disabled2 = 0;
$scope.disabled3 = 70;

$scope.isDisabled = true;
});
5 changes: 0 additions & 5 deletions src/components/slider/demoBasicUsage/style.css
View file
Open in desktop

This file was deleted.

33 changes: 33 additions & 0 deletions src/components/slider/demoVertical/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<div ng-controller="AppCtrl" ng-cloak>
<md-content layout="row" layout-padding>
<md-slider-container flex>
<md-input-container>
<input flex type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
</md-input-container>
<md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical
md-range></md-slider>
</md-slider>
<h5>Volume</h5>
</md-slider-container>
<md-slider-container flex>
<md-input-container>
<input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
</md-input-container>
<md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary"
md-vertical></md-slider>
</md-slider>
<h5>Bass</h5>
</md-slider-container>
<div flex layout="column" layout-align="center center">
<md-slider-container ng-disabled="readonly">
<md-input-container>
<input flex type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
</md-input-container>
<md-slider flex ng-model="master" md-discrete aria-label="Master" md-vertical step="10"
ng-readonly="readonly"></md-slider>
<h5>Master</h5>
</md-slider-container>
<md-checkbox ng-model="readonly">Read only</md-checkbox>
</div>
</md-content>
</div>
9 changes: 9 additions & 0 deletions src/components/slider/demoVertical/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

angular.module('sliderDemo2', ['ngMaterial'])

.controller('AppCtrl', function($scope) {

$scope.vol = Math.floor(Math.random() * 100);
$scope.bass = Math.floor(Math.random() * 100);
$scope.master = Math.floor(Math.random() * 100);
});
112 changes: 100 additions & 12 deletions src/components/slider/slider-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,50 @@ md-slider.md-THEME_NAME-theme {
background-color: '{{foreground-3}}';
}
._md-track-ticks {
background-color: '{{foreground-4}}';
}
._md-focus-thumb {
background-color: '{{foreground-2}}';
color: '{{background-contrast}}';
}
._md-focus-ring {
background-color: '{{accent-color}}';
background-color: '{{accent-200-0.38}}';
}
._md-disabled-thumb {
border-color: '{{background-color}}';
}
&._md-min ._md-thumb:after {
background-color: '{{background-color}}';
}

&._md-min {
._md-thumb:after {
background-color: '{{background-color}}';
border-color: '{{foreground-3}}';
}

._md-focus-ring {
background-color: '{{foreground-3-0.38}}';
}

&[md-discrete] {
._md-thumb {
&:after {
background-color: '{{background-contrast}}';
border-color: transparent;
}
}

._md-sign {
background-color: '{{background-400}}';
&:after {
border-top-color: '{{background-400}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{background-400}}';
}
}
}
}

._md-track._md-track-fill {
background-color: '{{accent-color}}';
}
Expand All @@ -32,13 +61,21 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{accent-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{accent-color}}';
}
}

._md-thumb-text {
color: '{{accent-contrast}}';
}

&.md-warn {
._md-focus-ring {
background-color: '{{warn-color}}';
background-color: '{{warn-200-0.38}}';
}
._md-track._md-track-fill {
background-color: '{{warn-color}}';
Expand All @@ -54,14 +91,22 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{warn-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{warn-color}}';
}
}

._md-thumb-text {
color: '{{warn-contrast}}';
}
}

&.md-primary {
._md-focus-ring {
background-color: '{{primary-color}}';
background-color: '{{primary-200-0.38}}';
}
._md-track._md-track-fill {
background-color: '{{primary-color}}';
Expand All @@ -77,17 +122,60 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{primary-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{primary-color}}';
}
}

._md-thumb-text {
color: '{{primary-contrast}}';
}
}

&[disabled] {
._md-thumb:after {
border-color: '{{foreground-3}}';
border-color: transparent;
}
&:not(._md-min) ._md-thumb:after {
background-color: '{{foreground-3}}';
&:not(._md-min), &[md-discrete] {
._md-thumb:after {
background-color: '{{foreground-3}}';
border-color: transparent;
}
}
}

&[disabled][readonly] {
._md-sign {
background-color: '{{background-400}}';
&:after {
border-top-color: '{{background-400}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{background-400}}';
}
}

._md-disabled-thumb {
border-color: transparent;
background-color: transparent;
}
}
}

md-slider-container {
&[disabled] {
& > *:first-child,
& > *:last-child {
&:not(md-slider){
color: '{{foreground-3}}';
}
}
}
}
Loading