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

dimmer switch, labels for settings

Browse source
This commit is contained in:
Egor Philippov 2015-10-16 13:01:36 -07:00
parent 97d257d6a1
commit 0c3ed83ba7
8 changed files with 102 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/pods/components/bridge-finder/template.hbs
View file

@ -26,8 +26,10 @@
</div>
{{else}}
{{#if bridgeFindFail}}
<p>A hue bridge was not found on your network. <br>
Enter one manually?</p>
<p>A hue bridge could not be automatically found on your network. <br>
Enter one manually? <br><br>
( or enter <b>trial</b> to look around )
</p>
<span id="bridgeInput">
{{paper-input label="Hue bridge IP address" value=manualBridgeIp}}

8
app/pods/components/groups-list/template.hbs
View file

@ -1,9 +1,11 @@
<h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="bottom auto" title="Add Group" class="bootstrapTooltip addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
{{#paper-list}}
{{#paper-item}}
<h4 class="addButton" {{action "toggleAddGroupsModal"}}>Add a new light group</h4>
{{/paper-item}}
{{#each groupsArrData as |group|}}
{{#paper-item class=group.rowClass}}
<div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
<div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
{{/paper-item}}
{{/each}}
{{/paper-list}}

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

@ -1,34 +1,32 @@
{{#if ready}}
<div class="row navigation">
<div class="col-lg-4 col-lg-offset-4 col-xs-6 col-xs-offset-3">
<div class="col-sm-5 col-sm-offset-4 col-xs-6 col-xs-offset-1">
{{#each tabData as |tab|}}
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}}
</div>
<div id="settings" class="col-xs-3">
<span id="groupMenu" class="settingsItem">
<div id="settings" class="col-sm-3 col-xs-5">
<div class="settingsItem">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Light Groups">
{{paper-icon icon="group"}}
</span>
Light Groups
<div class="text-center">{{paper-icon icon="group"}}</div>
</span>
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
</span>
</div>
<span id="appSettingsMenu" class="settingsItem">
<div class="settingsItem">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Application Settings">
{{paper-icon icon="settings"}}
</span>
Settings
<div class="text-center">{{paper-icon icon="settings"}}</div>
</span>
<ul id="appSettings" class="dropdown-menu">
<li class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</li>
<li class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</li>
</ul>
</span>
</div>
</div>
</div>

2
app/pods/components/huegasm-app/template.hbs
View file

@ -5,5 +5,5 @@
{{/if}}
<footer id="footer">
<p><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
<p><span class="relative"><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</span></p>
</footer>

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

@ -1,23 +1,23 @@
{{#paper-list}}
{{#paper-list class="lightsTab"}}
{{#paper-item class="item"}}
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup"}}
{{/paper-item}}
{{#paper-item}}
{{paper-icon icon="power-settings-new"}}
<p>Power</p>
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights are turned on/off">Power</p>
{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
{{/paper-item}}
{{#paper-item}}
{{paper-icon icon="brightness-4"}}
<p>Brightness</p>
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Brightness level of the selected lights">Brightness</p>
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
{{/paper-item}}
{{#paper-item action=colorRowAction class="colorRow"}}
{{paper-icon icon="color-lens"}}
<p>Color</p>
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Color of the selected lights">Color</p>
{{/paper-item}}
<div class="relative">
@ -30,13 +30,13 @@
{{#paper-item}}
{{paper-icon icon="flare"}}
<p>Strobe</p>
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" 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"}} {{paper-icon icon="loop" id="loopAddition"}}
<p>Colorloop</p>
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" 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}}
{{/paper-list}}

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

@ -43,7 +43,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
if(result.streamable === true){
result.tracks.forEach(processResult);
} else {
failedSongs.push(result.title)
failedSongs.push(result.title);
}
}
},
@ -146,10 +146,15 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
if(scrollToSong){
var playListArea = Em.$('#playListArea');
// this is just a bad workaround to make sure that the track has been rendered to the playlist
Em.run.later(()=>{
playListArea.animate({
scrollTop: Em.$('.track'+index).offset().top - playListArea.offset().top + playListArea.scrollTop()
});
var track = Em.$('.track'+index);
if(!Em.isNone(track)) {
playListArea.animate({
scrollTop: track.offset().top - playListArea.offset().top + playListArea.scrollTop()
});
}
}, 1000);
}
}
@ -229,7 +234,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
this.get('beatHistory').clear();
if(repeat === 2){ // repeating one song takes precedence over shuffling
nextSong = playQueuePointer;
if(playQueuePointer === -1 && playQueueLength > 0) {
nextSong = 0;
} else {
nextSong = playQueuePointer;
}
} else if(shuffle){
var shufflePlayed = this.get('shufflePlayed');

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

@ -23,8 +23,7 @@
{{/if}}
<span class="pull-right">
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
</span>
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span>
</span>

84
app/styles/app.scss
View file

@ -9,6 +9,7 @@ $playerDefaultIconColor: #BBBBBB;
$footerHeight: 40px;
$playerBottomHeight: 340px;
$secondaryThemeColor: #F12B24;
$glowingText: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
// BRIDGE FINDER
html {
@ -22,6 +23,12 @@ body {
position: static;
}
body.dimmerOn {
.navigationItem {
text-shadow: $glowingText;
}
}
// temporary HAX...not working in FF
md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
transform: none !important;
@ -44,6 +51,9 @@ md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
.settingsItem {
margin-left: 15px;
position: relative;
display: inline-block;
transition: 0.1s all ease-in-out;
cursor: pointer;
}
md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-slider[disabled=disabled] {
@ -75,9 +85,14 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
background: darken(white, 20%);
}
.settingsItem:hover md-icon.group,
.settingsItem:hover md-icon.settings {
color: black !important;
.settingsItem span:hover {
text-decoration: underline;
md-icon.group {
color: black !important;
}
md-icon.settings {
color: black !important;
}
}
.ember-app {
@ -90,10 +105,8 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
bottom: 0;
width: 100%;
height: $footerHeight;
z-index: -1;
p {
padding-left: 0;
margin-top: 10px;
text-align: center;
}
}
@ -149,9 +162,11 @@ md-progress-linear {
background: white;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
width: 210px;
left: -182px;
top: 25px;
left: -172px;
top: 44px;
padding: 0;
border: none;
color: black;
}
.bootstrapTooltip md-icon {
@ -168,6 +183,14 @@ md-list-item .md-no-style {
padding: 0;
}
.lightsTab * .tooltip {
left: -20px !important;
}
.colorRow * .tooltip {
left: -7px !important;
}
#hueControls {
max-width: 1200px;
position: relative;
@ -242,13 +265,15 @@ md-slider.md-default-theme .md-thumb:after {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px;
width: 300px;
top: 20px;
left: -269px;
top: 40px;
left: -245px;
position: absolute;
background-color: white;
max-height: 400px;
overflow: auto;
text-align: left;
padding: 0;
color: black;
}
.lightGroup {
@ -262,8 +287,6 @@ md-slider.md-default-theme .md-thumb:after {
}
}
.hueLight {}
.lightInactive {
cursor: pointer;
position: relative;
@ -317,14 +340,9 @@ md-icon {
}
.addButton {
.group-add {
color: $secondaryThemeColor;
margin-right: 15px;
font-size: 28px;
}
.group-add:hover {
color: darken(#333333, 5%) !important;
}
width: 100%;
cursor: pointer;
margin-left: 10px;
}
.removeButton {
@ -360,6 +378,7 @@ md-toolbar {
}
.groupSelect {
cursor: pointer;
padding: 10px 0 10px 10px;
width: 70%;
font-family: 'Open Sans', sans-serif;
@ -975,16 +994,35 @@ body.dimmerOn {
background: #242424;
}
md-icon.dimmerOn {
body.dimmerOn #bridgeInput label,
.group.dimmerOn,
.settings.dimmerOn,
.power-settings-new.dimmerOn,
.brightness-4.dimmerOn,
.color-lens.dimmerOn,
.flare.dimmerOn,
.loop.dimmerOn,
.library-music.dimmerOn {
color: inherit !important;
text-shadow: $glowingText;
opacity: 1 !important;
}
body.dimmerOn {
.md-track, .color {
background: white !important;
}
}
.dimmerWrapper {
font-size: 40px;
position: relative;
top: 7px;
margin-right: 20px;
position: absolute;
left: -50px;
bottom: -16px;
cursor: pointer;
i.active {
text-shadow: $glowingText;
}
}
.noUi-value-vertical {