| [qo-modules-dev] [12] more work on drag & drop ; icon style ; "arrange by" function ; etc.. |
[ Thread Index |
Date Index
| More lists.tuxfamily.org/qo-modules-dev Archives
]
Revision: 12
Author: ytorres
Date: 2008-11-11 22:32:40 +0100 (Tue, 11 Nov 2008)
Log Message:
-----------
more work on drag & drop ; icon style ; "arrange by" function ; etc..
Modified Paths:
--------------
yannick/img/folder.png
yannick/img/folder_open.png
yannick/main.js
yannick/shortcuts.css
yannick/shortcuts.js
yannick/wallpaper.jpg
Modified: yannick/img/folder.png
===================================================================
(Binary files differ)
Modified: yannick/img/folder_open.png
===================================================================
(Binary files differ)
Modified: yannick/main.js
===================================================================
--- yannick/main.js 2008-11-09 21:05:25 UTC (rev 11)
+++ yannick/main.js 2008-11-11 21:32:40 UTC (rev 12)
@@ -2,7 +2,10 @@
var xd = Ext.data;
var store = new Ext.data.JsonStore({
- url: 'php/get-desktop.php',
+ url: 'php/shortcuts.php',
+ baseParams: {
+ what: 'get-desktop'
+ },
root: 'items',
id: 'id',
fields: ['id', 'name', 'originName', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}, 'type']
Modified: yannick/shortcuts.css
===================================================================
--- yannick/shortcuts.css 2008-11-09 21:05:25 UTC (rev 11)
+++ yannick/shortcuts.css 2008-11-11 21:32:40 UTC (rev 12)
@@ -37,16 +37,22 @@
}
.x-view-over{
- background: #EFEFEF url(img/shadow.png) repeat;
- border:1px solid #dddddd;
+ background: transparent url(img/over.png) repeat;
+ border:1px solid #7ba1c6;
padding: 4px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+
}
.x-view-selected{
- background: #EFEFEF url(img/gradient.gif) repeat-x scroll left top;
- border:1px solid #99bbe8;
+ background: transparent url(img/selected.png) repeat;
+ border:1px solid #7ba1c6;
padding: 4px;
+ color: #fff;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
}
.x-view-selected .thumb{
background:transparent;
-}
\ No newline at end of file
+}
Modified: yannick/shortcuts.js
===================================================================
--- yannick/shortcuts.js 2008-11-09 21:05:25 UTC (rev 11)
+++ yannick/shortcuts.js 2008-11-11 21:32:40 UTC (rev 12)
@@ -70,6 +70,9 @@
// Move icon
this.DDmoveIcon();
+
+ // Monitor resize
+ this.ownerCt.on('resize', function() { this._ctxViewArrange('ifOut', this) }, this);
},
@@ -103,8 +106,14 @@
this.constrainTo(viewID);
// Hide the clicked element and copy the dom into the drag element
- clickEl.setStyle('visibility', 'hidden');
- dragEl.dom.innerHTML = clickEl.dom.innerHTML;
+ //clickEl.setStyle('visibility', 'hidden');
+ dragEl.dom.innerHTML = '<div class="thumb-wrap">'+clickEl.dom.innerHTML+'</div>';
+
+ // Make the dragEl a little transparent
+ dragEl.setStyle('opacity', 0.67);
+
+ // Remove default border
+ dragEl.setStyle('border', 'none');
};
@@ -146,10 +155,11 @@
Ext.Ajax.request({
scope: this,
- url: 'php/move-to.php',
+ url: 'php/shortcuts.php',
params: {
moveTo: lastFolder.data['originName'],
- name: originName
+ name: originName,
+ what: 'move-to'
},
success: function(response, options) {
@@ -189,15 +199,16 @@
DDmoveIcon : function() {
Ext.Ajax.request({
scope: this,
- url: 'php/get-state.php',
+ url: 'php/shortcuts.php',
+ params: { what:'get-state'},
success: function(response, options) {
-
+
var o = Ext.util.JSON.decode(response.responseText);
if( o.success ) {
var nodes = this.getNodes();
Ext.each(nodes, function(node) {
-
+
var record = this.store.getAt(this.indexOf(node));
var originName = record.data['originName'];
@@ -206,13 +217,13 @@
//Move
Ext.get(node.id).moveTo(o[originName].posX, o[originName].posY, true);
}
-
+
}, this);
}
}
});
-
-
+
+
},
// LabelEditor
@@ -255,10 +266,11 @@
var item = item;
Ext.Ajax.request({
scope: this,
- url: 'php/update-filename.php',
+ url: 'php/shortcuts.php',
params: {
originName: originName,
- NewValue: NewValue
+ newName: NewValue,
+ what: 'update-fileName'
},
success: function(response, options) {
var o = Ext.util.JSON.decode(response.responseText);
@@ -288,10 +300,13 @@
},
_ctxItems : function(e, item) {
-
+
var record = this.store.getAt(this.indexOf(item));
this.currentRecord = record.data.id;
-
+
+ // Select this item
+ this.select(item);
+
var menu = new Ext.menu.Menu();
menu.add({
text: 'Open',
@@ -307,12 +322,49 @@
},
_ctxView : function(e) {
-
+
var menu = new Ext.menu.Menu();
+ var view = this;
+
menu.add({
- text: 'Desktop options',
- //iconCls: '',
- handler: function(){}
+ text:'New',
+ menu: {
+ items: [new Ext.menu.Item({
+ text:'Folder',
+ handler: function() { console.log('new folder'); }
+ }),new Ext.menu.Item({
+ text: 'ShortCut',
+ handler: function() { console.log('new shortCut'); }
+ }),new Ext.menu.Item({
+ text: 'Text Document',
+ handler: function() { console.log('new Text document'); }
+ }
+ )]
+ }
+ });
+
+ menu.add({
+ text: 'Refresh',
+ handler: function() { console.log('refresh the desktop'); }
+ });
+
+ menu.add({
+ text: 'Arrange icons by',
+ menu: {
+ items: [new Ext.menu.Item({
+ scope: this,
+ text: 'Name',
+ handler: function() { this._ctxViewArrange('name', view); }
+ }), new Ext.menu.Item({
+ scope: this,
+ text: 'Size',
+ handler: function() { this._ctxViewArrange('size', view); }
+ }), new Ext.menu.Item({
+ scope: this,
+ text: 'Type',
+ handler: function() { this._ctxViewArrange('type', view); }
+ })]
+ }
});
menu.addSeparator();
menu.add({
@@ -321,9 +373,95 @@
handler: function(){}
});
menu.showAt(e.getXY());
-
+
+ },
+
+ _ctxViewArrange: function(by, view) {
+
+ var nodes = this.getNodes();
+
+ var beginX = 10;
+ var beginY = 10;
+
+ var ownerCtSize = this.ownerCt.getSize();
+ var containerWidth = ownerCtSize['width'];
+ var containerHeight = ownerCtSize['height'];
+
+ // Use when the ownerCt is resize. Check if some shortcut is out of the screen
+ if( by == 'ifOut' ) {
+
+ Ext.each(nodes, function(node) {
+ var itemY = Ext.get(node.id).getY();
+ var itemX = Ext.get(node.id).getX();
+
+ if( (itemX + 96 ) > containerWidth || (itemY + 92) > containerHeight || itemX < 0 || itemY < 0) {
+ if( (itemX + 96 ) > containerWidth ) { itemX = containerWidth - 96; }
+ if( (itemY + 92 ) > containerHeight ) { itemY = containerHeight - 92; }
+ if( itemX < 0 ) { itemX = 10; }
+ if( itemY < 0 ) { itemY = 10; }
+ Ext.get(node.id).moveTo(itemX, itemY, true);
+ }
+
+ }, this);
+
+ } else {
+
+ var sortArray = [];
+
+ var i=0;
+ Ext.each(nodes, function(node) {
+
+ var record = this.store.getAt(this.indexOf(node));
+ var name1 = record.data['name'];
+ var type1 = record.data['type'];
+ var size1 = record.data['size'];
+
+ sortArray[i] = {'name': name1, 'type': type1, 'size': size1, 'id': node.id };
+
+ i ++;
+
+ }, this);
+
+ if( by == 'name' ) {
+ sortArray.sort(function(a, b) { return a['name'] > b['name']; })
+ } else if( by == 'type' ) {
+ sortArray.sort(function(a, b) { return a['type'] > b['type']; })
+ } else if ( by == 'size' ) {
+ sortArray.sort(function(a, b) { return a['size'] > b['size']; })
+ }
+
+ // Now we move
+ Ext.each(sortArray, function(item) {
+ Ext.get(item.id).moveTo(beginX, beginY, true);
+ beginX += 110;
+
+ if( (beginX+110) > containerWidth ) {
+ beginX = 10;
+ beginY += 100;
+ }
+
+ }, this);
+
+ // We must now save all this new position
+ var newPosition = [];
+ var i = 0;
+
+ Ext.each(nodes, function(node) {
+
+ var record = this.store.getAt(this.indexOf(node));
+ var originName = record.data['originName'];
+ var nodeElX = Ext.get(node.id).getX();
+ var nodeElY = Ext.get(node.id).getY();
+
+ newPosition[i] = { 'originName': originName, 'x': nodeElX, 'y': nodeElY };
+ i ++;
+ }, this);
+
+ console.log(Ext.util.JSON.encode(newPosition));
+
+ }
}
-
+
});
// register xtype to allow for lazy initialization
Modified: yannick/wallpaper.jpg
===================================================================
(Binary files differ)