[Kimchi-devel] [PATCH V2] Add nfs server and target UI in create storage pool
zhoumeina
zhoumein at linux.vnet.ibm.com
Fri Jan 10 05:45:50 UTC 2014
On 01/10/2014 11:01 AM, Yu Xin Huo wrote:
> On 1/7/2014 1:48 AM, Aline Manera wrote:
>> On 01/06/2014 03:47 AM, zhoumeina wrote:
>>> On 01/03/2014 12:37 AM, Aline Manera wrote:
>>>>
>>>> Some comments:
>>>>
>>>> 1) Seems there are tabs in this patch.
>>>> Please, always use 4 spaces to indentation
>>>>
>>>> 2) There are whitespaces in there too
>>>>
>>>> alinefm at alinefm:~/kimchi$ git am ../mail-patches/\[Kimchi-devel\]\
>>>> \[PATCH\ V2\]\ Add\ nfs\ server\ and\ target\ UI\ in\ create\
>>>> storage\ pool.eml
>>>> Applying: Add nfs server and target UI in create storage pool
>>>> /home/alinefm/kimchi/.git/rebase-apply/patch:490: trailing whitespace.
>>>> });
>>>> warning: 1 line adds whitespace errors.
>>>>
>>>> 3) About UI
>>>>
>>>> I'd suggest to use a single combo box instead of the select box.
>>>> The combo box will display one option to input the server manually
>>>> and all servers.
>>>>
>>>> -------------------
>>>> | Input new server |
>>>> -------------------
>>>> | host A |
>>>> | host B |
>>> My design just like the attachement picture:
>>>
>>> I know what you mean here. But I think if just a single combobox ,it
>>> will make the user confused.
>>> because combobox all have a dropdown arrow. And it stands for this
>>> box is used for choose. If we want to input something.
>>>
>>> we should use filter-selectbox. In filter-selectbox, what we input
>>> must in the list of select item. There is not a standard widget
>>> which can be input
>>>
>>> and choose. since the UI design does not have a standard rule. I
>>> can not give a clear conclustion which way we should use. But
>>> personally speaking
>>>
>>> I like the way I used now, it is more clear.
>>
>>
>> Anyone else would like to give your option about it?
> Please check below to get the difference between ComboBox and
> FilteringSelect.
>
> http://dojotoolkit.org/reference-guide/1.9/dijit/form/ComboBox.html
> http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html
>
>
> For this case, Aline is correct, it is perfect to leverage ComboBox,
> Mei Na, please change your design to use ComboBox.
> ComboBox is widely used, so users should by default know how to use it
> and it will greatly improve usability.
yes, it is my knowlege limited. Since combobox is a standard widget. We
should use it instead.
>>
>>>> -------------------
>>>>
>>>> The option "Input new server" will be the default one.
>>>> When this option is selected the input box (below the combo box)
>>>> will be enabled to user input the server information.
>>>> When other option is selected (any host IP) the input box is disabled.
>>>>
>>>> What do you think about it?
>>>>
>>>>
>>>> On 12/30/2013 07:42 AM, zhoumeina wrote:
>>>>> v1-v2 Fix some bug in this patch, make it working and retest
>>>>> This patch is working adding a select box in create nfs pool,
>>>>> when user don't want to input the server ip or name, he can
>>>>> simply select "used the server I have used before" and choose
>>>>> a server in a select box, this is more convinent.
>>>>>
>>>>> Add a new jquery filter-select widget
>>>>>
>>>>> In order to show server target I did a select box in UI, but
>>>>> sometimes
>>>>> maybe the export path number is large. So I made a filter-select
>>>>> widget to make user easier to choose the export path he want.
>>>>> This is the first jquery widget. And let us make all common widget to
>>>>> jquery widget from now on.
>>>>>
>>>>> Signed-off-by: zhoumeina <zhoumein at linux.vnet.ibm.com>
>>>>> ---
>>>>> ui/css/theme-default/button.css | 11 +--
>>>>> ui/css/theme-default/form.css | 6 ++
>>>>> ui/css/theme-default/storage.css | 4 +-
>>>>> ui/js/Makefile.am | 4 +-
>>>>> ui/js/src/kimchi.api.js | 26 ++++++-
>>>>> ui/js/src/kimchi.storagepool_add_main.js | 73 +++++++++++++++--
>>>>> ui/js/src/kimchi.utils.js | 11 +++
>>>>> ui/js/widgets/filter-select.js | 137
>>>>> ++++++++++++++++++++++++++++++
>>>>> ui/js/widgets/select-menu.js | 86 +++++++++++++++++++
>>>>> ui/pages/i18n.html.tmpl | 5 +-
>>>>> ui/pages/storagepool-add.html.tmpl | 41 +++++++--
>>>>> 11 files changed, 376 insertions(+), 28 deletions(-)
>>>>> create mode 100644 ui/js/widgets/filter-select.js
>>>>> create mode 100644 ui/js/widgets/select-menu.js
>>>>>
>>>>> diff --git a/ui/css/theme-default/button.css
>>>>> b/ui/css/theme-default/button.css
>>>>> index c7ed3f6..f99679a 100644
>>>>> --- a/ui/css/theme-default/button.css
>>>>> +++ b/ui/css/theme-default/button.css
>>>>> @@ -247,17 +247,16 @@
>>>>> .btn-select {
>>>>> display: inline-block;
>>>>> position: relative;
>>>>> - height: 38px;
>>>>> + height: 30px;
>>>>> padding-right: 20px;
>>>>> margin: 5px;
>>>>> vertical-align: top;
>>>>> -webkit-border-radius: 5px;
>>>>> -moz-border-radius: 5px;
>>>>> - border-radius: 5px;
>>>>> - background: #eee;
>>>>> + background: #fff;
>>>>> box-shadow: -1px -1px 1px #666, 1px 1px 1px #fff, 2px 2px
>>>>> 2px rgba(0, 0, 0, .15) inset;
>>>>> font-size: 13px;
>>>>> - line-height: 38px;
>>>>> + line-height: 30px;
>>>>> text-align: left;
>>>>> cursor: pointer;
>>>>> }
>>>>> @@ -269,8 +268,8 @@
>>>>> .btn-select .arrow {
>>>>> position: absolute;
>>>>> width: 15px;
>>>>> - height: 38px;
>>>>> - line-height: 38px;
>>>>> + height: 30px;
>>>>> + line-height: 30px;
>>>>> top: 0;
>>>>> right: 5px;
>>>>> background:
>>>>> url(../images/theme-default/arrow-down-black.png) no-repeat center
>>>>> center;
>>>>> diff --git a/ui/css/theme-default/form.css
>>>>> b/ui/css/theme-default/form.css
>>>>> index c24b277..9db4bba 100644
>>>>> --- a/ui/css/theme-default/form.css
>>>>> +++ b/ui/css/theme-default/form.css
>>>>> @@ -45,3 +45,9 @@
>>>>> line-height: 30px;
>>>>> padding: 0 5px;
>>>>> }
>>>>> +
>>>>> +.text-help {
>>>>> + font-size: 12px;
>>>>> + color: #333;
>>>>> + margin: 0 0 5px 5px;
>>>>> +}
>>>>> diff --git a/ui/css/theme-default/storage.css
>>>>> b/ui/css/theme-default/storage.css
>>>>> index d81dc75..ae89f1b 100644
>>>>> --- a/ui/css/theme-default/storage.css
>>>>> +++ b/ui/css/theme-default/storage.css
>>>>> @@ -529,7 +529,7 @@
>>>>> width: 300px;
>>>>> display: inline-block;
>>>>> vertical-align: top;
>>>>> - padding: 5px 5px 5px 20px;
>>>>> + padding: 5px 5px 5px 22px;
>>>>> }
>>>>>
>>>>> .storage-type-wrapper-controls input[type="text"] {
>>>>> @@ -548,7 +548,7 @@
>>>>>
>>>>> .storage-type-wrapper-controls > .dropdown {
>>>>> margin: 5px 0 0 1px;
>>>>> - width: 250px;
>>>>> + width: 150px;
>>>>> }
>>>>>
>>>>> .storage-type-wrapper-controls input[type="text"][disabled] {
>>>>> diff --git a/ui/js/Makefile.am b/ui/js/Makefile.am
>>>>> index 337e369..8dfd4d6 100644
>>>>> --- a/ui/js/Makefile.am
>>>>> +++ b/ui/js/Makefile.am
>>>>> @@ -20,7 +20,7 @@
>>>>>
>>>>> SUBDIRS = novnc
>>>>>
>>>>> -EXTRA_DIST = src
>>>>> +EXTRA_DIST = src widgets
>>>>>
>>>>> jsdir = $(datadir)/kimchi/ui/js
>>>>>
>>>>> @@ -32,7 +32,7 @@ dist_js_DATA = \
>>>>> modernizr.custom.2.6.2.min.js \
>>>>> $(NULL)
>>>>>
>>>>> -kimchi.min.js: src/*.js
>>>>> +kimchi.min.js: widgets/*.js src/*.js
>>>>> cat $(sort $^) > $@
>>>>>
>>>>> CLEANFILES = kimchi.min.js
>>>>> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
>>>>> index fbcf4a2..f6115a8 100644
>>>>> --- a/ui/js/src/kimchi.api.js
>>>>> +++ b/ui/js/src/kimchi.api.js
>>>>> @@ -681,5 +681,29 @@ var kimchi = {
>>>>> success : suc,
>>>>> error : err
>>>>> });
>>>>> + },
>>>>> +
>>>>> + getStorageServers: function(type, suc, err) {
>>>>> + var url = kimchi.url + 'storageservers?target_type=' + type;
>>>>> + kimchi.requestJSON({
>>>>> + url : url,
>>>>> + type : 'GET',
>>>>> + contentType : 'application/json',
>>>>> + dataType : 'json',
>>>>> + success : suc,
>>>>> + error : err
>>>>> + });
>>>>> + },
>>>>> +
>>>>> + getStorageTargets: function(server,type, suc, err) {
>>>>> + var url = kimchi.url + 'storageservers/' + server +
>>>>> '/storagetargets?target_type=' + type;
>>>>> + kimchi.requestJSON({
>>>>> + url : url,
>>>>> + type : 'GET',
>>>>> + contentType : 'application/json',
>>>>> + dataType : 'json',
>>>>> + success : suc,
>>>>> + error : err
>>>>> + });
>>>>> }
>>>>> -};
>>>>> +};
>>>>> \ No newline at end of file
>>>>> diff --git a/ui/js/src/kimchi.storagepool_add_main.js
>>>>> b/ui/js/src/kimchi.storagepool_add_main.js
>>>>> index b31610a..7955352 100644
>>>>> --- a/ui/js/src/kimchi.storagepool_add_main.js
>>>>> +++ b/ui/js/src/kimchi.storagepool_add_main.js
>>>>> @@ -51,7 +51,72 @@ kimchi.initStorageAddPage = function() {
>>>>> });
>>>>> $('.host-partition').html(listHtml);
>>>>> }
>>>>> - kimchi.select('storagePool-list', options);
>>>>> + $('#storagePool-list').selectMenu();
>>>>> + $('#storagePool-list').selectMenu("setData", options);
>>>>> + kimchi.getStorageServers('netfs', function(data) {
>>>>> + var serverContent = [];
>>>>> + serverContent.push({
>>>>> + label : i18n['select_default'],
>>>>> + value : ''
>>>>> + });
>>>>> + if (data.length > 0) {
>>>>> + $.each(data, function(index, value) {
>>>>> + serverContent.push({
>>>>> + label : value,
>>>>> + value : value
>>>>> + });
>>>>> + });
>>>>> + }
>>>>> + $('#nfs-server-used').selectMenu();
>>>>> + $('#nfs-server-used').selectMenu("setData",
>>>>> serverContent);
>>>>> + $('#nfs-server-target').filterselect();
>>>>> + $('input[name=nfsServerType]').change(function() {
>>>>> + if ($(this).val() === 'input') {
>>>>> + $('#nfsServerInputDiv').removeClass('tmpl-html');
>>>>> + $('#nfsServerChooseDiv').addClass('tmpl-html');
>>>>> + } else {
>>>>> + $('#nfsServerInputDiv').addClass('tmpl-html');
>>>>> + $('#nfsServerChooseDiv').removeClass('tmpl-html');
>>>>> + }
>>>>> + });
>>>>> + $('#nfsServerSelect').change(function() {
>>>>> + $('#nfsserverId').val($(this).val());
>>>>> + $('#nfsserverId').trigger("keydown");
>>>>> + });
>>>>> + $('#nfsserverId').on("keydown",function() {
>>>>> + if ($(this).val() !== '' &&
>>>>> kimchi.isServer($(this).val())) {
>>>>> + $('#nfspathId').removeAttr('disabled');
>>>>> + } else {
>>>>> + $('#nfspathId').attr('disabled','disabled');
>>>>> + }
>>>>> + $('#nfs-server-target').filterselect('clear');
>>>>> + });
>>>>> + $('#nfspathId').focus(function() {
>>>>> + var targetContent = [];
>>>>> + kimchi.getStorageTargets($('#nfsserverId').val(), 'netfs',
>>>>> function(data) {
>>>>> + if (data.length > 0) {
>>>>> + $.each(data, function(index, value) {
>>>>> + targetContent.push({
>>>>> + label : value.target,
>>>>> + value : value.target
>>>>> + });
>>>>> + });
>>>>> + } else {
>>>>> + targetContent.push({
>>>>> + label : i18n['msg.no.result'],
>>>>> + value : ''
>>>>> + });
>>>>> + }
>>>>> + $('#nfs-server-target').filterselect("setData", targetContent);
>>>>> + },function() {
>>>>> + targetContent.push({
>>>>> + label : i18n['msg.no.result'],
>>>>> + value : ''
>>>>> + });
>>>>> + $('#nfs-server-target').filterselect("setData", targetContent);
>>>>> + });
>>>>> + });
>>>>> + });
>>>>> $('#poolType').change(function() {
>>>>> if ($(this).val() === 'dir') {
>>>>> $('.path-section').removeClass('tmpl-html');
>>>>> @@ -88,7 +153,6 @@ kimchi.validateForm = function() {
>>>>> } else {
>>>>> return kimchi.validateLogicalForm();
>>>>> }
>>>>> -
>>>>> };
>>>>>
>>>>> kimchi.validateDirForm = function () {
>>>>> @@ -116,11 +180,8 @@ kimchi.validateNfsForm = function () {
>>>>> kimchi.message.error(i18n['msg.pool.edit.nfspath.blank']);
>>>>> return false;
>>>>> }
>>>>> - var domain =
>>>>> "([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6}"
>>>>>
>>>>> - var ip = "(\\d{1,3}\.){3}\\d{1,3}"
>>>>> - regex = new RegExp('^' + domain + '|' + ip + '$')
>>>>>
>>>>> - if(!regex.test(nfsserver)) {
>>>>> + if(kimchi.isServer(nfsserver)) {
>>>>> kimchi.message.error(i18n['msg.validate.pool.edit.nfsserver']);
>>>>> return false;
>>>>> }
>>>>> diff --git a/ui/js/src/kimchi.utils.js b/ui/js/src/kimchi.utils.js
>>>>> index 8af6a11..6439db6 100644
>>>>> --- a/ui/js/src/kimchi.utils.js
>>>>> +++ b/ui/js/src/kimchi.utils.js
>>>>> @@ -163,3 +163,14 @@ kimchi.changetoProperUnit = function(numOrg,
>>>>> digits, base) {
>>>>>
>>>>> kimchi.formatMeasurement = format;
>>>>> })();
>>>>> +
>>>>> +kimchi.isServer = function(server) {
>>>>> + var domain =
>>>>> "([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6}"
>>>>>
>>>>> + var ip = "(\\d{1,3}\.){3}\\d{1,3}"
>>>>> + regex = new RegExp('^' + domain + '|' + ip + '$');
>>>>> + if(!regex.test(server)) {
>>>>> + return false;
>>>>> + } else {
>>>>> + return true;
>>>>> + }
>>>>> +};
>>>>> \ No newline at end of file
>>>>> diff --git a/ui/js/widgets/filter-select.js
>>>>> b/ui/js/widgets/filter-select.js
>>>>> new file mode 100644
>>>>> index 0000000..02fe5d9
>>>>> --- /dev/null
>>>>> +++ b/ui/js/widgets/filter-select.js
>>>>> @@ -0,0 +1,137 @@
>>>>> +/*
>>>>> + * Project Kimchi
>>>>> + *
>>>>> + * Copyright IBM, Corp. 2013
>>>>> + *
>>>>> + * Authors:
>>>>> + * zhoumeina <zhoumein at linux.vnet.ibm.com>
>>>>> + *
>>>>> + * Licensed under the Apache License, Version 2.0 (the 'License');
>>>>> + * you may not use this file except in compliance with the License.
>>>>> + * You may obtain a copy of the License at
>>>>> + *
>>>>> + * http://www.apache.org/licenses/LICENSE-2.0
>>>>> + *
>>>>> + * Unless required by applicable law or agreed to in writing,
>>>>> software
>>>>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>>>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
>>>>> or implied.
>>>>> + * See the License for the specific language governing
>>>>> permissions and
>>>>> + * limitations under the License.
>>>>> + */
>>>>> +(function($) {
>>>>> + $.widget('kimchi.filterselect', {
>>>>> + options : {
>>>>> + key : 0,
>>>>> + value : 0
>>>>> + },
>>>>> +
>>>>> + _create : function() {
>>>>> + this.listControl = this.element;
>>>>> + this.element.html('');
>>>>> + var targetId = this.listControl.data('target');
>>>>> + var labelId = this.listControl.data('label');
>>>>> + this.target = $('#' + targetId);
>>>>> + this.label = $('#' + labelId);
>>>>> + this.selectDiv = this.listControl.parent().parent();
>>>>> + this.selectDiv.addClass('btn-select dropdown popable');
>>>>> + this.listControl.parent().addClass('popover');
>>>>> + },
>>>>> +
>>>>> + _setOption : function(key, value) {
>>>>> + },
>>>>> +
>>>>> + setData : function(options) {
>>>>> + this.element.html('');
>>>>> + var that = this;
>>>>> + var value = this.target.val();
>>>>> + var selectedClass = 'active';
>>>>> + var itemTag = 'li';
>>>>> +
>>>>> + that.listControl.on('click', itemTag, function(e) {
>>>>> + that.listControl.children().removeClass(selectedClass);
>>>>> + that.listControl.addClass(selectedClass);
>>>>> + that.target.text($(this).text());
>>>>> + var oldValue = that.target.val();
>>>>> + var newValue = $(this).data('value');
>>>>> + that.target.val(newValue);
>>>>> + if (oldValue !== newValue) {
>>>>> + that.target.change();
>>>>> + }
>>>>> + });
>>>>> +
>>>>> + that.selectDiv.click(function(e) {
>>>>> + that.listControl.html('');
>>>>> + var items = that._dataList(options);
>>>>> + $.each(items, function(index, item) {
>>>>> + that.listControl.append(item);
>>>>> + })
>>>>> + var isOpen = that.selectDiv.hasClass('open');
>>>>> + that.selectDiv.removeClass('open');
>>>>> + if (!isOpen && items.length > 0) {
>>>>> + that.selectDiv.addClass('open');
>>>>> + }
>>>>> + e.preventDefault();
>>>>> + e.stopPropagation();
>>>>> + });
>>>>> +
>>>>> + that.target.keyup(function(event) {
>>>>> + that.listControl.html('');
>>>>> + var items = that._dataList(options);
>>>>> + var temp = 0;
>>>>> + $.each(items, function(index, item) {
>>>>> + if (item.html().indexOf(that.target.val()) >=
>>>>> 0) {
>>>>> + that.listControl.append(item);
>>>>> + temp++;
>>>>> + }
>>>>> + });
>>>>> + if (that.listControl.html() === '') {
>>>>> + that.listControl.html(i18n['msg.storagepool.unvalid.path']);
>>>>> + }
>>>>> + if (temp > 0) {
>>>>> + that._open();
>>>>> + }
>>>>> + });
>>>>> + },
>>>>> +
>>>>> + _dataList : function(options) {
>>>>> + var item;
>>>>> + var itemTag = 'li';
>>>>> + var selectedClass = 'active';
>>>>> + var items = [];
>>>>> + var that = this;
>>>>> + $.each(options, function(index, option) {
>>>>> + item = $('<' + itemTag + '></' + itemTag + '>');
>>>>> + item.text(option.label);
>>>>> + item.data('value', option.value);
>>>>> + if (option.value === that.target.val()) {
>>>>> + item.addClass(selectedClass);
>>>>> + }
>>>>> + items.push(item);
>>>>> + });
>>>>> + return items;
>>>>> + },
>>>>> +
>>>>> + clear : function() {
>>>>> + this.target.val("");
>>>>> + },
>>>>> +
>>>>> + _open : function() {
>>>>> + var isOpen = this.selectDiv.hasClass('open');
>>>>> + if (!isOpen) {
>>>>> + this.selectDiv.addClass('open');
>>>>> + }
>>>>> + },
>>>>> +
>>>>> + _close : function() {
>>>>> + var isOpen = this.selectDiv.hasClass('open');
>>>>> + if (isOpen) {
>>>>> + this.selectDiv.removeClass('open');
>>>>> + }
>>>>> + },
>>>>> +
>>>>> + destroy : function() {
>>>>> + // call the base destroy function
>>>>> + $.Widget.prototype.destroy.call(this);
>>>>> + }
>>>>> + });
>>>>> +}(jQuery));
>>>>> \ No newline at end of file
>>>>> diff --git a/ui/js/widgets/select-menu.js
>>>>> b/ui/js/widgets/select-menu.js
>>>>> new file mode 100644
>>>>> index 0000000..4124096
>>>>> --- /dev/null
>>>>> +++ b/ui/js/widgets/select-menu.js
>>>>> @@ -0,0 +1,86 @@
>>>>> +/*
>>>>> + * Project Kimchi
>>>>> + *
>>>>> + * Copyright IBM, Corp. 2013
>>>>> + *
>>>>> + * Authors:
>>>>> + * zhoumeina <zhoumein at linux.vnet.ibm.com>
>>>>> + *
>>>>> + * Licensed under the Apache License, Version 2.0 (the 'License');
>>>>> + * you may not use this file except in compliance with the License.
>>>>> + * You may obtain a copy of the License at
>>>>> + *
>>>>> + * http://www.apache.org/licenses/LICENSE-2.0
>>>>> + *
>>>>> + * Unless required by applicable law or agreed to in writing,
>>>>> software
>>>>> + * distributed under the License is distributed on an 'AS IS' BASIS,
>>>>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
>>>>> or implied.
>>>>> + * See the License for the specific language governing
>>>>> permissions and
>>>>> + * limitations under the License.
>>>>> + */
>>>>> +(function($) {
>>>>> + $.widget('kimchi.selectMenu', {
>>>>> + options: {
>>>>> + key: 0,
>>>>> + value: 0
>>>>> + },
>>>>> +
>>>>> + _create : function() {
>>>>> + this.listControl = this.element;
>>>>> + this.element.html('');
>>>>> + var targetId = this.listControl.data('target');
>>>>> + var labelId = this.listControl.data('label');
>>>>> + this.target = $('#' + targetId);
>>>>> + this.label = $('#' + labelId);
>>>>> + this.selectDiv = this.listControl.parent().parent();
>>>>> + this.selectDiv.addClass('btn-select dropdown popable');
>>>>> + this.listControl.parent().addClass('popover');
>>>>> + var that = this;
>>>>> + },
>>>>> +
>>>>> + _setOption : function(key,value) {},
>>>>> +
>>>>> + setData : function (options) {
>>>>> + var that = this;
>>>>> + var value = this.target.val();
>>>>> + var selectedClass = 'active';
>>>>> + var itemTag = 'li';
>>>>> + $.each(options, function(index, option) {
>>>>> + item = $('<' + itemTag + '></' + itemTag + '>');
>>>>> + item.text(option.label);
>>>>> + item.data('value', option.value);
>>>>> + if(option.value === value) {
>>>>> + item.addClass(selectedClass);
>>>>> + that.label.text(option.label);
>>>>> + }
>>>>> + that.listControl.append(item);
>>>>> + });
>>>>> + that.listControl.on('click', itemTag, function() {
>>>>> + that.listControl.children().removeClass(selectedClass);
>>>>> + that.listControl.addClass(selectedClass);
>>>>> + that.label.text($(this).text());
>>>>> + var oldValue = that.target.val();
>>>>> + var newValue = $(this).data('value');
>>>>> + that.target.val(newValue);
>>>>> + if(oldValue !== newValue) {
>>>>> + that.target.change();
>>>>> + }
>>>>> + });
>>>>> +
>>>>> + that.selectDiv.click(function(e) {
>>>>> + var isOpen = that.selectDiv.hasClass('open');
>>>>> + that.selectDiv.removeClass('open');
>>>>> + if (!isOpen) {
>>>>> + that.selectDiv.addClass('open');
>>>>> + }
>>>>> + e.preventDefault();
>>>>> + e.stopPropagation();
>>>>> + });
>>>>> + },
>>>>> +
>>>>> + destroy : function() {
>>>>> + // call the base destroy function
>>>>> + $.Widget.prototype.destroy.call(this);
>>>>> + }
>>>>> + });
>>>>> +}(jQuery));
>>>>> \ No newline at end of file
>>>>> diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
>>>>> index c1fc3d1..c95da9b 100644
>>>>> --- a/ui/pages/i18n.html.tmpl
>>>>> +++ b/ui/pages/i18n.html.tmpl
>>>>> @@ -121,7 +121,10 @@ var i18n = {
>>>>> 'action_create': "$_("Create")",
>>>>> 'msg_warning': "$_("Warning")",
>>>>> 'msg.logicalpool.confirm.delete': "$_("It will format your
>>>>> disk and you will loose any data in"
>>>>> - " there, are you sure to
>>>>> continue? ")"
>>>>> + " there, are you sure to
>>>>> continue? ")",
>>>>> + 'select_default': "$_("Please choose")",
>>>>> + 'msg.storagepool.unvalid.path': "$_("This is not a valid
>>>>> path")",
>>>>> + 'msg.no.result' : "$_("No valid result")"
>>>>> };
>>>>> </script>
>>>>> </body>
>>>>> diff --git a/ui/pages/storagepool-add.html.tmpl
>>>>> b/ui/pages/storagepool-add.html.tmpl
>>>>> index 5a2dd45..3a73390 100644
>>>>> --- a/ui/pages/storagepool-add.html.tmpl
>>>>> +++ b/ui/pages/storagepool-add.html.tmpl
>>>>> @@ -27,7 +27,7 @@
>>>>> <!DOCTYPE html>
>>>>> <html>
>>>>> <body>
>>>>> - <div class="window" style="width: 600px; height: 600px;">
>>>>> + <div class="window" style="width: 800px; height: 650px;">
>>>>> <header>
>>>>> <h1 class="title">$_("Define a New Storage Pool")</h1>
>>>>> <div class="close">X</div>
>>>>> @@ -47,10 +47,10 @@
>>>>> <section class="form-section">
>>>>> <h2>2. $_("Storage Pool Type")</h2>
>>>>> <div class="storage-type-wrapper-controls">
>>>>> - <div class="btn dropdown popable">
>>>>> + <div>
>>>>> <input id="poolType" name="type"
>>>>> type="hidden" value="dir"/>
>>>>> <span class="text"
>>>>> id="pool-type-label"></span><span class="arrow"></span>
>>>>> - <div class="popover" style="width:
>>>>> 100%">
>>>>> + <div style="width: 100%">
>>>>> <ul class="select-list"
>>>>> id="storagePool-list" data-target="poolType"
>>>>> data-label="pool-type-label">
>>>>> </ul>
>>>>> </div>
>>>>> @@ -74,22 +74,43 @@
>>>>> <section class="form-section">
>>>>> <h2>3. $_("NFS server IP")</h2>
>>>>> <div class="field">
>>>>> + <input type="radio"
>>>>> id="nfsServerInput" value="input" name="nfsServerType"
>>>>> checked="true">
>>>>> + <label>$_("I want to input the server
>>>>> myself.")</label>
>>>>> + <input type="radio"
>>>>> id="nfsServerChoose" value="choose" name="nfsServerType">
>>>>> + <label>$_("I want to choose a server
>>>>> I used before.")</label>
>>>>> + </div>
>>>>> + <div id="nfsServerInputDiv" class="field">
>>>>> <p class="text-help">
>>>>> $_("NFS server IP or hostname.
>>>>> It should not be empty.")</p>
>>>>> <input id="nfsserverId" type="text"
>>>>> class="text"
>>>>> style="width: 300px">
>>>>> </div>
>>>>> + <div id="nfsServerChooseDiv" class="field
>>>>> tmpl-html" style="overflow:visible">
>>>>> + <p class="text-help">
>>>>> + $_("Please choose the nfs server
>>>>> you want to create storage pool.")</p>
>>>>> + <div style="width: 285px">
>>>>> + <input id="nfsServerSelect"
>>>>> type="hidden"/>
>>>>> + <span class="text"
>>>>> id="nfs-server-label"></span><span class="arrow"></span>
>>>>> + <div style="width: 100%">
>>>>> + <ul class="select-list"
>>>>> id="nfs-server-used" data-target="nfsServerSelect"
>>>>> data-label="nfs-server-label">
>>>>> + </ul>
>>>>> + </div>
>>>>> + </div>
>>>>> + </div>
>>>>> </section>
>>>>> <section class="form-section">
>>>>> <h2>4. $_("NFS Path")</h2>
>>>>> - <div class="field">
>>>>> + <div class="field" style="overflow:visible">
>>>>> <p class="text-help">$_("The nfs
>>>>> exported path on nfs server")</p>
>>>>> - <input id="nfspathId" type="text"
>>>>> class="text"
>>>>> - style="width: 300px">
>>>>> - <input type="hidden" id="localpathId"
>>>>> class="text"
>>>>> - value="none">
>>>>> - </div>
>>>>> - <div class="clear"></div>
>>>>> + <div style="width: 285px">
>>>>> + <input id="nfspathId"
>>>>> class="text" disabled="disabled" style="width:293px;"/>
>>>>> + <span class="text"
>>>>> id="nfs-target-label"></span><span class="arrow"></span>
>>>>> + <div style="width: 100%">
>>>>> + <ul class="select-list"
>>>>> id="nfs-server-target" data-target="nfspathId"
>>>>> data-label="nfs-target-label">
>>>>> + </ul>
>>>>> + </div>
>>>>> + </div>
>>>>> + </div>
>>>>> </section>
>>>>> </div>
>>>>> <div class="logical-section tmpl-html">
>>>>
>>>
>>
>> _______________________________________________
>> Kimchi-devel mailing list
>> Kimchi-devel at ovirt.org
>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
More information about the Kimchi-devel
mailing list