Added grippy-surface area to the right of focused note for drag-and-drop of notes for reordering. Drag-and-drop still unimplemented.
This commit is contained in:
parent
fc502c6c82
commit
3e8ae2dc23
|
@ -31,3 +31,8 @@
|
||||||
background: none;
|
background: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note_grabber {
|
||||||
|
position: relative;
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
|
|
@ -275,6 +275,12 @@ h1 {
|
||||||
background-image: url(/static/images/tree_arrow_down_hover.png);
|
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 {
|
#note_tree_area {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 20em;
|
width: 20em;
|
||||||
|
@ -535,6 +541,51 @@ h1 {
|
||||||
overflow-x: auto;
|
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 {
|
.static_note_div {
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -544,7 +595,6 @@ h1 {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 2px solid #999999;
|
border: 2px solid #999999;
|
||||||
margin-bottom: 1em;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
@ -763,6 +813,7 @@ h1 {
|
||||||
.static_note_contents .user_status {
|
.static_note_contents .user_status {
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_title a {
|
.page_title a {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 195 B |
Binary file not shown.
After Width: | Height: | Size: 194 B |
|
@ -98,6 +98,7 @@ Editor.prototype.create_div = function ( position_after ) {
|
||||||
if ( static_note_div ) {
|
if ( static_note_div ) {
|
||||||
this.note_controls = getElement( "note_controls_" + this.id );
|
this.note_controls = getElement( "note_controls_" + this.id );
|
||||||
this.holder = getElement( "note_holder_" + this.id );
|
this.holder = getElement( "note_holder_" + this.id );
|
||||||
|
this.grabber = getElement( "note_grabber_" + this.id );
|
||||||
this.connect_note_controls( true );
|
this.connect_note_controls( true );
|
||||||
this.div = static_note_div;
|
this.div = static_note_div;
|
||||||
this.div.editor = this;
|
this.div.editor = this;
|
||||||
|
@ -120,9 +121,15 @@ Editor.prototype.create_div = function ( position_after ) {
|
||||||
this.create_note_controls();
|
this.create_note_controls();
|
||||||
this.connect_note_controls();
|
this.connect_note_controls();
|
||||||
|
|
||||||
this.holder = createDOM( "div", { "id": "note_holder_" + this.id, "class": "note_holder" },
|
this.grabber = createDOM( "td", { "id": "note_grabber_" + this.id, "class": "note_grabber" } );
|
||||||
this.note_controls,
|
this.holder = createDOM( "table", { "id": "note_holder_" + this.id, "class": "note_holder" },
|
||||||
this.div
|
createDOM( "tr", {},
|
||||||
|
createDOM( "td", {}, this.note_controls )
|
||||||
|
),
|
||||||
|
createDOM( "tr", {},
|
||||||
|
createDOM( "td", { "width": "100%" }, this.div ),
|
||||||
|
this.grabber
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
if ( position_after && position_after.parentNode )
|
if ( position_after && position_after.parentNode )
|
||||||
|
@ -263,6 +270,7 @@ Editor.prototype.claim_iframe = function ( position_after ) {
|
||||||
addElementClass( this.iframe, "focused_note_frame" );
|
addElementClass( this.iframe, "focused_note_frame" );
|
||||||
removeElementClass( this.iframe, "invisible" );
|
removeElementClass( this.iframe, "invisible" );
|
||||||
addElementClass( this.div, "invisible" );
|
addElementClass( this.div, "invisible" );
|
||||||
|
addElementClass( this.grabber, "note_grabber_focused" );
|
||||||
|
|
||||||
function finish_init() {
|
function finish_init() {
|
||||||
self.position_cursor( range );
|
self.position_cursor( range );
|
||||||
|
@ -620,14 +628,12 @@ Editor.prototype.resize = function ( get_height_from_div ) {
|
||||||
this.reposition();
|
this.reposition();
|
||||||
|
|
||||||
var height = null;
|
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
|
// 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 };
|
var size = { "w": width };
|
||||||
setElementDimensions( this.iframe, size );
|
setElementDimensions( this.iframe, size );
|
||||||
setElementDimensions( this.div, size );
|
|
||||||
|
|
||||||
if ( get_height_from_div && !this.empty() ) {
|
if ( get_height_from_div && !this.empty() ) {
|
||||||
height = elementDimensions( this.div ).h;
|
height = elementDimensions( this.div ).h;
|
||||||
|
@ -1085,6 +1091,7 @@ Editor.prototype.blur = function () {
|
||||||
this.scrape_title();
|
this.scrape_title();
|
||||||
|
|
||||||
removeElementClass( this.iframe || this.div, "focused_note_frame" );
|
removeElementClass( this.iframe || this.div, "focused_note_frame" );
|
||||||
|
removeElementClass( this.grabber, "note_grabber_focused" );
|
||||||
}
|
}
|
||||||
|
|
||||||
Editor.prototype.release_iframe = function () {
|
Editor.prototype.release_iframe = function () {
|
||||||
|
|
|
@ -2,7 +2,7 @@ from urllib import urlencode
|
||||||
from cgi import escape
|
from cgi import escape
|
||||||
from Page import Page
|
from Page import Page
|
||||||
from Header import Header
|
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 Note_tree_area import Note_tree_area
|
||||||
from Link_area import Link_area
|
from Link_area import Link_area
|
||||||
from Toolbar import Toolbar
|
from Toolbar import Toolbar
|
||||||
|
@ -89,15 +89,27 @@ class Main_page( Page ):
|
||||||
)
|
)
|
||||||
|
|
||||||
def static_note_divs( notes, read_write ):
|
def static_note_divs( notes, read_write ):
|
||||||
return [ Div(
|
return [ Table(
|
||||||
note_controls( note, read_write ),
|
Tr( Td(
|
||||||
Div(
|
note_controls( note, read_write ),
|
||||||
Span(
|
) ),
|
||||||
note.contents,
|
Tr(
|
||||||
class_ = u"static_note_contents",
|
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,
|
id = u"note_holder_%s" % note.object_id,
|
||||||
class_ = u"note_holder",
|
class_ = u"note_holder",
|
||||||
|
@ -302,4 +314,5 @@ class Main_page( Page ):
|
||||||
),
|
),
|
||||||
id = u"everything_area",
|
id = u"everything_area",
|
||||||
),
|
),
|
||||||
|
Span( id = "grabber_hover_preload" ),
|
||||||
)
|
)
|
||||||
|
|
Reference in New Issue