diff options
6 files changed, 232 insertions, 160 deletions
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html index 9e94384..c359cbb 100644 --- a/chrome/browser/resources/options.html +++ b/chrome/browser/resources/options.html @@ -22,7 +22,7 @@ <script src="options/pref_ui.js"></script> <script src="options/options_page.js"></script> <if expr="pp_ifdef('chromeos')"> - <script src="options/chromeos_internet_network_list.js"></script> + <script src="options/chromeos_internet_network_element.js"></script> <script src="options/chromeos_internet_options.js"></script> <script src="options/chromeos_language_list.js"></script> <script src="options/chromeos_language_options.js"></script> diff --git a/chrome/browser/resources/options/chromeos_internet_network_element.js b/chrome/browser/resources/options/chromeos_internet_network_element.js new file mode 100644 index 0000000..10f54dd --- /dev/null +++ b/chrome/browser/resources/options/chromeos_internet_network_element.js @@ -0,0 +1,160 @@ +// Copyright (c) 2010 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +cr.define('options.internet', function() { + /** + * Creates a new network list div. + * @param {Object=} opt_propertyBag Optional properties. + * @constructor + * @extends {HTMLDivElement} + */ + var NetworkElement = cr.ui.define('div'); + + NetworkElement.prototype = { + __proto__: HTMLDivElement.prototype, + + /** @inheritDoc */ + decorate: function() { + this.addEventListener('click', this.handleClick_); + }, + + /** + * Loads given network list. + * @param {Array} networks An array of network object. + */ + load: function(networks) { + this.textContent = ''; + + for (var i = 0; i < networks.length; ++i) { + this.appendChild(new NetworkItem(networks[i])); + } + }, + + /** + * Handles click on network list and triggers actions when clicked on + * a NetworkListItem button. + * @private + * @param {!Event} e The click event object. + */ + handleClick_: function(e) { + // Handle left button click + if (e.button == 0) { + var el = e.target; + if (el.buttonType && el.networkType && el.servicePath) { + chrome.send('buttonClickCallback', + [String(el.networkType), String(el.servicePath), + String(el.buttonType)]); + } + } + } + }; + + /** + * Creates a new network item. + * @param {Object} network The network this represents. + * @constructor + * @extends {HTMLDivElement} + */ + function NetworkItem(network) { + var el = cr.doc.createElement('div'); + el.data = { + servicePath: network[0], + networkName: network[1], + networkStatus: network[2], + networkType: network[3], + connected: network[4], + connecting: network[5], + iconURL: network[6], + remembered: network[7] + }; + NetworkItem.decorate(el); + return el; + } + + /** + * Decorates an element as a network item. + * @param {!HTMLElement} el The element to decorate. + */ + NetworkItem.decorate = function(el) { + el.__proto__ = NetworkItem.prototype; + el.decorate(); + }; + + NetworkItem.prototype = { + __proto__: HTMLDivElement.prototype, + + /** @inheritDoc */ + decorate: function() { + this.className = 'network-item'; + this.connected = this.data.connected; + + // textDiv holds icon, name and status text. + var textDiv = this.ownerDocument.createElement('div'); + textDiv.className = 'network-item-text'; + textDiv.style.backgroundImage = url(this.data.iconURL); + + var nameEl = this.ownerDocument.createElement('div'); + nameEl.className = 'network-name-label'; + nameEl.textContent = this.data.networkName; + textDiv.appendChild(nameEl); + + var statusEl = this.ownerDocument.createElement('div'); + statusEl.className = 'network-status-label'; + statusEl.textContent = this.data.networkStatus; + textDiv.appendChild(statusEl); + + this.appendChild(textDiv); + + var spacerDiv = this.ownerDocument.createElement('div'); + spacerDiv.className = 'network-item-box-spacer'; + this.appendChild(spacerDiv); + + var buttonsDiv = this.ownerDocument.createElement('div'); + if (!this.data.remembered) { + if (this.data.connected) { + // disconnect button (if not ethernet) + if (this.data.networkType != 1) + buttonsDiv.appendChild(this.createButton_('disconnect_button', + 'disconnect')); + + // options button + buttonsDiv.appendChild(this.createButton_('options_button', + 'options')); + } else if (!this.data.connecting) { + // connect button + buttonsDiv.appendChild(this.createButton_('connect_button', + 'connect')); + } + } else { + // forget button + buttonsDiv.appendChild(this.createButton_('forget_button', 'forget')); + } + this.appendChild(buttonsDiv); + }, + + /** + * Creates a button for interacting with a network. + * @param {Object} name The name of the localStrings to use for the text. + * @param {Object} type The type of button. + */ + createButton_: function(name, type) { + var buttonEl = this.ownerDocument.createElement('button'); + buttonEl.textContent = localStrings.getString(name); + buttonEl.buttonType = type; + buttonEl.networkType = this.data.networkType; + buttonEl.servicePath = this.data.servicePath; + return buttonEl; + } + }; + + /** + * Whether the underlying network is connected. Only used for display purpose. + * @type {boolean} + */ + cr.defineProperty(NetworkItem, 'connected', cr.PropertyKind.BOOL_ATTR); + + return { + NetworkElement: NetworkElement + }; +}); diff --git a/chrome/browser/resources/options/chromeos_internet_network_list.js b/chrome/browser/resources/options/chromeos_internet_network_list.js deleted file mode 100644 index 3536c37..0000000 --- a/chrome/browser/resources/options/chromeos_internet_network_list.js +++ /dev/null @@ -1,127 +0,0 @@ -// Copyright (c) 2010 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -cr.define('options.internet', function() { - const List = cr.ui.List; - const ListItem = cr.ui.ListItem; - const ArrayDataModel = cr.ui.ArrayDataModel; - - /** - * Creates a new network list. - * @param {Object=} opt_propertyBag Optional properties. - * @constructor - * @extends {cr.ui.List} - */ - var NetworkList = cr.ui.define('list'); - - NetworkList.prototype = { - __proto__: List.prototype, - - createItem: function(network) { - return new NetworkListItem(network); - }, - - /** - * Loads given network list. - * @param {Array} users An array of user object. - */ - load: function(networks) { - this.dataModel = new ArrayDataModel(networks); - }, - - }; - - /** - * Creates a new network list item. - * @param {!ListValue} network The network this represents. - * @constructor - * @extends {cr.ui.ListItem} - */ - function NetworkListItem(network) { - var el = cr.doc.createElement('div'); - el.servicePath = network[0]; - el.networkName = network[1]; - el.networkStatus = network[2]; - el.networkType = network[3]; - el.connected = network[4]; - el.connecting = network[5]; - el.iconURL = network[6]; - el.remembered = network[7]; - NetworkListItem.decorate(el); - return el; - } - - /** - * Decorates an element as a network list item. - * @param {!HTMLElement} el The element to decorate. - */ - NetworkListItem.decorate = function(el) { - el.__proto__ = NetworkListItem.prototype; - el.decorate(); - }; - - NetworkListItem.prototype = { - __proto__: ListItem.prototype, - - /** @inheritDoc */ - decorate: function() { - ListItem.prototype.decorate.call(this); - - // icon and name - var nameEl = this.ownerDocument.createElement('span'); - nameEl.className = 'label'; - // TODO(xiyuan): Use css for this. - if (this.connected) - nameEl.style.fontWeight = 'bold'; - nameEl.textContent = this.networkName; - nameEl.style.backgroundImage = url(this.iconURL); - this.appendChild(nameEl); - - // status - var statusEl = this.ownerDocument.createElement('span'); - statusEl.className = 'label'; - statusEl.textContent = this.networkStatus; - this.appendChild(statusEl); - - if (!this.remembered) { - if (this.connected) { - // disconnect button (if not ethernet) - if (this.networkType != 1) - this.appendChild(this.createButton_('disconnect_button', - 'disconnect')); - - // options button - this.appendChild(this.createButton_('options_button', 'options')); - } else if (!this.connecting) { - // connect button - this.appendChild(this.createButton_('connect_button', 'connect')); - } - } else { - // forget button - this.appendChild(this.createButton_('forget_button', 'forget')); - } - }, - - /** - * Creates a button for interacting with a network. - * @param {Object} name The name of the localStrings to use for the text. - * @param {Object} type The type of button. - */ - createButton_: function(name, type) { - var buttonEl = this.ownerDocument.createElement('button'); - buttonEl.textContent = localStrings.getString(name); - var networkType = this.networkType; - var servicePath = this.servicePath; - buttonEl.onclick = function(event) { - chrome.send('buttonClickCallback', - [String(networkType), String(servicePath), String(type)]); - }; - return buttonEl; - } - }; - - return { - NetworkList: NetworkList - }; -}); diff --git a/chrome/browser/resources/options/chromeos_internet_options.html b/chrome/browser/resources/options/chromeos_internet_options.html index ffbecea..bcdf3bd 100644 --- a/chrome/browser/resources/options/chromeos_internet_options.html +++ b/chrome/browser/resources/options/chromeos_internet_options.html @@ -2,14 +2,14 @@ <h1 i18n-content="internetPage"></h1> <section> <h3 i18n-content="wired_title"></h3> - <list class="network-list" id="wiredList"></list> + <div class="networks" id="wiredList"></div> </section> <section> <h3 i18n-content="wireless_title"></h3> - <list class="network-list" id="wirelessList"></list> + <div class="networks" id="wirelessList"></div> </section> <section> <h3 i18n-content="remembered_title"></h3> - <list class="network-list" id="rememberedList"></list> + <div class="networks" id="rememberedList"></div> </section> </div> diff --git a/chrome/browser/resources/options/chromeos_internet_options.js b/chrome/browser/resources/options/chromeos_internet_options.js index 18c064b..dea5838 100644 --- a/chrome/browser/resources/options/chromeos_internet_options.js +++ b/chrome/browser/resources/options/chromeos_internet_options.js @@ -32,29 +32,12 @@ cr.define('options', function() { // Call base class implementation to starts preference initialization. OptionsPage.prototype.initializePage.call(this); - options.internet.NetworkList.decorate($('wiredList')); + options.internet.NetworkElement.decorate($('wiredList')); $('wiredList').load(templateData.wiredList); - options.internet.NetworkList.decorate($('wirelessList')); + options.internet.NetworkElement.decorate($('wirelessList')); $('wirelessList').load(templateData.wirelessList); - options.internet.NetworkList.decorate($('rememberedList')); + options.internet.NetworkElement.decorate($('rememberedList')); $('rememberedList').load(templateData.rememberedList); - - this.addEventListener('visibleChange', this.handleVisibleChange_); - }, - - networkListInitalized_: false, - - /** - * Handler for OptionsPage's visible property change event. - * @param {Event} e Property change event. - */ - handleVisibleChange_ : function(e) { - if (!this.networkListInitalized_ && this.visible) { - this.networkListInitalized_ = true; - $('wiredList').redraw(); - $('wirelessList').redraw(); - $('rememberedList').redraw(); - } } }; diff --git a/chrome/browser/resources/options/chromeos_internet_options_page.css b/chrome/browser/resources/options/chromeos_internet_options_page.css index 9e42189..7879230ea 100644 --- a/chrome/browser/resources/options/chromeos_internet_options_page.css +++ b/chrome/browser/resources/options/chromeos_internet_options_page.css @@ -1,17 +1,73 @@ -.network-list { - border: 1px solid lightgrey; +/* + * TODO(xiyuan): Remove the section overrides when options_page.css uses the + * new style. + */ +#internetPage > section { + display: block; +} + +#internetPage > section > h3 { + font-size: 100%; +} + +.networks { + -webkit-margin-start: 15px; padding: 2px; - width: 600px; - height: 200px; + width: 100%; } -.network-list > * > .label { +.network-item { + -webkit-box-align: center; + -webkit-padding-start: 30px; + border: 1px solid rgba(255,255,255,0); /* transparent white */ + border-radius: 2px; + display: -webkit-box; + height: 35px; +} + +.network-item:hover { + border-color: hsl(214, 91%, 85%); + background-color: hsl(214, 91%, 97%); +} + +.network-item[connected] { + background-image: -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0))); + background-color: hsl(214,91%,89%); + border-color: hsl(214, 91%, 65%); +} + +.network-item[connected]:hover { + background-color: hsl(214, 91%, 87%); + border-color: hsl(214, 91%, 65%); +} + +.network-item-text { -webkit-padding-start: 30px; background: 0 50% no-repeat; + line-height: 100%; + max-width: 320px; + overflow: hidden; +} + +.network-item[connected] > * > .network-name-label { + font-weight: bold; +} + +.network-status-label { + color: grey; +} + +.network-item > * > button { + min-width: 100px; + visibility: hidden; +} + +.network-item:hover > * > button, +.network-item[connected] > * > button { + visibility: visible; } -.network-list > * > button { - border: 1px solid hsl(214, 91%, 85%); - border-radius: 3px; - width: 150px; +.network-item-box-spacer { + -webkit-box-flex: 1; } |