trying to make CSS more manageable...why so many bugs :(
This commit is contained in:
parent
40eb0cae00
commit
97cfa365a2
11 changed files with 104 additions and 151 deletions
|
|
@ -177,10 +177,10 @@ export default Component.extend({
|
|||
'You may toggle a light\'s state by clicking on it.'
|
||||
},
|
||||
{
|
||||
element: $('.settings-item')[1],
|
||||
element: '#settings-icon',
|
||||
intro: 'A few miscellaneous settings can be found here.<br><br>' +
|
||||
'<b>WARNING</b>: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.',
|
||||
position: 'left'
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#dimmer',
|
||||
|
|
|
|||
|
|
@ -6,25 +6,26 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
<div id="settings" class="col-xs-2">
|
||||
<div class="settings-item">
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#paper-button target=menu action="toggleMenu" icon-button=true}}
|
||||
{{paper-icon "settings" class=dimmerOnClass}}
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
|
||||
{{/paper-button}}
|
||||
{{else}}
|
||||
{{#paper-menu-item action="clearBridge"}}
|
||||
<span class="md-menu-align-target">Switch bridge</span>
|
||||
{{paper-icon "settings" class="md-menu-align-target"}}
|
||||
<span>Switch bridge</span>
|
||||
{{/paper-menu-item}}
|
||||
{{#paper-menu-item action="startIntro"}}
|
||||
{{paper-icon "settings" class="md-menu-align-target"}}
|
||||
<span>Restart tutorial</span>
|
||||
{{/paper-menu-item}}
|
||||
{{#paper-menu-item action="clearAllSettings"}}
|
||||
{{paper-icon "settings" class="md-menu-align-target"}}
|
||||
<span>Reset settings</span>
|
||||
{{/paper-menu-item}}
|
||||
{{/paper-menu}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="power-settings-new" class=dimmerOnClass}}
|
||||
{{paper-icon "power-settings-new" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
|
||||
{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="brightness-4" class=dimmerOnClass}}
|
||||
{{paper-icon "brightness-4" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p>
|
||||
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item elementId="color-row"}}
|
||||
{{paper-icon icon="color-lens" class=dimmerOnClass}}
|
||||
{{paper-icon "color-lens" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
|
||||
{{/paper-item}}
|
||||
|
||||
|
|
@ -29,13 +29,13 @@
|
|||
</div>
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="flare" class=dimmerOnClass}}
|
||||
{{paper-icon "flare" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
|
||||
{{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="loop" id="loop-addition" class=dimmerOnClass}}
|
||||
{{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
|
||||
{{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}}
|
||||
{{/paper-item}}
|
||||
|
|
|
|||
|
|
@ -555,7 +555,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
slideTogglePlayerBottom(){
|
||||
let elem = this.$('#player-bottom');
|
||||
|
||||
elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 500 });
|
||||
elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 300 });
|
||||
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
|
||||
},
|
||||
goToSong(index, playSong, scrollToSong){
|
||||
|
|
@ -618,13 +618,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
|
||||
if(scrollToSong){
|
||||
// this is just a bad workaround to make sure that the track has been rendered to the playlist
|
||||
run.later(()=>{
|
||||
let track = $('.track'+index);
|
||||
|
||||
if(!isNone(track) && !isNone(track.offset())) {
|
||||
track.velocity('scroll', { container: $('#play-list-area') });
|
||||
}
|
||||
}, 1000);
|
||||
run.next(this, ()=>{
|
||||
$('.track'+index).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
|
||||
{{#if playQueueNotEmpty}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="player-control-icon"}}</span><!--
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="player-control-icon"}}</span><!--
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
|
||||
-->{{#if playQueueMultiple}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="player-control-icon"}}</span><!--
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
||||
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
||||
|
|
@ -35,13 +35,19 @@
|
|||
<span class="dropup">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
||||
{{paper-icon icon="remove-red-eye" class="player-control-icon"}}
|
||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<ul class="dropdown-menu visualizers-menu">
|
||||
{{#each visNames as |name|}}
|
||||
<li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li>
|
||||
<li>
|
||||
<a href="#" {{action "setVisName" name}}>{{name}}
|
||||
{{#if (eq currentVisName name)}}
|
||||
{{paper-icon "check"}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</span>
|
||||
|
|
@ -63,14 +69,6 @@
|
|||
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
||||
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
|
||||
{{!--{{#if (and usingLocalAudio playQueueNotEmpty)}}
|
||||
<div id="extra-options-menu" class="hidden-xs">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
|
||||
</div>
|
||||
{{/if}} --}}
|
||||
{{/if}}
|
||||
|
||||
{{#if usingMicSupported}}
|
||||
|
|
@ -78,15 +76,15 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if usingLocalAudio}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div id="play-area-mic" class="{{if dimmerOn "dimmerOn"}}">
|
||||
{{paper-icon icon="mic" class=dimmerOnClass}}
|
||||
{{paper-icon "mic" class=dimmerOnClass}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if usingLocalAudio}}
|
||||
|
|
@ -99,7 +97,7 @@
|
|||
Add your music files here
|
||||
{{/if}}
|
||||
</div>
|
||||
{{paper-icon icon="library-music" class=dimmerOnClass}}
|
||||
{{paper-icon "library-music" class=dimmerOnClass}}
|
||||
{{/if}}
|
||||
|
||||
{{#each playQueue as |item index|}}
|
||||
|
|
@ -125,7 +123,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close"}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -136,7 +134,7 @@
|
|||
|
||||
<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
|
||||
<div class="col-xs-offset-5 col-xs-2">
|
||||
{{paper-icon icon=beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -144,7 +142,7 @@
|
|||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
{{paper-icon class=dimmerOnClass icon="star"}}
|
||||
{{paper-icon "star" class=dimmerOnClass}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,18 +58,12 @@ body, button {
|
|||
}
|
||||
|
||||
#settings {
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
z-index: 3;
|
||||
font-size: 16px;
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-item:nth-of-type(2){
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.settings-item .settings::before {
|
||||
font-size: 28px;
|
||||
.settings::before {
|
||||
transition: 0.1s all ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +1,73 @@
|
|||
@import 'huegasm-variables';
|
||||
|
||||
div.dimmerOn {
|
||||
color: white !important;
|
||||
background: #171717 !important;
|
||||
color: $whitish !important;
|
||||
background: $blackish !important;
|
||||
}
|
||||
|
||||
html.dimmerOn {
|
||||
color: white;
|
||||
background: #242424;
|
||||
background: $blackish;
|
||||
}
|
||||
|
||||
body.dimmerOn {
|
||||
color: white;
|
||||
background: #242424;
|
||||
color: $whitish;
|
||||
background: $blackish;
|
||||
.md-track {
|
||||
background: white;
|
||||
background: $whitish;
|
||||
}
|
||||
.color {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.playlist-item {
|
||||
color: #cdcdcd;
|
||||
background: $dimmerOnButtonColor;
|
||||
.playlist-item, #add-music-choices, .add-new-music {
|
||||
color: $whitish;
|
||||
background-color: $dimmerOnButtonColor;
|
||||
}
|
||||
.playlist-item.active {
|
||||
#add-music-choices {
|
||||
a {
|
||||
color: $whitish;
|
||||
&:hover {
|
||||
background-color: darken($dimmerOnButtonColor, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.playlist-item {
|
||||
&.active {
|
||||
background: darken($dimmerOnButtonColor, 15%) !important;
|
||||
}
|
||||
.playlist-item:hover {
|
||||
&:hover {
|
||||
background: darken($dimmerOnButtonColor, 10%);
|
||||
}
|
||||
.playlist-item .close {
|
||||
color: #cdcdcd !important;
|
||||
}
|
||||
.playlist-item .close:hover {
|
||||
.close {
|
||||
color: $whitish !important;
|
||||
&:hover {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
-webkit-filter: drop-shadow(0 0 5px #228DFF);
|
||||
}
|
||||
md-input-container {
|
||||
label {
|
||||
color: white;
|
||||
color: $whitish;
|
||||
}
|
||||
input {
|
||||
border-bottom-color: white !important;
|
||||
border-bottom-color: $whitish !important;
|
||||
}
|
||||
input {
|
||||
color: white !important;
|
||||
color: $whitish !important;
|
||||
}
|
||||
}
|
||||
.add-new-music {
|
||||
background: $dimmerOnButtonColor
|
||||
}
|
||||
.add-new-music:hover {
|
||||
background: darken($dimmerOnButtonColor, 5%);
|
||||
}
|
||||
#extra-options-menu {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#extra-options-menu:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.popover-content {
|
||||
color: black !important;
|
||||
}
|
||||
.md-bar {
|
||||
background-color: darken(white, 60%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.power-settings-new.dimmerOn,
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
#loop-addition {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 13px;
|
||||
left: 35px;
|
||||
top: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,3 +5,5 @@ $playerBottomHeight: 255px;
|
|||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 8px #fff, 0 0 20px #228DFF;
|
||||
$dimmerOnButtonColor: #404040;
|
||||
$blackish: #242424;
|
||||
$whitish: #e0e0e0;
|
||||
|
|
@ -365,27 +365,24 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
#extra-options-menu {
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 3px 15px;
|
||||
position: absolute;
|
||||
bottom: -39px;
|
||||
right: 17px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#extra-options-menu:hover {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 18px !important;
|
||||
color: rgb(51, 51, 51);
|
||||
display: none;
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
&:hover {
|
||||
color: darken(#333333, 5%) !important;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
// mobile overrides
|
||||
@media(max-width:767px) {
|
||||
#seek-slider {
|
||||
|
|
@ -394,9 +391,6 @@
|
|||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
.settings-item:nth-of-type(2){
|
||||
margin-left: 0;
|
||||
}
|
||||
#seek-slider {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,39 +35,11 @@ md-progress-linear {
|
|||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.settings-item span:hover {
|
||||
text-decoration: underline;
|
||||
md-icon.settings {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: 0.1s all ease-in-out;
|
||||
cursor: pointer;
|
||||
span md-icon {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-tooltip md-icon {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
-webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering
|
||||
}
|
||||
|
||||
md-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
md-list-item .md-no-style {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
md-slider {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -77,10 +49,6 @@ md-slider.md-default-theme .md-thumb:after {
|
|||
background-color: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
.paper-sidenav {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
md-icon {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
|
|
@ -89,10 +57,6 @@ md-toolbar {
|
|||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
md-switch.md-default-theme.md-checked .md-bar {
|
||||
background-color: rgba(241, 43, 36, 0.5);
|
||||
}
|
||||
|
||||
md-switch.md-default-theme.md-checked .md-thumb {
|
||||
background-color: $secondaryThemeColor;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue