lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

trying to make CSS more manageable...why so many bugs :(

Browse source
This commit is contained in:
Egor! 2016-10-13 17:21:30 -07:00
parent adfe7a40d6
commit 91206135e4
11 changed files with 104 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/app/pods/components/hue-controls/component.js
View file

@ -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',

35
web/app/pods/components/hue-controls/template.hbs
View file

@ -6,23 +6,24 @@
{{/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-button}}
{{else}}
{{#paper-menu-item action="clearBridge"}}
<span class="md-menu-align-target">Switch bridge</span>
{{/paper-menu-item}}
{{#paper-menu-item action="startIntro"}}
<span>Restart tutorial</span>
{{/paper-menu-item}}
{{#paper-menu-item action="clearAllSettings"}}
<span>Reset settings</span>
{{/paper-menu-item}}
{{/paper-menu}}
</div>
{{#paper-menu as |menu|}}
{{#paper-button target=menu action="toggleMenu" icon-button=true}}
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
{{/paper-button}}
{{else}}
{{#paper-menu-item action="clearBridge"}}
{{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>

10
web/app/pods/components/lights-tab/template.hbs
View file

@ -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}}

12
web/app/pods/components/music-tab/component.js
View file

@ -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 });
});
}
}
},

40
web/app/pods/components/music-tab/template.hbs
View file

@ -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}}

12
web/app/styles/app.scss
View file

@ -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;
}

68
web/app/styles/dimmer.scss
View file

@ -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, #add-music-choices, .add-new-music {
color: $whitish;
background-color: $dimmerOnButtonColor;
}
#add-music-choices {
a {
color: $whitish;
&:hover {
background-color: darken($dimmerOnButtonColor, 10%) !important;
}
}
}
.playlist-item {
color: #cdcdcd;
background: $dimmerOnButtonColor;
}
.playlist-item.active {
background: darken($dimmerOnButtonColor, 15%) !important;
}
.playlist-item:hover {
background: darken($dimmerOnButtonColor, 10%);
}
.playlist-item .close {
color: #cdcdcd !important;
}
.playlist-item .close:hover {
color: white !important;
&.active {
background: darken($dimmerOnButtonColor, 15%) !important;
}
&:hover {
background: darken($dimmerOnButtonColor, 10%);
}
.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,

4
web/app/styles/hue-controls.scss
View file

@ -71,7 +71,7 @@
#loop-addition {
position: absolute;
left: 18px;
top: 13px;
left: 35px;
top: 15px;
font-size: 16px;
}

4
web/app/styles/huegasm-variables.scss
View file

@ -4,4 +4,6 @@ $footerHeight: 45px;
$playerBottomHeight: 255px;
$secondaryThemeColor: #F12B24;
$glowingText: 0 0 2px #fff, 0 0 8px #fff, 0 0 20px #228DFF;
$dimmerOnButtonColor: #404040;
$dimmerOnButtonColor: #404040;
$blackish: #242424;
$whitish: #e0e0e0;

30
web/app/styles/music-tab.scss
View file

@ -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;
}

36
web/app/styles/paper.scss
View file

@ -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;
}