From c0d2ba5c261d829e6b8a72c09774e7e6eacc7946 Mon Sep 17 00:00:00 2001 From: Dallon Feldner Date: Tue, 2 Oct 2012 15:42:01 -0700 Subject: [PATCH] Added inline editor container --- lib/resources/collection/dashboard/data.html | 163 +++++++++--------- lib/resources/collection/dashboard/js/data.js | 82 ++++++++- lib/resources/collection/dashboard/style.css | 38 +++- lib/resources/collection/dashboard/style.less | 36 +++- lib/resources/dashboard/img/outlets-light.png | Bin 0 -> 175 bytes 5 files changed, 228 insertions(+), 91 deletions(-) create mode 100644 lib/resources/dashboard/img/outlets-light.png diff --git a/lib/resources/collection/dashboard/data.html b/lib/resources/collection/dashboard/data.html index 3856e87..bfe28a7 100644 --- a/lib/resources/collection/dashboard/data.html +++ b/lib/resources/collection/dashboard/data.html @@ -1,95 +1,102 @@

Data

-
-
- - - - - - - - - - - - - -
 
 
 
+
+
+
+
+
+ +
+ + + + + + + + + + + + + +
 
 
 
+
-
- - - - - - - - - - -
  id
-
-
- - - - - - - - - - - - - - - - +
+
   
-
+ - + + + + + + +
+   id
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
   
+ +
+ 		+
+
   
+
+
+ + + - + - - - - - - - - - - - -
  -
+
id
 -
+
   
-
-
- - - - - - - - -
  -
id
- 		-
-
+ +
diff --git a/lib/resources/collection/dashboard/js/data.js b/lib/resources/collection/dashboard/js/data.js index bc70225..73e8c6c 100644 --- a/lib/resources/collection/dashboard/js/data.js +++ b/lib/resources/collection/dashboard/js/data.js @@ -135,6 +135,10 @@ , selectedRow: ko.observable() , selectedProp: ko.observable() + , inlineEdit: { + editing: ko.observable(false) + } + , propertiesLoaded: ko.observable(false) , view: { @@ -224,6 +228,59 @@ vm.view.scrollToColumn(vm.selectedProp()); }; + vm.view.clearSelection = function() { + if(document.selection && document.selection.empty) { + document.selection.empty(); + } else if(window.getSelection) { + var sel = window.getSelection(); + sel.removeAllRanges(); + } + }; + + vm.view.getSelectedCell = function() { + var $table = vm.view.$table(); + if (!$table) return null; + return $table.find('td.highlight'); + }; + + vm.view.selectedCellX = ko.computed(function() { + vm.view.scrollX(); //dependent + vm.selectedProp(); + + var $cell = vm.view.getSelectedCell(); + if ($cell && $cell.length) { + return $cell.position().left; + } + + }, vm.view).extend({throttle: 1}); + + vm.view.selectedCellY = ko.computed(function() { + vm.view.scrollY(); //dependent + vm.selectedRow(); + + var $cell = vm.view.getSelectedCell(); + if ($cell && $cell.length) { + return $cell.position().top; + } + }, vm.view).extend({throttle: 1}); + + vm.inlineEdit.dismiss = function() { + vm.inlineEdit.editing(false); + }; + + vm.inlineEdit.start = function() { + vm.inlineEdit.editing(true); + }; + + vm.inlineEdit.onKeyDown = function(e) { + if (e.which == 27) { // escape + vm.inlineEdit.editing(false); + return false; + } + + return true; + }; + function createRow(data) { var rowVm = {}; @@ -235,7 +292,7 @@ rowVm[name] = ko.observable(data[name]); }); - rowVm.textFor = function(prop) { + rowVm._textFor = function(prop) { var val = rowVm[prop](); if (typeof val === 'undefined' || val === null) { return '...'; @@ -246,8 +303,19 @@ } }; - rowVm._selectCell = function(data) { - vm.selectedProp(data); + rowVm._editProp = function(prop, e) { + vm.view.clearSelection(); + setTimeout(function() { + if (vm.selectedRow() !== rowVm && vm.selectedProp() !== prop) { + rowVm._selectCell(prop, e); + } + vm.inlineEdit.start(); + }, 1); + return false; + }; + + rowVm._selectCell = function(prop) { + vm.selectedProp(prop); vm.selectedRow(rowVm); }; @@ -268,6 +336,10 @@ $(window).keydown(function(e) { var which = e.which; + if (vm.inlineEdit.editing()) { + return vm.inlineEdit.onKeyDown(e); + } + switch (which) { case 38: // up/down arrows case 40: @@ -281,6 +353,10 @@ case 35: selectionHorizontal(e); return false; + + case 13: //enter + vm.selectedRow()._editProp(vm.selectedProp()); + return false; } return true; diff --git a/lib/resources/collection/dashboard/style.css b/lib/resources/collection/dashboard/style.css index d576c41..bb76c3a 100644 --- a/lib/resources/collection/dashboard/style.css +++ b/lib/resources/collection/dashboard/style.css @@ -19,6 +19,32 @@ -ms-box-orient: vertical; -o-box-orient: vertical; } +#table-viewport { + position: relative; + box-flex: 1; + -moz-box-flex: 1; + -webkit-box-flex: 1; + -ms-box-flex: 1; + -o-box-flex: 1; +} +#table-viewport #inline-editor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 100; +} +#table-viewport #inline-editor .mini-edit { + position: absolute; + background: url('../../img/outlets-light.png'); + height: 38px; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 300px; +} #data { display: box; display: -moz-box; @@ -32,13 +58,11 @@ -o-box-orient: vertical; } #table-container { - position: relative; - height: 0; - box-flex: 1; - -moz-box-flex: 1; - -webkit-box-flex: 1; - -ms-box-flex: 1; - -o-box-flex: 1; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; display: box; display: -moz-box; display: -webkit-box; diff --git a/lib/resources/collection/dashboard/style.less b/lib/resources/collection/dashboard/style.less index f82744f..3b1e830 100644 --- a/lib/resources/collection/dashboard/style.less +++ b/lib/resources/collection/dashboard/style.less @@ -1,6 +1,8 @@ @import '../../dashboard/stylesheets/mixins.less'; + @background: url('../../img/outlets.png'); +@backgroundLight: url('../../img/outlets-light.png'); @cellHeight: 38px; .unloaded-content { @@ -16,6 +18,29 @@ } +#table-viewport { + position: relative; + .box-flex(1); + + #inline-editor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 100; + + .mini-edit { + position: absolute; + background: @backgroundLight; + height: @cellHeight; + .box-sizing(border-box); + width: 300px; + } + } +} + #data { // .box-flex(1); .display-box(); @@ -23,9 +48,12 @@ } #table-container { - position: relative; - height: 0; - .box-flex(1); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + .display-box(); .box-orient(vertical); overflow: scroll; @@ -138,5 +166,7 @@ background: @background; margin: 0; } + + } diff --git a/lib/resources/dashboard/img/outlets-light.png b/lib/resources/dashboard/img/outlets-light.png new file mode 100644 index 0000000000000000000000000000000000000000..b658274ee9e7d19244c988887447a4ba790a4562 GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^EI`b`!2~1&15bhk7>k44ofy`glX(e}O?UKlWMJ6X z&;2Kn70Bl-@Q5sCVBk9p!i>lBSEK+1rAk~QN`mv#O3D+9QW*jgGxJLH{9Hp6%8d0) z^$ZORz7#D4s*>|`aSV|NPrh*V>efx0nkMiFa4{{AS;6DN<0|P{#lZSN_-#dKN-9t# NgQu&X%Q~loCIAdtF7yBZ literal 0 HcmV?d00001