From 3e8ae2dc233dca2d14c01f3df9cb749d9d360d4a Mon Sep 17 00:00:00 2001 From: Dan Helfman Date: Wed, 4 Feb 2009 17:09:54 -0800 Subject: [PATCH] Added grippy-surface area to the right of focused note for drag-and-drop of notes for reordering. Drag-and-drop still unimplemented. --- static/css/ie7.css | 5 +++ static/css/style.css | 53 +++++++++++++++++++++++++++++++- static/images/grabber.png | Bin 0 -> 195 bytes static/images/grabber_hover.png | Bin 0 -> 194 bytes static/js/Editor.js | 21 ++++++++----- view/Main_page.py | 31 +++++++++++++------ 6 files changed, 93 insertions(+), 17 deletions(-) create mode 100644 static/images/grabber.png create mode 100644 static/images/grabber_hover.png diff --git a/static/css/ie7.css b/static/css/ie7.css index 5170785..5dc354a 100644 --- a/static/css/ie7.css +++ b/static/css/ie7.css @@ -31,3 +31,8 @@ background: none; padding: 0; } + +.note_grabber { + position: relative; + left: 4px; +} diff --git a/static/css/style.css b/static/css/style.css index 100e0dc..98e8389 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -275,6 +275,12 @@ h1 { background-image: url(/static/images/tree_arrow_down_hover.png); } +#grabber_hover_preload { + height: 0; + overflow: hidden; + background-image: url(/static/images/grabber_hover.png); +} + #note_tree_area { position: fixed; width: 20em; @@ -535,6 +541,51 @@ h1 { overflow-x: auto; } +.note_holder { + border-width: 0; + border-spacing: 0; + border-style: none; + border-collapse: collapse; + margin-bottom: 1em; +} + +.note_holder td { + border-width: 0; + padding: 0; + border-style: none; +} + +.note_grabber { + -moz-border-radius-topright: 5px; + -moz-border-radius-bottomright: 5px; + -moz-user-select: none; + color: #fafafa; + background-color: #fafafa; + min-width: 20px; + width: 20px; + max-width: 20px; +} + +.note_grabber:hover { + color: #ffcc66; + background-color: #ffcc66; + background: url(/static/images/grabber_hover.png) center top repeat-y; + cursor: move; +} + +.note_grabber_focused { + color: #d0e0f0; + background-color: #d0e0f0; + background: url(/static/images/grabber.png) center top repeat-y; +} + +.note_grabber_focused:hover { + color: #ffcc66; + background-color: #ffcc66; + background: url(/static/images/grabber_hover.png) center top repeat-y; + cursor: move; +} + .static_note_div { -moz-border-radius: 5px; display: block; @@ -544,7 +595,6 @@ h1 { overflow: hidden; width: 100%; border: 2px solid #999999; - margin-bottom: 1em; background-color: #ffffff; overflow-x: auto; } @@ -763,6 +813,7 @@ h1 { .static_note_contents .user_status { font-size: 82%; } + .page_title a { color: #000000; text-decoration: none; diff --git a/static/images/grabber.png b/static/images/grabber.png new file mode 100644 index 0000000000000000000000000000000000000000..0947b5219656ca531bba20d54a7e0d3760d19320 GIT binary patch literal 195 zcmeAS@N?(olHy`uVBq!ia0vp^B0$W;!2~4V=5eh7Qk(@Ik;M!Q+`=Ht$S`Y;1W=H@ z#M9T6{U#GDgQNxf&(O(0A=whwh!W@g+}zZ>5(ej@)Wnk16ovB4k_?5Aj8p}8Pv3y| zDXMuug_fQ!jv*T7llOdhz|6d}fph;B9s9$l`|VF&sd;wse66(Dqe-bt_H8zd?Y{cg m$7Pq;>fe&?&a?X#@-m2sSX}O0t~eEF2!p4qpUXO@geCx?Z9JF& literal 0 HcmV?d00001 diff --git a/static/images/grabber_hover.png b/static/images/grabber_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..4a27195e68fd680c4604f2591e80d610f1b36059 GIT binary patch literal 194 zcmeAS@N?(olHy`uVBq!ia0vp^B0$W;!2~4V=5eh7Qk(@Ik;M!Q+`=Ht$S`Y;1W=H@ z#M9T6{U#GDgPhrVhIhe0A=whwh!W@g+}zZ>5(ej@)Wnk16ovB4k_?5Aj8p}8Pv3y| zDXMuug%+MJjv*T7lmFDK^)|*FXo>$dw@Cc(?%1d!19P^%WKKc^2ha=#Pgg&ebxsLQ041tAkN^Mx literal 0 HcmV?d00001 diff --git a/static/js/Editor.js b/static/js/Editor.js index 57ce58f..02b6b45 100644 --- a/static/js/Editor.js +++ b/static/js/Editor.js @@ -98,6 +98,7 @@ Editor.prototype.create_div = function ( position_after ) { if ( static_note_div ) { this.note_controls = getElement( "note_controls_" + this.id ); this.holder = getElement( "note_holder_" + this.id ); + this.grabber = getElement( "note_grabber_" + this.id ); this.connect_note_controls( true ); this.div = static_note_div; this.div.editor = this; @@ -120,9 +121,15 @@ Editor.prototype.create_div = function ( position_after ) { this.create_note_controls(); this.connect_note_controls(); - this.holder = createDOM( "div", { "id": "note_holder_" + this.id, "class": "note_holder" }, - this.note_controls, - this.div + this.grabber = createDOM( "td", { "id": "note_grabber_" + this.id, "class": "note_grabber" } ); + this.holder = createDOM( "table", { "id": "note_holder_" + this.id, "class": "note_holder" }, + createDOM( "tr", {}, + createDOM( "td", {}, this.note_controls ) + ), + createDOM( "tr", {}, + createDOM( "td", { "width": "100%" }, this.div ), + this.grabber + ) ); if ( position_after && position_after.parentNode ) @@ -263,6 +270,7 @@ Editor.prototype.claim_iframe = function ( position_after ) { addElementClass( this.iframe, "focused_note_frame" ); removeElementClass( this.iframe, "invisible" ); addElementClass( this.div, "invisible" ); + addElementClass( this.grabber, "note_grabber_focused" ); function finish_init() { self.position_cursor( range ); @@ -620,14 +628,12 @@ Editor.prototype.resize = function ( get_height_from_div ) { this.reposition(); var height = null; - var width = elementDimensions( this.div.parentNode ).w; + var width = elementDimensions( this.div ).w; // set the width first, because that influences the height of the content - if ( MSIE6 ) - width -= FRAME_BORDER_HEIGHT * 2; + width -= FRAME_BORDER_HEIGHT * 2; var size = { "w": width }; setElementDimensions( this.iframe, size ); - setElementDimensions( this.div, size ); if ( get_height_from_div && !this.empty() ) { height = elementDimensions( this.div ).h; @@ -1085,6 +1091,7 @@ Editor.prototype.blur = function () { this.scrape_title(); removeElementClass( this.iframe || this.div, "focused_note_frame" ); + removeElementClass( this.grabber, "note_grabber_focused" ); } Editor.prototype.release_iframe = function () { diff --git a/view/Main_page.py b/view/Main_page.py index f2fda3a..7f4d58e 100644 --- a/view/Main_page.py +++ b/view/Main_page.py @@ -2,7 +2,7 @@ from urllib import urlencode from cgi import escape from Page import Page from Header import Header -from Tags import Link, Input, Div, Span, H2, H4, A, Br, Strong, Script, Img, P, Noscript +from Tags import Link, Input, Div, Span, H2, H4, A, Br, Strong, Script, Img, P, Noscript, Table, Td, Tr from Note_tree_area import Note_tree_area from Link_area import Link_area from Toolbar import Toolbar @@ -89,15 +89,27 @@ class Main_page( Page ): ) def static_note_divs( notes, read_write ): - return [ Div( - note_controls( note, read_write ), - Div( - Span( - note.contents, - class_ = u"static_note_contents", + return [ Table( + Tr( Td( + note_controls( note, read_write ), + ) ), + Tr( + Td( + Div( + Span( + note.contents, + class_ = u"static_note_contents", + ), + id = "static_note_%s" % note.object_id, + class_ = u"static_note_div", + ), + width = "100%", + ), + Td( + u".....", + id = u"note_grabber_%s" % note.object_id, + class_ = u"note_grabber", ), - id = "static_note_%s" % note.object_id, - class_ = u"static_note_div", ), id = u"note_holder_%s" % note.object_id, class_ = u"note_holder", @@ -302,4 +314,5 @@ class Main_page( Page ): ), id = u"everything_area", ), + Span( id = "grabber_hover_preload" ), )