[PATCH] UI: Line Chart Widget
by huoyuxin＠linux.vnet.ibm.com
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
---
ui/css/theme-default/line.css | 34 +++++++++++++++++++
ui/js/widgets/line.js | 72 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 106 insertions(+), 0 deletions(-)
create mode 100644 ui/css/theme-default/line.css
create mode 100644 ui/js/widgets/line.js
diff --git a/ui/css/theme-default/line.css b/ui/css/theme-default/line.css
new file mode 100644
index 0000000..7dde827
--- /dev/null
+++ b/ui/css/theme-default/line.css
@@ -0,0 +1,34 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+.line line, polyline {
+ stroke: #000000;
+ stroke-width: 2;
+}
+
+.line .min {
+ stroke: #444444;
+}
+
+.line .max {
+ stroke: #999999;
+}
+
+.line polyline {
+ fill: none;
+}
diff --git a/ui/js/widgets/line.js b/ui/js/widgets/line.js
new file mode 100644
index 0000000..4c63917
--- /dev/null
+++ b/ui/js/widgets/line.js
@@ -0,0 +1,72 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.line", {
+ options: {
+ xShift: true,
+ minVal: 0,
+ maxVal: 100,
+ datasets: []
+ },
+ _create: function() {
+ this._build();
+ },
+ _build: function() {
+ this.element.empty();
+ var maxX = this.element.width();
+ var maxY = this.element.height();
+ var svg = "<svg class='line' width='"+maxX+"' height='"+maxY+"'>";
+ svg += "<line x1='0' y1='0' x2='"+maxX+"' y2='0' class='max'/>";
+ svg += "<line x1='0' y1='"+maxY+"' x2='"+maxX+"' y2='"+maxY+"' class='min'/>";
+ for(var i=0;i<this.options.datasets.length;i++){
+ var data = this.options.datasets[i].data;
+ var points = "";
+ for(var j=0;j<data.length;j++){
+ if(data[j]){
+ var xVal = maxX/(data.length-1)*j;
+ var yVal = (this.options.maxVal-data[j])*maxY/this.options.maxVal;
+ points += xVal+","+yVal+" ";
+ }
+ }
+ svg += "<polyline points='"+points+"' style='stroke:"+this.options.datasets[i].color+";'/>";
+ }
+ svg += "</svg>";
+ this.element.append(svg);
+ },
+ addData: function(values){
+ if(values.length<this.options.datasets.length) return;
+ for(var i=0;i<this.options.datasets.length;i++){
+ this.options.datasets[i].data.push(values[i]);
+ if(this.options.xShift) this.options.datasets[i].data.splice(0,1);
+ }
+ this._build();
+ },
+ removeData: function(){
+ for(var i=0;i<this.options.datasets.length;i++){
+ var data = this.options.datasets[i].data;
+ data.splice(0,1);
+ if(this.options.xShift) data.push(null);
+ }
+ this._build();
+ },
+ _destroy: function() {
+ this.element.empty();
+ }
+});
+});
--
1.7.1
9 years, 11 months
[PATCH] UI: Adding selectmenu widget for kimchi new UI
by Wen Wang
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/selectmenu-flat.css | 84 +++++++++++++++++++++
ui/js/widgets/selectmenu-flat.js | 122 +++++++++++++++++++++++++++++++
2 files changed, 206 insertions(+)
create mode 100644 ui/css/theme-default/selectmenu-flat.css
create mode 100644 ui/js/widgets/selectmenu-flat.js
diff --git a/ui/css/theme-default/selectmenu-flat.css b/ui/css/theme-default/selectmenu-flat.css
new file mode 100644
index 0000000..584b535
--- /dev/null
+++ b/ui/css/theme-default/selectmenu-flat.css
@@ -0,0 +1,84 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+.selected-box {
+ width: 100px;
+ height: 30px;
+ border: 1px solid #d8d8d8;
+ border-radius: 3px;
+ cursor: pointer;
+ margin-left: 50px;
+ background: #FFFFFF;
+}
+
+.select-val {
+ display: none;
+}
+
+.select-label {
+ line-height: 32px;
+ vertical-align: middle;
+ position: relative;
+ margin-left: 20px;
+}
+
+.select-icon {
+ position: relative;
+ float: right;
+ line-height: 30px;
+ vertical-align: middle;
+ padding-right: 10px;
+ padding-left: 10px;
+ color: #555555;
+ font-size: 10px;
+}
+
+.select-icon:hover {
+ background: #FCFCFC;
+}
+
+.selectmenu-container {
+ border: 1px solid #999999;
+ width: 100px;
+}
+
+.selectmenu-opt {
+ background: #FFFFFF;
+}
+
+.selectmenu-list {
+ border: 1px solid #d8d8d8;
+ width: 150px;
+ padding-left: 0;
+ margin-top: 0;
+ cursor: pointer;
+}
+
+.selectmenu-list li {
+ list-style: none;
+ position: relative;
+ height: 20px;
+ padding: 5px 0 5px 20px;
+ line-height: 21px;
+ vertical-align: middle;
+ border-bottom: 1px solid #d8d8d8;
+}
+
+.selectmenu-opt:hover {
+ background: #FCFCFC;
+}
diff --git a/ui/js/widgets/selectmenu-flat.js b/ui/js/widgets/selectmenu-flat.js
new file mode 100644
index 0000000..a6db865
--- /dev/null
+++ b/ui/js/widgets/selectmenu-flat.js
@@ -0,0 +1,122 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+
+// How to use:
+// $(".selector").selectmenuFlat({
+// content: [1,2,3,4,5,6], //Set content of the select menu
+// selected: 2 // set the selected option, starts from "1"
+// });
+// $(".selector").selectmenuFlat("value", "4"); //Set value.
+// var t = $(".selector").selectmenuFlat("value"); //Get value
+// console.log(t);
+
+
+ (function( $ ) {
+ $.widget("kimchi.selectmenuFlat", {
+
+ options: {
+ content: null,
+ name: null,
+ selected: null,
+ parentid: null
+ },
+
+ _create: function() {
+ var that = this;
+ var name = that.options.name || $(this.element).attr("id");
+ var value = that.options.content;
+ var parentid = $(this.element).attr("id");
+ that.options.parentid = parentid;
+ var html = "<div class='selected-box' id='select-" + name + "'>" +
+ "<input class='select-val'>" +
+ "<span class='select-label'></span>" +
+ "<span class='select-icon icon-down-open'></span>" +
+ "</div>";
+ $(html).appendTo(that.element);
+ html = that._setValue(value);
+ $(html).appendTo(that.element);
+ var sel = that.options.selected || value[0];
+ that.options.selected = $.inArray(sel, that.options.content).toString() + 1;
+ $(".select-val", "#" + parentid).text(sel);
+ $(".select-label", "#" + parentid).text(sel);
+ $(".selected-box", "#" + parentid).on("click", this._toggleOpt);
+ $(".selectmenu-opt", "#" + parentid).on("click", function() {
+ var selectedText = $(this).text();
+ that.options.selected = $.inArray(selectedText, that.options.content) +1;
+ $(".selected-box .select-label", "#" + parentid).text(selectedText);
+ $(".select-val", "#" + parentid).text(selectedText);
+ that._toggleOpt();
+ });
+ $(document).mouseup(function(e) {
+ var container = $(".selectmenu-opt");
+ if(!container.is(e.target) && container.has(e.target).length === 0 && $(".select-icon").hasClass("icon-up-open")) {
+ $(".selectmenu-list", "#" + parentid).prop("style", "display:none");
+ $(".select-icon", "#" + parentid).removeClass("icon-up-open");
+ $(".select-icon", "#" + parentid).addClass("icon-down-open").css({
+ "border-left": "none"
+ });
+ }
+ });
+ },
+
+ _setValue: function(value) {
+ var that = this;
+ var html = "<ul class='selectmenu-list' name='" + name + "' style='display:none'>";
+ var name = this.options.name || $(this.element).attr("id");
+ $.each(value, function(index, data) {
+ that.options.content[index] = data.toString();
+ html += "<li id='" + name + index + "' class='selectmenu-opt'>" + data + "</li>";
+ });
+ html += "</ul>"
+ return html;
+ },
+
+ _toggleOpt: function() {
+ if($(".select-icon").hasClass("icon-down-open")) {
+ $(".selectmenu-list").prop("style", "display");
+ $(".select-icon").removeClass("icon-down-open");
+ $(".select-icon").addClass("icon-up-open").css({
+ "border-left": "1px solid #d8d8d8"
+ });
+ } else {
+ $(".selectmenu-list").prop("style", "display:none");
+ $(".select-icon").removeClass("icon-up-open");
+ $(".select-icon").addClass("icon-down-open").css({
+ "border-left": "none"
+ });
+ }
+ },
+
+ value: function(value) {
+ var parentid = this.options.parentid;
+ if(!value) {
+ return $(".selected-box .select-label", "#" + parentid).text();
+ }
+ if (value <= this.options.content.length) {
+ this.options.selected = value;
+ var selectedText = this.options.content[value-1];
+ $(".selected-box .select-label", "#" + parentid).text(selectedText);
+ }
+ },
+
+ _destroy: function() {
+ this.element.remove();
+ }
+ });
+ })(jQuery);
\ No newline at end of file
--
2.1.0
9 years, 11 months
[PATCH] Supports Kimchi on LE systems v3
by Ramon Medeiros
Changes:
v3:
Create a new entry for ppc64le arch
Create key for keyboard type
v2:
Improve coding by removing duplicated actions
Fix typo
On LE systems, some changes on libvirt xml is needed. The input device
for keyboard is not kbd anymore, the architecture is still ppc64 and the
qemu binary is not qemu-kvm as in the other archs.
Signed-off-by: Ramon Medeiros <ramonn(a)linux.vnet.ibm.com>
---
src/kimchi/config.py.in | 11 +++++++++--
src/kimchi/osinfo.py | 30 ++++++++++++++++++++++++++++--
src/kimchi/vmtemplate.py | 4 +++-
3 files changed, 40 insertions(+), 5 deletions(-)
diff --git a/src/kimchi/config.py.in b/src/kimchi/config.py.in
index a952fb3..f207e3f 100644
--- a/src/kimchi/config.py.in
+++ b/src/kimchi/config.py.in
@@ -68,12 +68,19 @@ def find_qemu_binary(find_emulator=False):
raise Exception("Unable to get qemu binary location: %s" % e)
try:
xml = connect.getCapabilities()
+
+ # On Little Endian system, the qemu binary is
+ # qemu-system-ppc64, not qemu-system-ppc64le as expected
+ arch = platform.machine()
+ if arch == "ppc64le":
+ arch = "ppc64"
+
if find_emulator:
expr = "/capabilities/guest/arch[@name='%s']\
- /emulator" % platform.machine()
+ /emulator" % arch
else:
expr = "/capabilities/guest/arch[@name='%s']\
- /domain[@type='kvm']/emulator" % platform.machine()
+ /domain[@type='kvm']/emulator" % arch
res = xpath_get_text(xml, expr)
location = res[0]
except Exception, e:
diff --git a/src/kimchi/osinfo.py b/src/kimchi/osinfo.py
index 0e16b50..d13dd92 100644
--- a/src/kimchi/osinfo.py
+++ b/src/kimchi/osinfo.py
@@ -29,7 +29,8 @@ from kimchi.config import paths
SUPPORTED_ARCHS = {'x86': ('i386', 'i686', 'x86_64'),
- 'power': ('ppc', 'ppc64')}
+ 'power': ('ppc', 'ppc64'),
+ 'ppc64le':('ppc64le')}
common_spec = {'cpus': 1, 'memory': 1024, 'disks': [{'index': 0, 'size': 10}],
@@ -47,11 +48,28 @@ template_specs = {'x86': {'old': dict(common_spec, disk_bus='ide',
'power': {'old': dict(common_spec, disk_bus='scsi',
nic_model='spapr-vlan',
cdrom_bus='scsi',
+ kbd_type="kbd",
kbd_bus='usb', mouse_bus='usb',
tablet_bus='usb', memory=1280),
'modern': dict(common_spec, disk_bus='virtio',
nic_model='virtio',
- cdrom_bus='scsi', kbd_bus='usb',
+ cdrom_bus='scsi',
+ kbd_bus='usb',
+ kbd_type="kbd",
+ mouse_bus='usb', tablet_bus='usb',
+ memory=1280)},
+ 'ppc64le': {'old': dict(common_spec, disk_bus='virtio',
+ nic_model='virtio',
+ cdrom_bus='scsi',
+ kbd_bus='usb',
+ kbd_type="keyboard",
+ mouse_bus='usb', tablet_bus='usb',
+ memory=1280),
+ 'modern': dict(common_spec, disk_bus='virtio',
+ nic_model='virtio',
+ cdrom_bus='scsi',
+ kbd_bus='usb',
+ kbd_type="keyboard",
mouse_bus='usb', tablet_bus='usb',
memory=1280)}}
@@ -63,6 +81,10 @@ modern_version_bases = {'x86': {'debian': '6.0', 'ubuntu': '7.10',
'power': {'rhel': '6.5', 'fedora': '19',
'ubuntu': '14.04',
'opensuse': '13.1',
+ 'sles': '11sp3'},
+ 'ppc64le': {'rhel': '6.5', 'fedora': '19',
+ 'ubuntu': '14.04',
+ 'opensuse': '13.1',
'sles': '11sp3'}}
@@ -94,6 +116,10 @@ def lookup(distro, version):
params['os_version'] = version
arch = _get_arch()
+ # set up arch to ppc64 instead of ppc64le due to libvirt compatibility
+ if params["arch"] == "ppc64le":
+ params["arch"] = "ppc64"
+
if distro in modern_version_bases[arch]:
if LooseVersion(version) >= LooseVersion(
modern_version_bases[arch][distro]):
diff --git a/src/kimchi/vmtemplate.py b/src/kimchi/vmtemplate.py
index e41a959..0a3f8ea 100644
--- a/src/kimchi/vmtemplate.py
+++ b/src/kimchi/vmtemplate.py
@@ -245,9 +245,11 @@ class VMTemplate(object):
mouse = """
<input type='mouse' bus='%(mouse_bus)s'/>
"""
+
keyboard = """
- <input type='kbd' bus='%(kbd_bus)s'> </input>
+ <input type='%(kbd_type)s' bus='%(kbd_bus)s'> </input>
"""
+
tablet = """
<input type='tablet' bus='%(kbd_bus)s'> </input>
"""
--
1.8.3.1
9 years, 11 months
[PATCH] Extend support to ppc64le
by Rodrigo Trujillo
This patch includes the tag "ppc64le" in some architecture checkings to
allow Kimchi recognize hosts that are running PowerPC 64 Little Endian
arch.
Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo(a)linux.vnet.ibm.com>
---
src/kimchi/distroloader.py | 3 ++-
src/kimchi/osinfo.py | 2 +-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/kimchi/distroloader.py b/src/kimchi/distroloader.py
index 64505f4..5e56999 100644
--- a/src/kimchi/distroloader.py
+++ b/src/kimchi/distroloader.py
@@ -30,7 +30,8 @@ from kimchi.utils import kimchi_log
ARCHS = {'x86_64': ['x86_64', 'amd64', 'i686', 'x86', 'i386'],
'amd64': ['x86_64', 'amd64', 'i686', 'x86', 'i386'],
- 'ppc64': ['ppc', 'ppc64']}
+ 'ppc64': ['ppc', 'ppc64'],
+ 'ppc64le': ['ppc64', 'ppc64le']}
class DistroLoader(object):
diff --git a/src/kimchi/osinfo.py b/src/kimchi/osinfo.py
index 0e16b50..b4cefd7 100644
--- a/src/kimchi/osinfo.py
+++ b/src/kimchi/osinfo.py
@@ -29,7 +29,7 @@ from kimchi.config import paths
SUPPORTED_ARCHS = {'x86': ('i386', 'i686', 'x86_64'),
- 'power': ('ppc', 'ppc64')}
+ 'power': ('ppc', 'ppc64', 'ppc64le')}
common_spec = {'cpus': 1, 'memory': 1024, 'disks': [{'index': 0, 'size': 10}],
--
1.9.3
9 years, 11 months
[PATCH 0/8 V2] Storage pool tests and bug fixes
by Aline Manera
v1 -> v2:
- Add test case to extend logical pool when it is active
Aline Manera (8):
Rename test_storagepool.py to test_storagepoolxml.py
Storage Pools: Update docs/API.md
Storage pool: Fix encoding/decoding while dealing with storage pools
MockModel: Override storage pool validation
MockModel: Add mock code to list partitions to /host/partitions API
MockModel: Extend logical storage pool
MockModel: Fix devices filter
Storage pool tests
docs/API.md | 5 +-
src/kimchi/mockmodel.py | 45 ++++++++++
src/kimchi/model/storagepools.py | 6 +-
tests/test_mock_storagepool.py | 141 ++++++++++++++++++++++++++++++++
tests/test_model.py | 70 ----------------
tests/test_model_storagepool.py | 104 +++++++++++++++++++++++
tests/test_rest.py | 120 +--------------------------
tests/test_storagepool.py | 172 ---------------------------------------
tests/test_storagepoolxml.py | 171 ++++++++++++++++++++++++++++++++++++++
tests/utils.py | 11 +++
10 files changed, 481 insertions(+), 364 deletions(-)
create mode 100644 tests/test_mock_storagepool.py
create mode 100644 tests/test_model_storagepool.py
delete mode 100644 tests/test_storagepool.py
create mode 100644 tests/test_storagepoolxml.py
--
2.1.0
9 years, 11 months
[PATCH] Supports Kimchi on LE systems v2
by Ramon Medeiros
Changes
v2:
Improve coding by removing duplicated actions
Fix typo
On LE systems, some changes on libvirt xml is needed. The input device
for keyboard is not kbd anymore, the architecture is still ppc64 and the
qemu binary is not qemu-kvm as in the other archs.
Signed-off-by: Ramon Medeiros <ramonn(a)linux.vnet.ibm.com>
---
src/kimchi/config.py.in | 11 +++++++++--
src/kimchi/osinfo.py | 6 +++++-
src/kimchi/vmtemplate.py | 11 +++++++++--
3 files changed, 23 insertions(+), 5 deletions(-)
diff --git a/src/kimchi/config.py.in b/src/kimchi/config.py.in
index 83a5dd0..d5e0f6c 100644
--- a/src/kimchi/config.py.in
+++ b/src/kimchi/config.py.in
@@ -68,12 +68,19 @@ def find_qemu_binary(find_emulator=False):
raise Exception("Unable to get qemu binary location: %s" % e)
try:
xml = connect.getCapabilities()
+
+ # On Little Endian system, the qemu binary is
+ # qemu-system-ppc64, not qemu-system-ppc64le as expected
+ arch = platform.machine()
+ if arch == "ppc64le":
+ arch = "ppc64"
+
if find_emulator:
expr = "/capabilities/guest/arch[@name='%s']\
- /emulator" % platform.machine()
+ /emulator" % arch
else:
expr = "/capabilities/guest/arch[@name='%s']\
- /domain[@type='kvm']/emulator" % platform.machine()
+ /domain[@type='kvm']/emulator" % arch
res = xpath_get_text(xml, expr)
location = res[0]
except Exception, e:
diff --git a/src/kimchi/osinfo.py b/src/kimchi/osinfo.py
index 0e16b50..9bfd148 100644
--- a/src/kimchi/osinfo.py
+++ b/src/kimchi/osinfo.py
@@ -29,7 +29,7 @@ from kimchi.config import paths
SUPPORTED_ARCHS = {'x86': ('i386', 'i686', 'x86_64'),
- 'power': ('ppc', 'ppc64')}
+ 'power': ('ppc', 'ppc64', 'ppc64le')}
common_spec = {'cpus': 1, 'memory': 1024, 'disks': [{'index': 0, 'size': 10}],
@@ -94,6 +94,10 @@ def lookup(distro, version):
params['os_version'] = version
arch = _get_arch()
+ # set up arch to ppc64 instead of ppc64le due to libvirt compatibility
+ if params["arch"] == "ppc64le":
+ params["arch"] = "ppc64"
+
if distro in modern_version_bases[arch]:
if LooseVersion(version) >= LooseVersion(
modern_version_bases[arch][distro]):
diff --git a/src/kimchi/vmtemplate.py b/src/kimchi/vmtemplate.py
index e41a959..bcfbab6 100644
--- a/src/kimchi/vmtemplate.py
+++ b/src/kimchi/vmtemplate.py
@@ -245,9 +245,16 @@ class VMTemplate(object):
mouse = """
<input type='mouse' bus='%(mouse_bus)s'/>
"""
+
+ # PPC64EL does not uses kbd
+ self.info["kbd_type"] = "kbd"
+ if os.uname()[4] == "ppc64le":
+ self.info["kbd_type"] = "keyboard"
+
keyboard = """
- <input type='kbd' bus='%(kbd_bus)s'> </input>
- """
+ <input type='%(kbd_type)s' bus='%(kbd_bus)s'> </input>
+ """
+
tablet = """
<input type='tablet' bus='%(kbd_bus)s'> </input>
"""
--
1.8.3.1
9 years, 11 months
[PATCH] UI: Adding new checkbox widget to new kimchi UI
by Wen Wang
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/checkbox-flat.css | 25 ++++++++++
ui/js/widgets/checkbox-flat.js | 86 ++++++++++++++++++++++++++++++++++
2 files changed, 111 insertions(+)
create mode 100644 ui/css/theme-default/checkbox-flat.css
create mode 100644 ui/js/widgets/checkbox-flat.js
diff --git a/ui/css/theme-default/checkbox-flat.css b/ui/css/theme-default/checkbox-flat.css
new file mode 100644
index 0000000..b8712b3
--- /dev/null
+++ b/ui/css/theme-default/checkbox-flat.css
@@ -0,0 +1,25 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+ .checkbox-item {
+ cursor: pointer;
+ }
+
+ .checkbox-inline {
+ display: inline-block;
+ }
\ No newline at end of file
diff --git a/ui/js/widgets/checkbox-flat.js b/ui/js/widgets/checkbox-flat.js
new file mode 100644
index 0000000..877a52d
--- /dev/null
+++ b/ui/js/widgets/checkbox-flat.js
@@ -0,0 +1,86 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+
+// How to use:
+// $(".selector").checkboxFlat({
+// id: "t", //Checkbox base id.
+// name: "test", //Checkbox name.
+// content: ["apple", "banana", "orange", "cherry"], //Contents of the checkbox set.
+// checked: [1,3] //Set the checked item, which starts with number 1.
+// });
+// $(".selector").click(function() {
+// console.log($(".selector").checkboxFlat("value")); //Get value of the checked checkbox.
+// });
+
+ (function($) {
+ $.widget("kimchi.checkboxFlat", {
+ options: {
+ id: "",
+ name: "",
+ content: [],
+ checked: []
+ },
+
+ _create: function() {
+ var that = this;
+ var idBase = that.options.id;
+ var name = that.options.name;
+ var checked = that.options.checked;
+ var content = that.options.content;
+ var html = "";
+ for (var i=1;i<content.length+1;i++) {
+ if($.inArray(i,checked) < 0) {
+ html += "<div class='checkbox-item checkbox-inline icon-check-empty-1' id='" + idBase + i + "' name='" + name + "'></div>" +
+ "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>";
+ } else {
+ html += "<div class='checkbox-item checkbox-inline icon-ok-squared' id='" + idBase + i + "' name='" + name + "'></div>" +
+ "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>";
+ }
+ }
+ $(html).appendTo(that.element);
+ $(".checkbox-item").on("click", function() {
+ var tickID = $(this).attr("id");
+ var tick = tickID.substring(idBase.length,tickID.length);
+ if($(this).hasClass("icon-check-empty-1")) {
+ $(this).removeClass("icon-check-empty-1");
+ $(this).addClass("icon-ok-squared");
+ checked.push(Number(tick));
+ } else {
+ $(this).removeClass("icon-ok-squared");
+ $(this).addClass("icon-check-empty-1");
+ checked.splice($.inArray(Number(tick),checked),1);
+ }
+ });
+ },
+
+ value: function() {
+ var value = new Array();
+ var vContent = this.options.content;
+ var vChencked = this.options.checked;
+ for(var i=0;i<vChencked.length;i++) {
+ value.push(vContent[vChencked[i]-1]);
+ }
+ return value;
+ },
+
+ _destroy: function() {
+ this.element.remove();
+ }
+ });
+ })(jQuery);
\ No newline at end of file
--
2.1.0
9 years, 11 months
[PATCH] UI Add widget button to new kimchi UI
by Wen Wang
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/button-flat.css | 135 +++++++++++
ui/js/widgets/button-flat.js | 419 +++++++++++++++++++++++++++++++++++
2 files changed, 554 insertions(+)
create mode 100755 ui/css/theme-default/button-flat.css
create mode 100755 ui/js/widgets/button-flat.js
diff --git a/ui/css/theme-default/button-flat.css b/ui/css/theme-default/button-flat.css
new file mode 100755
index 0000000..082c412
--- /dev/null
+++ b/ui/css/theme-default/button-flat.css
@@ -0,0 +1,135 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+.ui-button {
+ display: inline-block;
+ position: relative;
+ color: #FFFFFF;
+ padding: 0;
+ line-height: normal;
+ margin-right: .1em;
+ cursor: pointer;
+ vertical-align: middle;
+ text-align: center;
+ border-radius: 3px;
+ border: 1px none;
+ background: #4e4d4f;
+ font-weight: normal;
+ overflow: visible; /* removes extra width in IE */
+}
+.ui-button:hover{
+ background: #000000;
+ font-weight: normal;
+}
+.ui-button:active {
+ background: #4e4d4f;
+}
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+ text-decoration: none;
+}
+
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+ width: 2.2em;
+}
+/* button elements seem to need a little more width */
+button.ui-button-icon-only {
+ width: 2.4em;
+}
+.ui-button-icons-only {
+ width: 3.4em;
+}
+button.ui-button-icons-only {
+ width: 3.7em;
+}
+
+/* button text element */
+.ui-button .ui-button-text {
+ display: block;
+ line-height: normal;
+}
+.ui-button-text-only .ui-button-text {
+ padding: .4em 1em;
+}
+.ui-button-icon-only .ui-button-text,
+.ui-button-icons-only .ui-button-text {
+ padding: .4em;
+ text-indent: -9999999px;
+}
+.ui-button-text-icon-primary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+ padding: .4em 1em .4em 2.1em;
+}
+.ui-button-text-icon-secondary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+ padding: .4em 2.1em .4em 1em;
+}
+.ui-button-text-icons .ui-button-text {
+ padding-left: 2.1em;
+ padding-right: 2.1em;
+}
+/* no icon support for input elements, provide padding by default */
+input.ui-button {
+ padding: .4em 1em;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+ position: absolute;
+ top: 50%;
+ margin-top: -8px;
+}
+.ui-button-icon-only .ui-icon {
+ left: 50%;
+ margin-left: -8px;
+}
+.ui-button-text-icon-primary .ui-button-icon-primary,
+.ui-button-text-icons .ui-button-icon-primary,
+.ui-button-icons-only .ui-button-icon-primary {
+ left: .5em;
+}
+.ui-button-text-icon-secondary .ui-button-icon-secondary,
+.ui-button-text-icons .ui-button-icon-secondary,
+.ui-button-icons-only .ui-button-icon-secondary {
+ right: .5em;
+}
+
+/* button sets */
+.ui-buttonset {
+ margin-right: 7px;
+}
+.ui-buttonset .ui-button {
+ margin-left: 0;
+ margin-right: -.3em;
+}
+
+/* workarounds */
+/* reset extra padding in Firefox, see h5bp.com/l */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
diff --git a/ui/js/widgets/button-flat.js b/ui/js/widgets/button-flat.js
new file mode 100755
index 0000000..38f8056
--- /dev/null
+++ b/ui/js/widgets/button-flat.js
@@ -0,0 +1,419 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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( factory ) {
+ if ( typeof define === "function" && define.amd ) {
+
+ // AMD. Register as an anonymous module.
+ define([
+ "jquery",
+ "./core",
+ "./widget"
+ ], factory );
+ } else {
+
+ // Browser globals
+ factory( jQuery );
+ }
+}(function( $ ) {
+
+var lastActive,
+ baseClasses = "ui-button ui-widget",
+ typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
+ formResetHandler = function() {
+ var form = $( this );
+ setTimeout(function() {
+ form.find( ":ui-button" ).button( "refresh" );
+ }, 1 );
+ },
+ radioGroup = function( radio ) {
+ var name = radio.name,
+ form = radio.form,
+ radios = $( [] );
+ if ( name ) {
+ name = name.replace( /'/g, "\\'" );
+ if ( form ) {
+ radios = $( form ).find( "[name='" + name + "'][type=radio]" );
+ } else {
+ radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument )
+ .filter(function() {
+ return !this.form;
+ });
+ }
+ }
+ return radios;
+ };
+
+$.widget( "kimchi.buttonFlat", {
+ version: "@VERSION",
+ defaultElement: "<button>",
+ options: {
+ disabled: null,
+ text: true,
+ label: null,
+ icons: {
+ primary: null,
+ secondary: null
+ }
+ },
+ _create: function() {
+ this.element.closest( "form" )
+ .unbind( "reset" + this.eventNamespace )
+ .bind( "reset" + this.eventNamespace, formResetHandler );
+
+ if ( typeof this.options.disabled !== "boolean" ) {
+ this.options.disabled = !!this.element.prop( "disabled" );
+ } else {
+ this.element.prop( "disabled", this.options.disabled );
+ }
+
+ this._determineButtonType();
+ this.hasTitle = !!this.buttonElement.attr( "title" );
+
+ var that = this,
+ options = this.options,
+ toggleButton = this.type === "checkbox" || this.type === "radio",
+ activeClass = !toggleButton ? "ui-state-active" : "";
+
+ if ( options.label === null ) {
+ options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
+ }
+
+ this._hoverable( this.buttonElement );
+
+ this.buttonElement
+ .addClass( baseClasses )
+ .attr( "role", "button" )
+ .bind( "mouseenter" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return;
+ }
+ if ( this === lastActive ) {
+ $( this ).addClass( "ui-state-active" );
+ }
+ })
+ .bind( "mouseleave" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return;
+ }
+ $( this ).removeClass( activeClass );
+ })
+ .bind( "click" + this.eventNamespace, function( event ) {
+ if ( options.disabled ) {
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ }
+ });
+
+ // Can't use _focusable() because the element that receives focus
+ // and the element that gets the ui-state-focus class are different
+ this._on({
+ focus: function() {
+ this.buttonElement.addClass( "ui-state-focus" );
+ },
+ blur: function() {
+ this.buttonElement.removeClass( "ui-state-focus" );
+ }
+ });
+
+ if ( toggleButton ) {
+ this.element.bind( "change" + this.eventNamespace, function() {
+ that.refresh();
+ });
+ }
+
+ if ( this.type === "checkbox" ) {
+ this.buttonElement.bind( "click" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return false;
+ }
+ });
+ } else if ( this.type === "radio" ) {
+ this.buttonElement.bind( "click" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return false;
+ }
+ $( this ).addClass( "ui-state-active" );
+ that.buttonElement.attr( "aria-pressed", "true" );
+
+ var radio = that.element[ 0 ];
+ radioGroup( radio )
+ .not( radio )
+ .map(function() {
+ return $( this ).button( "widget" )[ 0 ];
+ })
+ .removeClass( "ui-state-active" )
+ .attr( "aria-pressed", "false" );
+ });
+ } else {
+ this.buttonElement
+ .bind( "mousedown" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return false;
+ }
+ $( this ).addClass( "ui-state-active" );
+ lastActive = this;
+ that.document.one( "mouseup", function() {
+ lastActive = null;
+ });
+ })
+ .bind( "mouseup" + this.eventNamespace, function() {
+ if ( options.disabled ) {
+ return false;
+ }
+ $( this ).removeClass( "ui-state-active" );
+ })
+ .bind( "keydown" + this.eventNamespace, function(event) {
+ if ( options.disabled ) {
+ return false;
+ }
+ if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
+ $( this ).addClass( "ui-state-active" );
+ }
+ })
+ // see #8559, we bind to blur here in case the button element loses
+ // focus between keydown and keyup, it would be left in an "active" state
+ .bind( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
+ $( this ).removeClass( "ui-state-active" );
+ });
+
+ if ( this.buttonElement.is("a") ) {
+ this.buttonElement.keyup(function(event) {
+ if ( event.keyCode === $.ui.keyCode.SPACE ) {
+ // TODO pass through original event correctly (just as 2nd argument doesn't work)
+ $( this ).click();
+ }
+ });
+ }
+ }
+
+ this._setOption( "disabled", options.disabled );
+ this._resetButton();
+ },
+
+ _determineButtonType: function() {
+ var ancestor, labelSelector, checked;
+
+ if ( this.element.is("[type=checkbox]") ) {
+ this.type = "checkbox";
+ } else if ( this.element.is("[type=radio]") ) {
+ this.type = "radio";
+ } else if ( this.element.is("input") ) {
+ this.type = "input";
+ } else {
+ this.type = "button";
+ }
+
+ if ( this.type === "checkbox" || this.type === "radio" ) {
+ // we don't search against the document in case the element
+ // is disconnected from the DOM
+ ancestor = this.element.parents().last();
+ labelSelector = "label[for='" + this.element.attr("id") + "']";
+ this.buttonElement = ancestor.find( labelSelector );
+ if ( !this.buttonElement.length ) {
+ ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
+ this.buttonElement = ancestor.filter( labelSelector );
+ if ( !this.buttonElement.length ) {
+ this.buttonElement = ancestor.find( labelSelector );
+ }
+ }
+ this.element.addClass( "ui-helper-hidden-accessible" );
+
+ checked = this.element.is( ":checked" );
+ if ( checked ) {
+ this.buttonElement.addClass( "ui-state-active" );
+ }
+ this.buttonElement.prop( "aria-pressed", checked );
+ } else {
+ this.buttonElement = this.element;
+ }
+ },
+
+ widget: function() {
+ return this.buttonElement;
+ },
+
+ _destroy: function() {
+ this.element
+ .removeClass( "ui-helper-hidden-accessible" );
+ this.buttonElement
+ .removeClass( baseClasses + " ui-state-active " + typeClasses )
+ .removeAttr( "role" )
+ .removeAttr( "aria-pressed" )
+ .html( this.buttonElement.find(".ui-button-text").html() );
+
+ if ( !this.hasTitle ) {
+ this.buttonElement.removeAttr( "title" );
+ }
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+ if ( key === "disabled" ) {
+ this.widget().toggleClass( "ui-state-disabled", !!value );
+ this.element.prop( "disabled", !!value );
+ if ( value ) {
+ if ( this.type === "checkbox" || this.type === "radio" ) {
+ this.buttonElement.removeClass( "ui-state-focus" );
+ } else {
+ this.buttonElement.removeClass( "ui-state-focus ui-state-active" );
+ }
+ }
+ return;
+ }
+ this._resetButton();
+ },
+
+ refresh: function() {
+ //See #8237 & #8828
+ var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
+
+ if ( isDisabled !== this.options.disabled ) {
+ this._setOption( "disabled", isDisabled );
+ }
+ if ( this.type === "radio" ) {
+ radioGroup( this.element[0] ).each(function() {
+ if ( $( this ).is( ":checked" ) ) {
+ $( this ).button( "widget" )
+ .addClass( "ui-state-active" )
+ .attr( "aria-pressed", "true" );
+ } else {
+ $( this ).button( "widget" )
+ .removeClass( "ui-state-active" )
+ .attr( "aria-pressed", "false" );
+ }
+ });
+ } else if ( this.type === "checkbox" ) {
+ if ( this.element.is( ":checked" ) ) {
+ this.buttonElement
+ .addClass( "ui-state-active" )
+ .attr( "aria-pressed", "true" );
+ } else {
+ this.buttonElement
+ .removeClass( "ui-state-active" )
+ .attr( "aria-pressed", "false" );
+ }
+ }
+ },
+
+ _resetButton: function() {
+ if ( this.type === "input" ) {
+ if ( this.options.label ) {
+ this.element.val( this.options.label );
+ }
+ return;
+ }
+ var buttonElement = this.buttonElement.removeClass( typeClasses ),
+ buttonText = $( "<span></span>", this.document[0] )
+ .addClass( "ui-button-text" )
+ .html( this.options.label )
+ .appendTo( buttonElement.empty() )
+ .text(),
+ icons = this.options.icons,
+ multipleIcons = icons.primary && icons.secondary,
+ buttonClasses = [];
+
+ if ( icons.primary || icons.secondary ) {
+ if ( this.options.text ) {
+ buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
+ }
+
+ if ( icons.primary ) {
+ buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
+ }
+
+ if ( icons.secondary ) {
+ buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
+ }
+
+ if ( !this.options.text ) {
+ buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
+
+ if ( !this.hasTitle ) {
+ buttonElement.attr( "title", $.trim( buttonText ) );
+ }
+ }
+ } else {
+ buttonClasses.push( "ui-button-text-only" );
+ }
+ buttonElement.addClass( buttonClasses.join( " " ) );
+ }
+});
+
+$.widget( "ui.buttonset", {
+ version: "@VERSION",
+ options: {
+ items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
+ },
+
+ _create: function() {
+ this.element.addClass( "ui-buttonset" );
+ },
+
+ _init: function() {
+ this.refresh();
+ },
+
+ _setOption: function( key, value ) {
+ if ( key === "disabled" ) {
+ this.buttons.button( "option", key, value );
+ }
+
+ this._super( key, value );
+ },
+
+ refresh: function() {
+ var rtl = this.element.css( "direction" ) === "rtl",
+ allButtons = this.element.find( this.options.items ),
+ existingButtons = allButtons.filter( ":ui-button" );
+
+ // Initialize new buttons
+ allButtons.not( ":ui-button" ).button();
+
+ // Refresh existing buttons
+ existingButtons.button( "refresh" );
+
+ this.buttons = allButtons
+ .map(function() {
+ return $( this ).button( "widget" )[ 0 ];
+ })
+ .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
+ .filter( ":first" )
+ .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
+ .end()
+ .filter( ":last" )
+ .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
+ .end()
+ .end();
+ },
+
+ _destroy: function() {
+ this.element.removeClass( "ui-buttonset" );
+ this.buttons
+ .map(function() {
+ return $( this ).button( "widget" )[ 0 ];
+ })
+ .removeClass( "ui-corner-left ui-corner-right" )
+ .end()
+ .button( "destroy" );
+ }
+});
+
+return $.ui.button;
+
+}));
--
2.1.0
9 years, 11 months
[PATCH] UI; Add widget of dialog
by Wen Wang
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/dialog-flat.css | 67 +++++++++++++++++++
ui/js/widgets/dialog-flat.js | 120 +++++++++++++++++++++++++++++++++++
2 files changed, 187 insertions(+)
create mode 100644 ui/css/theme-default/dialog-flat.css
create mode 100644 ui/js/widgets/dialog-flat.js
diff --git a/ui/css/theme-default/dialog-flat.css b/ui/css/theme-default/dialog-flat.css
new file mode 100644
index 0000000..fafe5b0
--- /dev/null
+++ b/ui/css/theme-default/dialog-flat.css
@@ -0,0 +1,67 @@
+/*
+* Project Kimchi
+*
+* Copyright IBM, Corp. 2015
+*
+* 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.
+*/
+
+.dialog-border-grey {
+ background-clip: border-box;
+ border: 6px solid rgba(170,170,170,0.3);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ border-radius: 5px;
+}
+
+.dialog-container {
+ border: 3px solid #999999;
+ background: white;
+}
+
+.dialog-container .dialog-title {
+ height: 60px;
+ padding: 20px 0 20px 20px;
+ float: left;
+}
+
+.dialog-container .dialog-body {
+ position: relative;
+}
+
+.dialog-container .dialog-footer {
+ height: 50px;
+ background-color: #008ABF;
+}
+
+.dialog-container .dialog-footer .dialog-button {
+ display: inline-block;
+ background-color: white;
+ width: 75px;
+ height: 30px;
+ line-height: 30px;
+ position: relative;
+ margin-left: 10px;
+ margin-top: 10px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.dialog-container .dialog-footer .dialog-button:hover{
+ background-color: #EEEEEE;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/js/widgets/dialog-flat.js b/ui/js/widgets/dialog-flat.js
new file mode 100644
index 0000000..44f5432
--- /dev/null
+++ b/ui/js/widgets/dialog-flat.js
@@ -0,0 +1,120 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+/* How to use:
+ * $(".selector").dialogFlat({
+ * title: "Demo", //Title of the dialog.
+ * confirmText: "Ok", //Text of the confirm button, "Ok" is the default value.
+ * cancelText: "Cancel", //Text of the cancel button.
+ * width: "300", //Width of the dialog, "px" is the default unit.
+ * height: "500", //Height of the dialog, "px" is the default unit.
+ * confirmFunc: function() {
+ * //Function after confirm
+ * }
+ * });
+ */
+
+(function( $ ) {
+ $.widget("kimchi.dialogFlat", {
+ options: {
+ title: "",
+ autoOpen: true,
+ confirmText: "Ok",
+ cancelText: "Cancel",
+ confirmFunc: null,
+ height: "150",
+ width: "150"
+ },
+
+ _create: function() {
+ var that = this;
+ var w = that.options.width;
+ var h = that.options.height;
+ $(".body").addClass("style:'opacity:0.5'");
+ that._open();
+ that._setSize(w, h);
+ $(".dialog-container .dialog-cancel").on("click", that._destroy);
+ $(".dialog-container .dialog-okay").on("click", function() {
+ that._trigger("confirmFunc");
+ that._destroy();
+ });
+ },
+
+ _open: function() {
+ var cfmTxt = this.options.confirmText;
+ var celTxt = this.options.cancelText;
+ var titleTxt = this.options.title;
+ var html =
+ "<div id='dialog-overlay'></div>" +
+ "<div class='dialog-border-grey'>" +
+ "<div class='dialog-container'>" +
+ "<div class='dialog-title h1 dark-gray'>" + titleTxt + "</div>" +
+ "<div class='dialog-body'>dafafdafdas</div>" +
+ "<div class='dialog-footer'>" +
+ "<div class='dialog-button dialog-okay'>" + cfmTxt + "</div>" +
+ "<div class='dialog-button dialog-cancel'>" + celTxt + "</div>" +
+ "</div>" +
+ "</div>" +
+ "</div>";
+ if (this.options.autoOpen) {
+ $(html).appendTo($("body"));
+ var pageWidth = window.screen.width;
+ var pageHeight = window.screen.height;
+ var pageLeft = document.screenLeft
+ var pageTop = document.screenTop;
+ var topOffset = "-" + pageHeight + "px";
+ $("#dialog-overlay").css({
+ "opacity": "0.5",
+ "Left": pageLeft,
+ "Top": pageTop,
+ "background-color": "white",
+ "width": pageWidth,
+ "height": pageHeight,
+ "margin-top": topOffset,
+ "overflow": "hidden"
+ });
+ }
+ },
+
+ _setSize: function(width, height) {
+ var wid = width + "px";
+ var hei = height + "px";
+ var cHeight = (height - 4) + "px";
+ var bHeight = (height - 54) + "px";
+ var tWidth = (width - 25) + "px";
+ $(".dialog-border-grey").css({
+ "width": wid,
+ "height": hei
+ });
+ $(".dialog-container").css({
+ "height": cHeight
+ });
+ $(".dialog-container .dialog-body").css({
+ "height": bHeight
+ });
+ $(".dialog-container .dialog-title").css({
+ "width": tWidth
+ });
+ },
+
+ _destroy: function() {
+ $(".dialog-border-grey").remove();
+ $("#dialog-overlay").remove();
+ }
+ });
+})(jQuery);
\ No newline at end of file
--
2.1.0
9 years, 11 months