From 77be06d73d14f849433a5ba5839b44046e1d7880 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Wed, 17 Sep 2014 15:56:59 +0200
Subject: [PATCH] FileInput: add label option, update CSS

---
 source/Ox.UI/css/Ox.UI.css        |  4 ++++
 source/Ox.UI/js/Form/FileInput.js | 30 ++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 4703ef6f..97ee4442 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -893,6 +893,7 @@ OxFileInput
 --------------------------------------------------------------------------------
 */
 .OxFileInput > .OxBar {
+    float: left;
     border-width: 1px;
     border-style: solid;
     border-radius: 8px;
@@ -910,6 +911,9 @@ OxFileInput
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
 }
+.OxFileInput > .OxLabel {
+    float: left;
+}
 /*
 --------------------------------------------------------------------------------
 OxForm
diff --git a/source/Ox.UI/js/Form/FileInput.js b/source/Ox.UI/js/Form/FileInput.js
index af320c30..a7e01681 100644
--- a/source/Ox.UI/js/Form/FileInput.js
+++ b/source/Ox.UI/js/Form/FileInput.js
@@ -20,6 +20,8 @@ Ox.FileInput = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             disabled: false,
+            label: '',
+            labelWidth: 128,
             maxFiles: -1,
             maxLines: -1,
             maxSize: -1,
@@ -40,10 +42,20 @@ Ox.FileInput = function(options, self) {
     self.multiple = self.options.maxFiles != 1;
     self.size = getSize();
 
+    if (self.options.label) {
+        self.$label = Ox.Label({
+            overlap: 'right',
+            textAlign: 'right',
+            title: self.options.label,
+            width: self.options.labelWidth
+        })
+        .appendTo(that);
+    }
+
     self.$bar = Ox.Bar({size: 14})
         .css(
             Ox.extend({
-                width: self.options.width - 2 + 'px'
+                width: getWidth() - 2 + 'px'
             }, self.multiple && self.options.value.length ? {
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0
@@ -54,8 +66,8 @@ Ox.FileInput = function(options, self) {
     self.$title = $('<div>')
         .css({
             float: 'left',
-            width: self.options.width - 102 + 'px',
-            paddingLeft: '4px',
+            width: getWidth() - 104 + 'px',
+            paddingLeft: '6px',
             overflow: 'hidden',
             textOverflow: 'ellipsis'
         })
@@ -102,7 +114,7 @@ Ox.FileInput = function(options, self) {
         self.$files = $('<div>')
             .addClass('OxFiles')
             .css({
-                width: self.options.width - 2 + 'px',
+                width: getWidth() - 2 + 'px',
                 height: getHeight()
             })
             .appendTo(that);
@@ -112,7 +124,7 @@ Ox.FileInput = function(options, self) {
                     {
                         id: 'name',
                         visible: true,
-                        width: self.options.width - 94
+                        width: getWidth() - 94
                     },
                     {
                         align: 'right',
@@ -152,7 +164,7 @@ Ox.FileInput = function(options, self) {
             .css({
                 left: 0,
                 top: 0,
-                width: self.options.width - 2 + 'px',
+                width: getWidth() - 2 + 'px',
                 height: '64px'
             })
             .bindEvent({
@@ -263,6 +275,12 @@ Ox.FileInput = function(options, self) {
             : self.options.value[0].name;
     }
 
+    function getWidth() {
+        return self.options.width - (
+            self.options.label ? self.options.labelWidth : 0
+        );
+    }
+
     function removeFiles(ids) {
         self.options.value = self.options.value.filter(function(v, i) {
             return ids.indexOf(i) == -1;