Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fixed problems in grid column resizing

  • Loading branch information...
commit 25fb15545a58ead88d60948e84bb364b25509db4 1 parent da8d042
@aaronj1335 aaronj1335 authored
View
93 src/widgets/form/forms.css
@@ -1,28 +1,7 @@
-/* @font: 11px Arial, Helvetica, clean-sans; */
-/* @color: #60676D; */
-/* @body-background: #F6F6F6; */
-/* @disabled-color: @color + #333; */
-/* @darker-color: @color - #333; */
-/* @invalid-color: #9B4C52; */
-/* @invalid-background: #FFF9FC; */
-/* @info-color: #2C739E; */
-/* @info-background: #D0E8F5; */
-/* @font: 11px Arial, Helvetica, clean-sans; */
-/* @color: #60676D; */
-/* @body-background: #F6F6F6; */
-/* @disabled-color: @color + #333; */
-/* @darker-color: @color - #333; */
-/* @invalid-color: #9B4C52; */
-/* @invalid-background: #FFF9FC; */
-/* @info-color: #2C739E; */
-/* @info-background: #D0E8F5; */
.std-box-shadow {
box-shadow: 1px 1px 1px 0 #dadada;
-moz-box-shadow: 1px 1px 1px 0 #dadada;
-webkit-box-shadow: 1px 1px 1px 0 #dadada;
- box-shadow: 1px 1px 1px 0 #dadada;
- -moz-box-shadow: 1px 1px 1px 0 #dadada;
- -webkit-box-shadow: 1px 1px 1px 0 #dadada;
}
button.formwidget {
border: 0;
@@ -41,18 +20,9 @@ button.formwidget.button {
background: #e5e5e5 linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
background: #e5e5e5 -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
background: #e5e5e5 -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
- background: #e5e5e5 linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
- background: #e5e5e5 -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
- background: #e5e5e5 -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #c3c3c3 100%);
box-shadow: 1px 1px 1px 0 #dadada;
-moz-box-shadow: 1px 1px 1px 0 #dadada;
-webkit-box-shadow: 1px 1px 1px 0 #dadada;
- box-shadow: 1px 1px 1px 0 #dadada;
- -moz-box-shadow: 1px 1px 1px 0 #dadada;
- -webkit-box-shadow: 1px 1px 1px 0 #dadada;
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -69,21 +39,12 @@ button.formwidget.button {
background: #c3cdd7 linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
background: #c3cdd7 -moz-linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
background: #c3cdd7 -webkit-linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
- background: #c3cdd7 linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
- background: #c3cdd7 -moz-linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
- background: #c3cdd7 -webkit-linear-gradient(top, #c3cdd7 0%, #bbc5cf 50%, #a1abb5 100%);
}
.button:active,
.button.active {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
- box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- background: #aab4be linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
- background: #aab4be -moz-linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
- background: #aab4be -webkit-linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
background: #aab4be linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
background: #aab4be -moz-linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
background: #aab4be -webkit-linear-gradient(top, #aab4be 0%, #bbc5cf 50%, #c3cdd7 100%);
@@ -92,19 +53,13 @@ button.formwidget.button {
.button.disabled:hover,
.button.disabled.hover,
button.button.formwidget.disabled {
- border: 1px solid #939aa0;
- color: #939aa0;
+ border: 1px solid #82898f;
+ color: #82898f;
cursor: default;
background-color: #e5e5e5;
background: #e5e5e5 linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
background: #e5e5e5 -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
background: #e5e5e5 -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
- background: #e5e5e5 linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
- background: #e5e5e5 -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
- background: #e5e5e5 -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 50%, #d4d4d4 100%);
- box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
@@ -124,12 +79,6 @@ select,
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- box-shadow: 1px 1px 1px 0 #dadada;
- -moz-box-shadow: 1px 1px 1px 0 #dadada;
- -webkit-box-shadow: 1px 1px 1px 0 #dadada;
box-shadow: 1px 1px 1px 0 #dadada;
-moz-box-shadow: 1px 1px 1px 0 #dadada;
-webkit-box-shadow: 1px 1px 1px 0 #dadada;
@@ -161,24 +110,21 @@ select.disabled:active,
.selectbox.disabled:hover,
.selectbox.disabled.active,
.selectbox.disabled:active {
- border: 1px solid #939aa0;
- color: #939aa0;
+ border: 1px solid #82898f;
+ color: #82898f;
cursor: default;
}
select.invalid,
.selectbox.invalid {
- border: 1px solid #9b4c52 !important;
- color: #9b4c52 !important;
- background-color: #fff9fc;
+ border: 1px solid #bb0000 !important;
+ color: #bb0000 !important;
+ background-color: #ffffff;
}
.selectbox.open {
border-bottom: 0;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
- border-radius: 4px 4px 0 0;
- -moz-border-radius: 4px 4px 0 0;
- -webkit-border-radius: 4px 4px 0 0;
}
select .menu,
.selectbox .menu {
@@ -186,9 +132,6 @@ select .menu,
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
- border-radius: 0 0 4px 4px;
- -moz-border-radius: 0 0 4px 4px;
- -webkit-border-radius: 0 0 4px 4px;
}
select,
select.selectbox {
@@ -203,9 +146,6 @@ select.selectbox.open {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
}
.textbox,
.textarea {
@@ -215,12 +155,6 @@ select.selectbox.open {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- box-shadow: 1px 1px 1px 0 #dadada;
- -moz-box-shadow: 1px 1px 1px 0 #dadada;
- -webkit-box-shadow: 1px 1px 1px 0 #dadada;
box-shadow: 1px 1px 1px 0 #dadada;
-moz-box-shadow: 1px 1px 1px 0 #dadada;
-webkit-box-shadow: 1px 1px 1px 0 #dadada;
@@ -243,18 +177,15 @@ select.selectbox.open {
}
.textbox.disabled,
.textarea.disabled {
- border: 1px solid #939aa0;
- color: #939aa0;
- box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
+ border: 1px solid #82898f;
+ color: #82898f;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.textbox.invalid,
.textarea.invalid {
- border: 1px solid #9b4c52 !important;
- color: #9b4c52 !important;
- background-color: #fff9fc;
+ border: 1px solid #bb0000 !important;
+ color: #bb0000 !important;
+ background-color: #ffffff;
}
View
11 src/widgets/form/forms.less
@@ -1,5 +1,12 @@
-@import '../theme.less';
-@import '../../vendor/gloss/style/globallib.less';
+@import '../../style/globallib.less';
+
+@border-color: #60676d;
+@disabled-color: @border-color + #222;
+@font-color: @border-color;
+@non-content-background-color: #f6f6f6;
+@invalid-color: #b00;
+@invalid-background-color: white;
+@font: 11px Arial, Helvetica, clean-sans;
@enabled-border: 1px solid @border-color;
@disabled-border: 1px solid @disabled-color;
View
17 src/widgets/grid.js
@@ -18,6 +18,9 @@ define([
this.$node.on('mousedown', function(evt) {
evt.preventDefault();
return false;
+ }).on('click', function(evt) {
+ evt.preventDefault();
+ return false;
});
}
}, {mixins: [Draggable]});
@@ -99,10 +102,16 @@ define([
}
$th.append($buffer);
resizeHandle = ResizeHandle().on('dragend', function(evt, pos) {
- var thPos = $th.offset(),
+ var total,
+ thPos = $th.offset(),
diff = pos.clientX - thPos.left;
if (diff > 0) {
+ self.$table.innerWidth(
+ _.reduce($th.siblings(), function(total, th) {
+ return total + $(th).outerWidth();
+ }, diff));
$th.outerWidth(diff);
+ self.$table.css({tableLayout: 'fixed'});
} else {
if (resizeHandle.node.style.removeProperty) {
resizeHandle.node.style.removeProperty('left');
@@ -114,7 +123,11 @@ define([
if (col.sortable) {
var $orderSpans = $(' <span class=asc-arrow>&#x25b2;</span><span class=desc-arrow>&#x25bc;</span>');
- col.resizable? $th.find('.buffer').append($orderSpans): $th.append($orderSpans);
+ if (col.resizable) {
+ $th.find('.buffer').append($orderSpans);
+ } else {
+ $th.append($orderSpans);
+ }
$th.addClass('sort-null');
$th.on('click', function(evt) {
if (col.order === 'asc') {
View
36 src/widgets/grid/grid.css
@@ -19,6 +19,7 @@
.grid table.grid thead tr th span.buffer {
margin: 0 5px;
display: block;
+ line-height: 28px;
}
.grid table.grid thead tr th span.help {
margin-left: 5px;
@@ -26,11 +27,10 @@
}
.grid table.grid thead tr th .resize-handle {
width: 5px;
- height: 100%;
cursor: col-resize;
border-left: 2px solid #60676d;
float: right;
- height: 12px;
+ height: 28px;
margin-right: -4px;
}
.grid table.grid thead tr th .resize-handle.dragging {
@@ -47,13 +47,6 @@ body.dragging-element .grid table.grid thead tr td {
-ms-user-select: none;
-o-user-select: none;
user-select: none;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
}
body.dragging-element .grid.standard table.grid tbody tr:hover,
body.dragging-element .grid.standard table.grid tbody tr:hover:nth-child(odd) {
@@ -62,6 +55,7 @@ body.dragging-element .grid.standard table.grid tbody tr:hover:nth-child(odd) {
.grid.standard table.grid {
width: 100%;
}
+.grid.standard table.grid thead th,
.grid.standard table.grid tbody tr {
height: 28px;
}
@@ -98,21 +92,19 @@ body.dragging-element .grid.standard table.grid tbody tr:hover:nth-child(odd) {
.fixed-height.grid {
overflow: auto;
}
-.grid table.grid thead th.sort-null .asc-arrow,
+.grid table.grid thead th.sort-null .asc-arrow,
.grid table.grid thead th.sort-null .desc-arrow {
- display: none;
- }
-
+ display: none;
+}
.grid table.grid thead th.sort-asc .asc-arrow {
- display: static;
- }
+ display: static;
+}
.grid table.grid thead th.sort-asc .desc-arrow {
- display: none;
- }
+ display: none;
+}
.grid table.grid thead th.sort-desc .desc-arrow {
- display: static;
- }
+ display: static;
+}
.grid table.grid thead th.sort-desc .asc-arrow {
- display: none;
- }
-
+ display: none;
+}
View
24 src/widgets/grid/grid.less
@@ -1,4 +1,4 @@
-@import '../../../../css/theme.less';
+@import '../../style/globallib.less';
@import './gridlib.less';
.grid table.grid tbody tr {
@@ -23,6 +23,7 @@
.grid table.grid thead tr th span.buffer {
margin: 0 @resize-handle-width;
display: block;
+ line-height: @standard-row-height;
}
.grid table.grid thead tr th span.help {
@@ -32,11 +33,10 @@
.grid table.grid thead tr th .resize-handle {
width: @resize-handle-width;
- height: 100%;
cursor: col-resize;
border-left: 2px solid @border-color;
float: right;
- height: 12px;
+ height: @standard-row-height;
margin-right: -(@resize-handle-width / 2 + 1.5)
}
@@ -64,6 +64,7 @@ body.dragging-element {
width: 100%;
}
+.grid.standard table.grid thead th,
.grid.standard table.grid tbody tr {
height: @standard-row-height;
}
@@ -106,3 +107,20 @@ body.dragging-element {
.fixed-height.grid {
overflow: auto;
}
+.grid table.grid thead th.sort-null .asc-arrow,
+.grid table.grid thead th.sort-null .desc-arrow {
+ display: none;
+}
+
+.grid table.grid thead th.sort-asc .asc-arrow {
+ display: static;
+}
+.grid table.grid thead th.sort-asc .desc-arrow {
+ display: none;
+}
+.grid table.grid thead th.sort-desc .desc-arrow {
+ display: static;
+}
+.grid table.grid thead th.sort-desc .asc-arrow {
+ display: none;
+}
View
9 src/widgets/grid/gridlib.css
@@ -1,12 +1,3 @@
-/* @font: 11px Arial, Helvetica, clean-sans; */
-/* @color: #60676D; */
-/* @body-background: #F6F6F6; */
-/* @disabled-color: @color + #333; */
-/* @darker-color: @color - #333; */
-/* @invalid-color: #9B4C52; */
-/* @invalid-background: #FFF9FC; */
-/* @info-color: #2C739E; */
-/* @info-background: #D0E8F5; */
.grid-table-tbody-tr-td-button {
height: 16px;
padding: 1px 10px;
View
9 src/widgets/grid/gridlib.less
@@ -1,9 +1,8 @@
-@import '../../../../css/theme.less';
-
@standard-row-height: 28px;
-@row-highlight-color: @dark-highlight-color;
-@row-background-color: @background-color;
-@odd-row-background-color: @non-content-background-color;
+@border-color: #60676d;
+@row-highlight-color: @border-color;
+@row-background-color: white;
+@odd-row-background-color: #f6f6f6;
.reversed () {
color: @row-background-color;
Please sign in to comment.
Something went wrong with that request. Please try again.