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

use the bootstrap dropdown library instead of trying to put it together myself

Browse source
This commit is contained in:
Egor Philippov 2015-10-09 13:42:52 -07:00
parent c19419da2b
commit 4c1a091f70
5 changed files with 25 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/pods/components/groups-list/component.js
View file

@ -1,8 +1,8 @@
import Em from 'ember';
export default Em.Component.extend({
classNameBindings: ['groupControlDisplayed:on'],
elementId: 'groupControls',
classNames: ['dropdown-menu'],
elementId: 'groupList',
tagName: null,

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

@ -13,8 +13,6 @@ export default Em.Component.extend({
lightsData: null,
activeLights: [],
groupControlDisplayed: false,
appSettingsDisplayed: false,
actions: {
changeTab(tabName){
@ -22,21 +20,11 @@ export default Em.Component.extend({
this.set('selectedTab', index);
localStorage.setItem('huegasm.selectedTab', index);
},
toggleGroupControl(){
this.toggleProperty('groupControlDisplayed');
},
toggleAppSettings(){
this.toggleProperty('appSettingsDisplayed');
},
clearBridge() {
delete localStorage['huegasm.bridgeUsername'];
delete localStorage['huegasm.bridgeIp'];
location.reload();
},
clearAllSettings() {
localStorage.clear();
location.reload();
@ -62,17 +50,6 @@ export default Em.Component.extend({
});
observer.observe(Em.$('#hueControls')[0], {childList: true, subtree: true});
// automatically close the group menu when the user clicks somewhere else
Em.$(document).click(function() {
if(self.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls, #modal-overlays, .ember-modal-overlay').length) {
self.toggleProperty('groupControlDisplayed');
}
if(self.get('appSettingsDisplayed') && !event.target.classList.contains('settings') && !Em.$(event.target).closest('#appSetting').length) {
self.toggleProperty('appSettingsDisplayed');
}
});
},
init() {

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

@ -7,21 +7,27 @@
</div>
<div id="settings" class="col-xs-3">
<span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
<span id="groupMenu" 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>
</span>
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
</span>
<span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>
<span id="appSettingsMenu" 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>
</span>
{{#if appSettingsDisplayed}}
<div id="appSettings">
<div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
<div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
</div>
{{/if}}
<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>

20
app/styles/app.scss
View file

@ -65,11 +65,6 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
background: darken(white, 20%);
}
.settingsItem.on md-icon.md-default-theme.group,
.settingsItem.on md-icon.md-default-theme.settings {
color: $secondaryThemeColor !important;
}
.settingsItem:hover md-icon.group,
.settingsItem:hover md-icon.settings {
color: black !important;
@ -142,9 +137,11 @@ md-progress-linear {
#appSettings {
position: absolute;
background: white;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
width: 200px;
right: 0;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
width: 210px;
left: -182px;
top: 25px;
padding: 0;
}
.bootstrapTooltip md-icon {
@ -230,8 +227,7 @@ md-slider.md-default-theme .md-thumb:after {
overflow: visible;
}
#groupControls {
display: none;
#groupList {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
border-radius: 0 0 5px 5px;
width: 300px;
@ -244,10 +240,6 @@ md-slider.md-default-theme .md-thumb:after {
text-align: left;
}
#groupControls.on {
display: block;
}
.lightGroup {
margin: 0 auto 0 auto;
.tooltip.top {

1
ember-cli-build.js
View file

@ -10,6 +10,7 @@ module.exports = function(defaults) {
app.import('vendor/dancer.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
app.import('bower_components/three.js/three.js');