diff --git a/css/dashboard.css b/css/dashboard.css index 6a61e10..d0877fc 100644 --- a/css/dashboard.css +++ b/css/dashboard.css @@ -593,6 +593,6 @@ input[type=radio] { .icon.f16:before { font-size: 16px; } .icon.f24:before { font-size: 24px; } -.icon.f36:before { font-size: 36px; } +.icon.f32:before { font-size: 32px; } .icon.f48:before { font-size: 48px; } .icon.f64:before { font-size: 64px; } diff --git a/js/beestat/floor_plan.js b/js/beestat/floor_plan.js new file mode 100644 index 0000000..bf533d7 --- /dev/null +++ b/js/beestat/floor_plan.js @@ -0,0 +1,59 @@ +beestat.floor_plan = {}; + +/** + * Get the area of an entire floor plan. + * + * @param {number} floor_plan_id + * + * @return {number} The area of the floor plan in sqft. + */ +beestat.floor_plan.get_area = function(floor_plan_id) { + const floor_plan = beestat.cache.floor_plan[floor_plan_id]; + let area = 0; + + floor_plan.data.groups.forEach(function(group) { + area += beestat.floor_plan.get_area_group(group, false); + }); + + return Math.round(area); +}; + +/** + * Get the area of a single floor plan group. + * + * @param {object} group The group. + * @param {boolean} round Whether or not to round the result. + * + * @return {number} Area of the group in sqft. + */ +beestat.floor_plan.get_area_group = function(group, round = true) { + let area = 0; + + group.rooms.forEach(function(room) { + area += beestat.floor_plan.get_area_room(room, false); + }); + + if (round === true) { + return Math.round(area); + } + + return area; +}; + +/** + * Get the area of a single floor plan room. + * + * @param {object} room The room. + * @param {boolean} round Whether or not to round the result. + * + * @return {number} Area of the room in sqft. + */ +beestat.floor_plan.get_area_room = function(room, round = true) { + let area = Math.abs(ClipperLib.Clipper.Area(room.points) / 144); + + if (round === true) { + return Math.round(area); + } + + return area; +}; diff --git a/js/component/alert.js b/js/component/alert.js index b9b720a..f0043ef 100644 --- a/js/component/alert.js +++ b/js/component/alert.js @@ -241,7 +241,7 @@ beestat.component.alert.prototype.decorate_detail_ = function(parent) { }); button_container.appendChild(dismiss_container); - (new beestat.component.button()) + (new beestat.component.tile()) .set_icon('bell_off') .set_text('Dismiss') .set_background_color(beestat.style.color.red.dark) @@ -278,7 +278,7 @@ beestat.component.alert.prototype.decorate_detail_ = function(parent) { }); button_container.appendChild(restore_container); - (new beestat.component.button()) + (new beestat.component.tile()) .set_icon('bell') .set_text('Restore') .set_background_color(beestat.style.color.red.dark) diff --git a/js/component/button.js b/js/component/button.js deleted file mode 100644 index e5e448f..0000000 --- a/js/component/button.js +++ /dev/null @@ -1,278 +0,0 @@ -/** - * A button-shaped component with text, an icon, and a background color. - */ -beestat.component.button = function() { - beestat.component.apply(this, arguments); -}; -beestat.extend(beestat.component.button, beestat.component); - -/** - * Decorate - * - * @param {rocket.Elements} parent - */ -beestat.component.button.prototype.decorate_ = function(parent) { - var self = this; - - var border_radius; - if (this.type_ === 'pill') { - border_radius = '32px'; - } else { - border_radius = beestat.style.size.border_radius; - } - - this.button_ = $.createElement('div') - .style({ - 'display': 'inline-block', - 'background': this.background_color_, - 'color': this.text_color_, - 'user-select': 'none', - 'border-radius': border_radius, - 'padding-top': '3px', - 'padding-bottom': '3px', - 'transition': 'color 200ms ease, background 200ms ease' - }); - parent.appendChild(this.button_); - - if (this.title_ !== undefined) { - this.button_.setAttribute('title', this.title_); - } - - if (this.icon_ !== undefined && this.text_ !== undefined) { - // Text + Icon - this.button_.style({ - 'padding-left': (beestat.style.size.gutter / 2), - 'padding-right': (beestat.style.size.gutter / 2) - }); - - (new beestat.component.icon(this.icon_)) - .set_text(this.text_) - .set_bubble_text(this.bubble_text_) - .set_bubble_color(this.bubble_color_) - .render(this.button_); - } else if (this.icon_ === undefined && this.text_ !== undefined) { - // Text only - this.button_.style({ - 'padding': '0px ' + (beestat.style.size.gutter / 2) + 'px', - 'line-height': '32px' - }); - this.button_.innerText(this.text_); - } else { - // Icon only - this.button_.style({ - 'width': '32px', - 'text-align': 'center' - }); - - (new beestat.component.icon(this.icon_)) - .set_text(this.text_) - .set_bubble_text(this.bubble_text_) - .set_bubble_color(this.bubble_color_) - .render(this.button_); - } - - if ( - this.text_hover_color_ !== undefined || - this.background_hover_color_ !== undefined - ) { - this.button_.style({'cursor': 'pointer'}); - - var mouseenter_style = {}; - if (this.text_hover_color_ !== undefined) { - mouseenter_style.color = this.text_hover_color_; - } - if (this.background_hover_color_ !== undefined) { - mouseenter_style.background = this.background_hover_color_; - } - - var mouseleave_style = {}; - mouseleave_style.color = - (this.text_color_ !== undefined) ? this.text_color_ : ''; - mouseleave_style.background = - (this.background_color_ !== undefined) ? this.background_color_ : ''; - - this.button_.addEventListener('mouseenter', function() { - self.button_.style(mouseenter_style); - }); - this.button_.addEventListener('mouseleave', function() { - self.button_.style(mouseleave_style); - }); - } - - this.button_.addEventListener('click', function() { - self.dispatchEvent('click'); - }); - - this.button_.addEventListener('mousedown', function() { - self.dispatchEvent('mousedown'); - }); -}; - -/** - * Set the text. - * - * @param {string} text - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_text = function(text) { - this.text_ = text; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the icon. - * - * @param {string} icon - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_icon = function(icon) { - this.icon_ = icon; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the background color. - * - * @param {string} background_color - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_background_color = function(background_color) { - this.background_color_ = background_color; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the text color. - * - * @param {string} text_color - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_text_color = function(text_color) { - this.text_color_ = text_color; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the background hover color. - * - * @param {string} background_hover_color - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_background_hover_color = function(background_hover_color) { - this.background_hover_color_ = background_hover_color; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the text hover color. - * - * @param {string} text_hover_color - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_text_hover_color = function(text_hover_color) { - this.text_hover_color_ = text_hover_color; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the type. - * - * @param {string} type Valid value is "pill" for now. - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_type = function(type) { - this.type_ = type; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the text of the bubble. - * - * @param {string} bubble_text - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_bubble_text = function(bubble_text) { - this.bubble_text_ = bubble_text; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the color of the bubble. - * - * @param {string} bubble_color - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_bubble_color = function(bubble_color) { - this.bubble_color_ = bubble_color; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Set the title for the button. - * - * @param {string} title - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.set_title = function(title) { - this.title_ = title; - if (this.rendered_ === true) { - this.rerender(); - } - return this; -}; - -/** - * Do the normal event listener stuff. - * - * @return {beestat.component.button} This. - */ -beestat.component.button.prototype.addEventListener = function() { - rocket.EventTarget.prototype.addEventListener.apply(this, arguments); - return this; -}; - -/** - * Get the bounding box for the button. - * - * @return {array} The bounding box. - */ -beestat.component.button.prototype.getBoundingClientRect = function() { - return this.button_.getBoundingClientRect(); -}; diff --git a/js/component/card/air_quality_not_supported.js b/js/component/card/air_quality_not_supported.js index 2b7531d..b12b4d8 100644 --- a/js/component/card/air_quality_not_supported.js +++ b/js/component/card/air_quality_not_supported.js @@ -15,7 +15,7 @@ beestat.component.card.air_quality_not_supported.prototype.decorate_contents_ = parent.style('background', beestat.style.color.blue.light); parent.appendChild($.createElement('p').innerText('Access to Air Quality information requires a compatible thermostat. Support beestat by buying through this affiliate link.')); - new beestat.component.button() + new beestat.component.tile() .set_icon('open_in_new') .set_text('Buy an ecobee Smart Thermostat Premium on Amazon') .set_background_color(beestat.style.color.green.dark) diff --git a/js/component/card/comparison_settings.js b/js/component/card/comparison_settings.js index e70ca37..4b698c0 100644 --- a/js/component/card/comparison_settings.js +++ b/js/component/card/comparison_settings.js @@ -151,9 +151,9 @@ beestat.component.card.comparison_settings.prototype.decorate_region_ = function var color = beestat.style.color.green.base; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); regions.forEach(function(region) { - var button = new beestat.component.button() + var button = new beestat.component.tile() .set_background_hover_color(color) .set_text_color('#fff') .set_text(region.charAt(0).toUpperCase() + region.slice(1)); @@ -233,9 +233,9 @@ beestat.component.card.comparison_settings.prototype.decorate_property_ = functi var color = beestat.style.color.purple.base; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); property_types.forEach(function(property_type) { - var button = new beestat.component.button() + var button = new beestat.component.tile() .set_background_hover_color(color) .set_text_color('#fff') .set_text(property_type.text); diff --git a/js/component/card/floor_plan_editor.js b/js/component/card/floor_plan_editor.js index 0f0d59e..313207b 100644 --- a/js/component/card/floor_plan_editor.js +++ b/js/component/card/floor_plan_editor.js @@ -53,7 +53,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_contents_ = function parent.appendChild(center_container); center_container.appendChild($.createElement('p').innerText('You haven\'t created any floor plans yet.')); - const get_started_button = new beestat.component.button() + const get_started_button = new beestat.component.tile() .set_icon('home_plus') .set_text('Get Started') .set_background_color(beestat.style.color.green.dark) diff --git a/js/component/card/my_home.js b/js/component/card/my_home.js index 64d204b..b18b61a 100644 --- a/js/component/card/my_home.js +++ b/js/component/card/my_home.js @@ -56,20 +56,20 @@ beestat.component.card.my_home.prototype.decorate_system_type_ = function(parent ); const cool_stages_string = cool_stages > 1 ? ' (2 Stage)' : ''; - var button_group = new beestat.component.button_group(); - button_group.add_button(new beestat.component.button() + var button_group = new beestat.component.tile_group(); + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.series.compressor_heat_1.color) .set_text_color('#fff') .set_icon('fire') .set_text(heat.charAt(0).toUpperCase() + heat.slice(1) + heat_stages_string)); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.series.auxiliary_heat_1.color) .set_text_color('#fff') .set_icon('fire') .set_text(auxiliary_heat.charAt(0).toUpperCase() + auxiliary_heat.slice(1))); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.series.compressor_cool_1.color) .set_text_color('#fff') @@ -109,9 +109,9 @@ beestat.component.card.my_home.prototype.decorate_region_ = function(parent) { region = null; } - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); if (region !== null) { - var button = new beestat.component.button() + var button = new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.green.base) .set_text_color('#fff') @@ -119,7 +119,7 @@ beestat.component.card.my_home.prototype.decorate_region_ = function(parent) { .set_text(region); button_group.add_button(button); } else { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.gray.dark) .set_text_color('#fff') @@ -139,10 +139,10 @@ beestat.component.card.my_home.prototype.decorate_property_ = function(parent) { (new beestat.component.title('Property')).render(parent); - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); if (thermostat.property.structure_type !== null) { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.purple.base) .set_text_color('#fff') @@ -159,7 +159,7 @@ beestat.component.card.my_home.prototype.decorate_property_ = function(parent) { thermostat.property.structure_type === 'semi-detached' ) ) { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.purple.base) .set_text_color('#fff') @@ -169,7 +169,7 @@ beestat.component.card.my_home.prototype.decorate_property_ = function(parent) { } if (thermostat.property.square_feet !== null) { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.purple.base) .set_text_color('#fff') @@ -178,7 +178,7 @@ beestat.component.card.my_home.prototype.decorate_property_ = function(parent) { } if (thermostat.property.age !== null) { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.purple.base) .set_text_color('#fff') @@ -187,7 +187,7 @@ beestat.component.card.my_home.prototype.decorate_property_ = function(parent) { } if (button_group.get_buttons().length === 0) { - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_type('pill') .set_background_color(beestat.style.color.gray.dark) .set_text_color('#fff') diff --git a/js/component/card/patreon.js b/js/component/card/patreon.js index 163d6a2..a127912 100644 --- a/js/component/card/patreon.js +++ b/js/component/card/patreon.js @@ -28,9 +28,13 @@ beestat.component.card.patreon.prototype.decorate_contents_ = function(parent) { parent.style('background', beestat.style.color.green.base); - new beestat.component.button() + new beestat.component.tile() .set_icon('heart') - .set_text('Support this project on Patreon!') + .set_size('large') + .set_text([ + 'Support this project on Patreon!', + 'Your contribution matters' + ]) .set_background_color(beestat.style.color.green.dark) .set_background_hover_color(beestat.style.color.green.light) .addEventListener('click', function() { @@ -54,7 +58,7 @@ beestat.component.card.patreon.prototype.get_title_ = function() { * @param {rocket.Elements} parent */ beestat.component.card.patreon.prototype.decorate_top_right_ = function(parent) { - new beestat.component.button() + new beestat.component.tile() .set_type('pill') .set_icon('close') .set_text_color('#fff') diff --git a/js/component/floor_plan.js b/js/component/floor_plan.js index 2b02b91..a2c3168 100644 --- a/js/component/floor_plan.js +++ b/js/component/floor_plan.js @@ -351,16 +351,16 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { this.button_group_floors_.dispose(); } - this.button_group_ = new beestat.component.button_group(); + this.button_group_ = new beestat.component.tile_group(); // Add floor - this.button_group_.add_button(new beestat.component.button() + this.button_group_.add_button(new beestat.component.tile() .set_icon('layers') .set_text_color(beestat.style.color.lightblue.base) ); // Add room - this.button_group_.add_button(new beestat.component.button() + this.button_group_.add_button(new beestat.component.tile() .set_icon('card_plus_outline') .set_title('Add Room [R]') .set_text_color(beestat.style.color.gray.light) @@ -370,7 +370,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { ); // Remove room - const remove_room_button = new beestat.component.button() + const remove_room_button = new beestat.component.tile() .set_icon('card_remove_outline') .set_title('Remove Room [Delete]') .set_background_color(beestat.style.color.bluegray.base); @@ -387,7 +387,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { } // Add point - const add_point_button = new beestat.component.button() + const add_point_button = new beestat.component.tile() .set_icon('vector_square_plus') .set_title('Add Point [Double click]') .set_background_color(beestat.style.color.bluegray.base); @@ -404,7 +404,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { } // Remove point - const remove_point_button = new beestat.component.button() + const remove_point_button = new beestat.component.tile() .set_background_color(beestat.style.color.bluegray.base) .set_title('Remove Point [Delete]') .set_icon('vector_square_remove'); @@ -434,7 +434,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { snapping_title = 'Enable Snapping [S]'; } - this.button_group_.add_button(new beestat.component.button() + this.button_group_.add_button(new beestat.component.tile() .set_icon(snapping_icon) .set_title(snapping_title) .set_text_color(beestat.style.color.gray.light) @@ -444,7 +444,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { ); // Zoom in - const zoom_in_button = new beestat.component.button() + const zoom_in_button = new beestat.component.tile() .set_icon('magnify_plus_outline') .set_title('Zoom In') .set_background_color(beestat.style.color.bluegray.base); @@ -465,7 +465,7 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { } // Zoom out - const zoom_out_button = new beestat.component.button() + const zoom_out_button = new beestat.component.tile() .set_icon('magnify_minus_outline') .set_title('Zoom out') .set_background_color(beestat.style.color.bluegray.base); @@ -489,11 +489,11 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { this.button_group_.render(this.toolbar_container_); // FLOORS - this.button_group_floors_ = new beestat.component.button_group(); + this.button_group_floors_ = new beestat.component.tile_group(); const floor_plan = beestat.cache.floor_plan[this.floor_plan_id_]; floor_plan.data.groups.forEach(function(group) { - const button = new beestat.component.button() + const button = new beestat.component.tile() .set_title(group.name) .set_text_hover_color(beestat.style.color.lightblue.light) .set_text_color(beestat.style.color.lightblue.base); @@ -534,20 +534,15 @@ beestat.component.floor_plan.prototype.update_infobox = function() { if (this.state_.active_room !== undefined) { parts.push(this.state_.active_room.name || 'Unnamed Room'); parts.push( - Math.abs( - Math.round( - ClipperLib.Clipper.Area(this.state_.active_room.points) / 144 - ) - ).toLocaleString() + ' sqft' + beestat.floor_plan.get_area_room(this.state_.active_room) + .toLocaleString() + ' sqft' ); } else { parts.push(this.state_.active_group.name || 'Unnamed Floor'); - let area = 0; - this.state_.active_group.rooms.forEach(function(room) { - area += Math.abs(ClipperLib.Clipper.Area(room.points)); - }); - - parts.push(Math.round(area / 144).toLocaleString() + ' sqft'); + parts.push( + beestat.floor_plan.get_area_group(this.state_.active_group) + .toLocaleString() + ' sqft' + ); } this.infobox_container_.innerText(parts.join(' • ')); }; diff --git a/js/component/header.js b/js/component/header.js index cc6d993..8096f6d 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -90,9 +90,9 @@ beestat.component.header.prototype.decorate_ = function(parent) { }); row.appendChild(column_navigation); - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); pages.forEach(function(page) { - var button = new beestat.component.button() + var button = new beestat.component.tile() .set_icon(page.icon) .set_text_color(beestat.style.color.bluegray.dark); diff --git a/js/component/menu.js b/js/component/menu.js index 644f0d8..5dc7701 100644 --- a/js/component/menu.js +++ b/js/component/menu.js @@ -11,7 +11,7 @@ beestat.component.menu.prototype.decorate_ = function(parent) { this.menu_items_ = []; - this.icon_ = new beestat.component.button() + this.icon_ = new beestat.component.tile() .set_type('pill') .set_icon('dots_vertical') .set_bubble_text(this.bubble_text_) @@ -67,14 +67,14 @@ beestat.component.menu.prototype.dispose = function() { beestat.component.menu.prototype.open_ = function() { var self = this; - var position = this.icon_.getBoundingClientRect(); + var position = this.icon_.get_container().getBoundingClientRect(); var container = $.createElement('div') .style({ 'background': '#fff', 'color': '#444', 'position': 'absolute', - 'top': position.bottom + 'px', + 'top': (position.bottom + window.scrollY) + 'px', 'right': (window.innerWidth - position.right) + 'px', 'transition': 'all 200ms ease', 'transform': 'scale(0)', diff --git a/js/component/modal.js b/js/component/modal.js index 44e1adf..7250664 100644 --- a/js/component/modal.js +++ b/js/component/modal.js @@ -203,7 +203,7 @@ beestat.component.modal.prototype.decorate_title_ = function(parent) { beestat.component.modal.prototype.decorate_close_ = function(parent) { var self = this; - var close = new beestat.component.button() + var close = new beestat.component.tile() .set_type('pill') .set_icon('close') .set_text_color(beestat.style.color.gray.dark) @@ -245,7 +245,7 @@ beestat.component.modal.prototype.decorate_buttons_ = function(parent) { }); parent.appendChild(container); - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); buttons.forEach(function(button) { button_group.add_button(button); }); diff --git a/js/component/modal/air_quality_detail_custom.js b/js/component/modal/air_quality_detail_custom.js index 18301fc..f86af9c 100644 --- a/js/component/modal/air_quality_detail_custom.js +++ b/js/component/modal/air_quality_detail_custom.js @@ -43,9 +43,9 @@ beestat.component.modal.air_quality_detail_custom.prototype.decorate_contents_ = beestat.component.modal.air_quality_detail_custom.prototype.decorate_range_type_ = function(parent) { var self = this; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -59,7 +59,7 @@ beestat.component.modal.air_quality_detail_custom.prototype.decorate_range_type_ self.rerender(); })); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -294,7 +294,7 @@ beestat.component.modal.air_quality_detail_custom.prototype.get_title_ = functio beestat.component.modal.air_quality_detail_custom.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -310,12 +310,12 @@ beestat.component.modal.air_quality_detail_custom.prototype.get_buttons_ = funct this.state_.error.invalid_range_end === true || this.state_.error.out_of_sync_range === true ) { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.gray.base) .set_text_color('#fff') .set_text('Save'); } else { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/change_floor_plan.js b/js/component/modal/change_floor_plan.js index b668799..b88a92b 100644 --- a/js/component/modal/change_floor_plan.js +++ b/js/component/modal/change_floor_plan.js @@ -6,112 +6,55 @@ beestat.component.modal.change_floor_plan = function() { }; beestat.extend(beestat.component.modal.change_floor_plan, beestat.component.modal); +/** + * Decorate + * + * @param {rocket.Elements} parent + */ beestat.component.modal.change_floor_plan.prototype.decorate_contents_ = function(parent) { - var self = this; + const self = this; - var container = $.createElement('div') - .style({ - 'display': 'grid', - 'grid-template-columns': 'repeat(auto-fill, minmax(200px, 1fr))', - 'margin': '0 0 16px -16px' - }); - parent.appendChild(container); + const p = document.createElement('p'); + p.innerText = 'You have multiple floor plans; which one would you like to view?'; + parent.appendChild(p); + + const grid = document.createElement('div'); + grid.style.display = 'grid'; + grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))'; + grid.style.columnGap = beestat.style.size.gutter + 'px'; + grid.style.rowGap = beestat.style.size.gutter + 'px'; + parent.appendChild(grid); var sorted_floor_plans = $.values(beestat.cache.floor_plan) .sort(function(a, b) { return a.name > b.name; }); + let div; sorted_floor_plans.forEach(function(floor_plan) { - var div = $.createElement('div') - .style({ - 'padding': '16px 0 0 16px' - }); - container.appendChild(div); + div = document.createElement('div'); + grid.appendChild(div); - self.decorate_floor_plan_(div, floor_plan.floor_plan_id); + const tile = new beestat.component.tile.floor_plan(floor_plan.floor_plan_id) + .set_text_color('#fff') + .set_display('block'); + + if (floor_plan.floor_plan_id === beestat.setting('floor_plan_id')) { + tile.set_background_color(beestat.style.color.lightblue.base); + } else { + tile + .set_background_color(beestat.style.color.bluegray.base) + .set_background_hover_color(beestat.style.color.lightblue.base) + .addEventListener('click', function() { + beestat.setting('floor_plan_id', floor_plan.floor_plan_id); + self.dispose(); + }); + } + + tile.render($(div)); }); }; -/** - * Decorate the floor plan. - * - * @param {rocket.Elements} parent - * @param {number} floor_plan_id - */ -beestat.component.modal.change_floor_plan.prototype.decorate_floor_plan_ = function(parent, floor_plan_id) { - const self = this; - - var floor_plan = beestat.cache.floor_plan[floor_plan_id]; - - var container_height = 60; - var gutter = beestat.style.size.gutter / 2; - var floor_plan_height = container_height - (gutter * 2); - - var container = $.createElement('div') - .style({ - 'height': container_height, - 'border-radius': container_height, - 'padding-right': (beestat.style.size.gutter / 2), - 'transition': 'background 200ms ease', - 'user-select': 'none' - }); - - if (floor_plan_id == beestat.cache.floor_plan[beestat.setting('floor_plan_id')].floor_plan_id) { - container.style({ - 'background': '#4b6584', - 'color': '#fff' - }); - } else { - container.style({ - 'cursor': 'pointer' - }); - - container - .addEventListener('mouseover', function() { - container.style('background', beestat.style.color.gray.base); - }) - .addEventListener('mouseout', function() { - container.style('background', ''); - }) - .addEventListener('click', function() { - container.removeEventListener(); - self.dispose(); - beestat.setting('floor_plan_id', floor_plan_id); - }); - } - - parent.appendChild(container); - - var left = $.createElement('div') - .style({ - 'background': beestat.style.color.bluegray.dark, - 'font-weight': beestat.style.font_weight.light, - 'border-radius': '50%', - 'width': floor_plan_height, - 'height': floor_plan_height, - 'line-height': floor_plan_height, - 'color': '#fff', - 'font-size': '20px', - 'text-align': 'center', - 'float': 'left', - 'margin': gutter - }) - .innerHTML(''); - container.appendChild(left); - - var right = $.createElement('div') - .style({ - 'line-height': container_height, - 'font-weight': beestat.style.font_weight.bold, - 'white-space': 'nowrap', - 'overflow': 'hidden', - 'text-overflow': 'ellipsis' - }) - .innerHTML(floor_plan.name); - container.appendChild(right); -}; - /** * Get title. * @@ -120,3 +63,4 @@ beestat.component.modal.change_floor_plan.prototype.decorate_floor_plan_ = funct beestat.component.modal.change_floor_plan.prototype.get_title_ = function() { return 'Change Floor Plan'; }; + diff --git a/js/component/modal/change_system_type.js b/js/component/modal/change_system_type.js index 8566291..e32cd79 100644 --- a/js/component/modal/change_system_type.js +++ b/js/component/modal/change_system_type.js @@ -62,14 +62,14 @@ beestat.component.modal.change_system_type.prototype.decorate_contents_ = functi key ); - let button_group = new beestat.component.button_group(); + let button_group = new beestat.component.tile_group(); options[key].forEach(function(system_type) { let text = system_type.charAt(0).toUpperCase() + system_type.slice(1); if (thermostat.system_type.detected[key].equipment === system_type) { text += ' [Detected]'; } - let button = new beestat.component.button() + let button = new beestat.component.tile() .set_background_hover_color(colors[key]) .set_text_color('#fff') .set_text(text) @@ -113,7 +113,7 @@ beestat.component.modal.change_system_type.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -122,7 +122,7 @@ beestat.component.modal.change_system_type.prototype.get_buttons_ = function() { self.dispose(); }); - var save = new beestat.component.button() + var save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/change_thermostat.js b/js/component/modal/change_thermostat.js index 34d968d..02ea7f0 100644 --- a/js/component/modal/change_thermostat.js +++ b/js/component/modal/change_thermostat.js @@ -6,110 +6,59 @@ beestat.component.modal.change_thermostat = function() { }; beestat.extend(beestat.component.modal.change_thermostat, beestat.component.modal); +/** + * Decorate + * + * @param {rocket.Elements} parent + */ beestat.component.modal.change_thermostat.prototype.decorate_contents_ = function(parent) { - var self = this; + const p = document.createElement('p'); + p.innerText = 'You have multiple thermostats; which one would you like to view?'; + parent.appendChild(p); - var container = $.createElement('div') - .style({ - 'display': 'grid', - 'grid-template-columns': 'repeat(auto-fill, minmax(200px, 1fr))', - 'margin': '0 0 16px -16px' - }); - parent.appendChild(container); + const grid = document.createElement('div'); + grid.style.display = 'grid'; + grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))'; + grid.style.columnGap = beestat.style.size.gutter + 'px'; + grid.style.rowGap = beestat.style.size.gutter + 'px'; + parent.appendChild(grid); var sorted_thermostats = $.values(beestat.cache.thermostat) .sort(function(a, b) { return a.name > b.name; }); + let div; sorted_thermostats.forEach(function(thermostat) { - var div = $.createElement('div') - .style({ - 'padding': '16px 0 0 16px' - }); - container.appendChild(div); + div = document.createElement('div'); + grid.appendChild(div); - self.decorate_thermostat_(div, thermostat.thermostat_id); - }); -}; + const tile = new beestat.component.tile.thermostat(thermostat.thermostat_id) + .set_text_color('#fff') + .set_display('block'); -beestat.component.modal.change_thermostat.prototype.decorate_thermostat_ = function(parent, thermostat_id) { - var thermostat = beestat.cache.thermostat[thermostat_id]; - - var container_height = 60; - var gutter = beestat.style.size.gutter / 2; - var thermostat_height = container_height - (gutter * 2); - - var container = $.createElement('div') - .style({ - 'height': container_height, - 'border-radius': container_height, - 'padding-right': (beestat.style.size.gutter / 2), - 'transition': 'background 200ms ease', - 'user-select': 'none' - }); - - if (thermostat_id == beestat.cache.thermostat[beestat.setting('thermostat_id')].thermostat_id) { - container.style({ - 'background': '#4b6584', - 'color': '#fff' - }); - } else { - container.style({ - 'cursor': 'pointer' - }); - - container - .addEventListener('mouseover', function() { - container.style('background', beestat.style.color.gray.base); - }) - .addEventListener('mouseout', function() { - container.style('background', ''); - }) - .addEventListener('click', function() { - container.removeEventListener(); - beestat.setting('thermostat_id', thermostat_id, function() { - window.location.reload(); + if (thermostat.thermostat_id === beestat.setting('thermostat_id')) { + tile.set_background_color(beestat.style.color.lightblue.base); + } else { + tile + .set_background_color(beestat.style.color.bluegray.base) + .set_background_hover_color(beestat.style.color.lightblue.base) + .addEventListener('click', function() { + beestat.setting('thermostat_id', thermostat.thermostat_id, function() { + window.location.reload(); + }); }); - }); - } + } - parent.appendChild(container); - - var temperature = beestat.temperature({ - 'temperature': thermostat.temperature, - 'round': 0 + tile.render($(div)); }); - - var left = $.createElement('div') - .style({ - 'background': beestat.thermostat.get_color(thermostat_id), - 'font-weight': beestat.style.font_weight.light, - 'border-radius': '50%', - 'width': thermostat_height, - 'height': thermostat_height, - 'line-height': thermostat_height, - 'color': '#fff', - 'font-size': '20px', - 'text-align': 'center', - 'float': 'left', - 'margin': gutter - }) - .innerHTML(temperature); - container.appendChild(left); - - var right = $.createElement('div') - .style({ - 'line-height': container_height, - 'font-weight': beestat.style.font_weight.bold, - 'white-space': 'nowrap', - 'overflow': 'hidden', - 'text-overflow': 'ellipsis' - }) - .innerHTML(thermostat.name); - container.appendChild(right); }; +/** + * Get title. + * + * @return {string} Title. + */ beestat.component.modal.change_thermostat.prototype.get_title_ = function() { return 'Change Thermostat'; }; diff --git a/js/component/modal/create_floor_plan.js b/js/component/modal/create_floor_plan.js index fb5a82e..8b33e45 100644 --- a/js/component/modal/create_floor_plan.js +++ b/js/component/modal/create_floor_plan.js @@ -185,7 +185,7 @@ beestat.component.modal.create_floor_plan.prototype.get_title_ = function() { beestat.component.modal.create_floor_plan.prototype.get_buttons_ = function() { const self = this; - const cancel = new beestat.component.button() + const cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -194,7 +194,7 @@ beestat.component.modal.create_floor_plan.prototype.get_buttons_ = function() { self.dispose(); }); - const save = new beestat.component.button() + const save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/delete_floor_plan.js b/js/component/modal/delete_floor_plan.js index bb5ebcb..5a673f8 100644 --- a/js/component/modal/delete_floor_plan.js +++ b/js/component/modal/delete_floor_plan.js @@ -50,7 +50,7 @@ beestat.component.modal.delete_floor_plan.prototype.get_title_ = function() { beestat.component.modal.delete_floor_plan.prototype.get_buttons_ = function() { const self = this; - const cancel_button = new beestat.component.button() + const cancel_button = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -59,7 +59,7 @@ beestat.component.modal.delete_floor_plan.prototype.get_buttons_ = function() { self.dispose(); }); - const delete_button = new beestat.component.button() + const delete_button = new beestat.component.tile() .set_background_color(beestat.style.color.red.base) .set_background_hover_color(beestat.style.color.red.light) .set_text_color('#fff') diff --git a/js/component/modal/download_data.js b/js/component/modal/download_data.js index 5c01c50..ecfccf2 100644 --- a/js/component/modal/download_data.js +++ b/js/component/modal/download_data.js @@ -121,19 +121,19 @@ beestat.component.modal.download_data.prototype.decorate_presets_ = function(par 'label': 'Today', 'range_begin': now.clone(), 'range_end': now.clone(), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'Yesterday', 'range_begin': now.clone().subtract(1, 'day'), 'range_end': now.clone().subtract(1, 'day'), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'This Week', 'range_begin': now.clone().startOf('week'), 'range_end': now.clone(), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'Last Week', @@ -143,13 +143,13 @@ beestat.component.modal.download_data.prototype.decorate_presets_ = function(par 'range_end': now.clone() .subtract(1, 'week') .endOf('week'), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'This Month', 'range_begin': now.clone().startOf('month'), 'range_end': now.clone(), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'Last Month', @@ -159,17 +159,17 @@ beestat.component.modal.download_data.prototype.decorate_presets_ = function(par 'range_end': now.clone() .subtract(1, 'month') .endOf('month'), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() }, { 'label': 'All Time', 'range_begin': moment.max(moment(thermostat.data_begin), now.clone().subtract(1, 'year')), 'range_end': now.clone(), - 'button': new beestat.component.button() + 'button': new beestat.component.tile() } ]; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); presets.forEach(function(preset) { preset.button .set_background_color(beestat.style.color.bluegray.base) @@ -242,7 +242,7 @@ beestat.component.modal.download_data.prototype.get_title_ = function() { beestat.component.modal.download_data.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -251,7 +251,7 @@ beestat.component.modal.download_data.prototype.get_buttons_ = function() { self.dispose(); }); - var save = new beestat.component.button() + var save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/enjoy_beestat.js b/js/component/modal/enjoy_beestat.js index e7c87c4..4925a65 100644 --- a/js/component/modal/enjoy_beestat.js +++ b/js/component/modal/enjoy_beestat.js @@ -55,7 +55,7 @@ beestat.component.modal.enjoy_beestat.prototype.hide_patreon_card_for_ = functio beestat.component.modal.enjoy_beestat.prototype.get_buttons_ = function() { var self = this; - var hide = new beestat.component.button() + var hide = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.bluegray.base) @@ -66,7 +66,7 @@ beestat.component.modal.enjoy_beestat.prototype.get_buttons_ = function() { }); if (beestat.user.patreon_is_connected() === false) { - var link = new beestat.component.button() + var link = new beestat.component.tile() .set_text('Link Patreon') .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) @@ -83,7 +83,7 @@ beestat.component.modal.enjoy_beestat.prototype.get_buttons_ = function() { ]; } - var ok = new beestat.component.button() + var ok = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/newsletter.js b/js/component/modal/newsletter.js index 7bad0f7..10c8fb0 100644 --- a/js/component/modal/newsletter.js +++ b/js/component/modal/newsletter.js @@ -61,7 +61,7 @@ beestat.component.modal.newsletter.prototype.get_buttons_ = function() { let buttons = []; if (this.subscribed_ === true) { - const ok = new beestat.component.button() + const ok = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') @@ -71,7 +71,7 @@ beestat.component.modal.newsletter.prototype.get_buttons_ = function() { }); buttons.push(ok); } else { - const no_thanks = new beestat.component.button() + const no_thanks = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -81,7 +81,7 @@ beestat.component.modal.newsletter.prototype.get_buttons_ = function() { }); buttons.push(no_thanks); - const subscribe = new beestat.component.button() + const subscribe = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/patreon_status.js b/js/component/modal/patreon_status.js index c76022c..f23028b 100644 --- a/js/component/modal/patreon_status.js +++ b/js/component/modal/patreon_status.js @@ -199,7 +199,7 @@ beestat.component.modal.patreon_status.prototype.get_title_ = function() { */ beestat.component.modal.patreon_status.prototype.get_buttons_ = function() { if (beestat.user.patreon_is_connected() === true) { - var refresh = new beestat.component.button() + var refresh = new beestat.component.tile() .set_text('Refresh Status') .set_icon('refresh') .set_background_color(beestat.style.color.green.base) diff --git a/js/component/modal/runtime_sensor_detail_custom.js b/js/component/modal/runtime_sensor_detail_custom.js index 757e4b0..ca3da0d 100644 --- a/js/component/modal/runtime_sensor_detail_custom.js +++ b/js/component/modal/runtime_sensor_detail_custom.js @@ -43,9 +43,9 @@ beestat.component.modal.runtime_sensor_detail_custom.prototype.decorate_contents beestat.component.modal.runtime_sensor_detail_custom.prototype.decorate_range_type_ = function(parent) { var self = this; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -59,7 +59,7 @@ beestat.component.modal.runtime_sensor_detail_custom.prototype.decorate_range_ty self.rerender(); })); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -294,7 +294,7 @@ beestat.component.modal.runtime_sensor_detail_custom.prototype.get_title_ = func beestat.component.modal.runtime_sensor_detail_custom.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -310,12 +310,12 @@ beestat.component.modal.runtime_sensor_detail_custom.prototype.get_buttons_ = fu this.state_.error.invalid_range_end === true || this.state_.error.out_of_sync_range === true ) { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.gray.base) .set_text_color('#fff') .set_text('Save'); } else { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/runtime_thermostat_detail_custom.js b/js/component/modal/runtime_thermostat_detail_custom.js index 8f45457..b59f09b 100644 --- a/js/component/modal/runtime_thermostat_detail_custom.js +++ b/js/component/modal/runtime_thermostat_detail_custom.js @@ -43,9 +43,9 @@ beestat.component.modal.runtime_thermostat_detail_custom.prototype.decorate_cont beestat.component.modal.runtime_thermostat_detail_custom.prototype.decorate_range_type_ = function(parent) { var self = this; - var button_group = new beestat.component.button_group(); + var button_group = new beestat.component.tile_group(); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -59,7 +59,7 @@ beestat.component.modal.runtime_thermostat_detail_custom.prototype.decorate_rang self.rerender(); })); - button_group.add_button(new beestat.component.button() + button_group.add_button(new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_background_color( @@ -294,7 +294,7 @@ beestat.component.modal.runtime_thermostat_detail_custom.prototype.get_title_ = beestat.component.modal.runtime_thermostat_detail_custom.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -310,12 +310,12 @@ beestat.component.modal.runtime_thermostat_detail_custom.prototype.get_buttons_ this.state_.error.invalid_range_end === true || this.state_.error.out_of_sync_range === true ) { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.gray.base) .set_text_color('#fff') .set_text('Save'); } else { - save = new beestat.component.button() + save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/modal/runtime_thermostat_summary_custom.js b/js/component/modal/runtime_thermostat_summary_custom.js index 28cbd29..af1d367 100644 --- a/js/component/modal/runtime_thermostat_summary_custom.js +++ b/js/component/modal/runtime_thermostat_summary_custom.js @@ -49,7 +49,7 @@ beestat.component.modal.runtime_thermostat_summary_custom.prototype.decorate_con for (let key in options) { let current_type = beestat.setting(key); - let button_group = new beestat.component.button_group(); + let button_group = new beestat.component.tile_group(); options[key].forEach(function(value) { let text = value.replace('runtime_thermostat_summary_', '') .charAt(0) @@ -62,7 +62,7 @@ beestat.component.modal.runtime_thermostat_summary_custom.prototype.decorate_con ) ? 's' : '' ); - let button = new beestat.component.button() + let button = new beestat.component.tile() .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') .set_text(text) @@ -148,7 +148,7 @@ beestat.component.modal.runtime_thermostat_summary_custom.prototype.get_title_ = beestat.component.modal.runtime_thermostat_summary_custom.prototype.get_buttons_ = function() { var self = this; - var cancel = new beestat.component.button() + var cancel = new beestat.component.tile() .set_background_color('#fff') .set_text_color(beestat.style.color.gray.base) .set_text_hover_color(beestat.style.color.red.base) @@ -157,7 +157,7 @@ beestat.component.modal.runtime_thermostat_summary_custom.prototype.get_buttons_ self.dispose(); }); - var save = new beestat.component.button() + var save = new beestat.component.tile() .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') diff --git a/js/component/button_group.js b/js/component/tile_group.js similarity index 71% rename from js/component/button_group.js rename to js/component/tile_group.js index 4b0105f..5a8e951 100644 --- a/js/component/button_group.js +++ b/js/component/tile_group.js @@ -1,65 +1,65 @@ -/** - * A button-shaped component with text, an icon, and a background color. - */ -beestat.component.button_group = function() { - this.buttons_ = []; - beestat.component.apply(this, arguments); -}; -beestat.extend(beestat.component.button_group, beestat.component); - -/** - * Decorate - * - * @param {rocket.Elements} parent - */ -beestat.component.button_group.prototype.decorate_ = function(parent) { - var self = this; - - // Only exists so that there can be spacing between wrapped elements. - var outer_container = $.createElement('div') - .style({ - 'margin-top': (beestat.style.size.gutter / -2) - }); - parent.appendChild(outer_container); - - this.buttons_.forEach(function(button, i) { - var container = $.createElement('div').style({ - 'display': 'inline-block', - 'margin-right': (i < self.buttons_.length) ? (beestat.style.size.gutter / 2) : 0, - 'margin-top': (beestat.style.size.gutter / 2) - }); - button.render(container); - outer_container.appendChild(container); - }); -}; - -/** - * Add a button to this group. - * - * @param {beestat.component.button} button The button to add. - */ -beestat.component.button_group.prototype.add_button = function(button) { - this.buttons_.push(button); - if (this.rendered_ === true) { - this.rerender(); - } -}; - -/** - * Get all of the buttons in this button group. - * - * @return {[beestat.component.button]} The buttons in this group. - */ -beestat.component.button_group.prototype.get_buttons = function() { - return this.buttons_; -}; - -/** - * Remove this component from the page. Disposes the buttons first. - */ -beestat.component.button_group.prototype.dispose = function() { - this.buttons_.forEach(function(button) { - button.dispose(); - }); - beestat.component.prototype.dispose.apply(this, arguments); -}; +/** + * A group of tiles. + */ +beestat.component.tile_group = function() { + this.buttons_ = []; + beestat.component.apply(this, arguments); +}; +beestat.extend(beestat.component.tile_group, beestat.component); + +/** + * Decorate + * + * @param {rocket.Elements} parent + */ +beestat.component.tile_group.prototype.decorate_ = function(parent) { + var self = this; + + // Only exists so that there can be spacing between wrapped elements. + var outer_container = $.createElement('div') + .style({ + 'margin-top': (beestat.style.size.gutter / -2) + }); + parent.appendChild(outer_container); + + this.buttons_.forEach(function(button, i) { + var container = $.createElement('div').style({ + 'display': 'inline-block', + 'margin-right': (i < self.buttons_.length) ? (beestat.style.size.gutter / 2) : 0, + 'margin-top': (beestat.style.size.gutter / 2) + }); + button.render(container); + outer_container.appendChild(container); + }); +}; + +/** + * Add a button to this group. + * + * @param {beestat.component.button} button The button to add. + */ +beestat.component.tile_group.prototype.add_button = function(button) { + this.buttons_.push(button); + if (this.rendered_ === true) { + this.rerender(); + } +}; + +/** + * Get all of the buttons in this button group. + * + * @return {[beestat.component.button]} The buttons in this group. + */ +beestat.component.tile_group.prototype.get_buttons = function() { + return this.buttons_; +}; + +/** + * Remove this component from the page. Disposes the buttons first. + */ +beestat.component.tile_group.prototype.dispose = function() { + this.buttons_.forEach(function(button) { + button.dispose(); + }); + beestat.component.prototype.dispose.apply(this, arguments); +}; diff --git a/js/js.php b/js/js.php index 2ae255c..c2b13e9 100755 --- a/js/js.php +++ b/js/js.php @@ -42,6 +42,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; + echo '' . PHP_EOL; // Layer echo '' . PHP_EOL; @@ -122,8 +123,10 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; - echo '' . PHP_EOL; - echo '' . PHP_EOL; + echo '' . PHP_EOL; + echo '' . PHP_EOL; + echo '' . PHP_EOL; + echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL;