Toolbar buttons are now more clearer, e.g. list buttons look like little lists.
This commit is contained in:
parent
9673d84c3f
commit
781683cc6f
|
@ -9,7 +9,7 @@
|
||||||
top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 20 : document.body.scrollTop + 20 );
|
top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 20 : document.body.scrollTop + 20 );
|
||||||
margin-left:expression(
|
margin-left:expression(
|
||||||
document.body.clientWidth < ( 900 / 12 ) *
|
document.body.clientWidth < ( 900 / 12 ) *
|
||||||
parseInt( document.body.currentStyle.fontSize ) ? "-4em": "0em"
|
parseInt( document.body.currentStyle.fontSize ) ? "-2em": "2em"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -58,3 +58,18 @@
|
||||||
height: expression( this.scrollHeight > 200 ? "200px" : "auto" );
|
height: expression( this.scrollHeight > 200 ? "200px" : "auto" );
|
||||||
width: expression( this.scrollHeight > 200 ? "12em" : "auto" );
|
width: expression( this.scrollHeight > 200 ? "12em" : "auto" );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#toolbar .button_wrapper {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_text {
|
||||||
|
position: relative;
|
||||||
|
top: 0.375em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_list_text {
|
||||||
|
position: relative;
|
||||||
|
top: -0.625em;
|
||||||
|
line-height: 50%;
|
||||||
|
}
|
||||||
|
|
|
@ -15,3 +15,15 @@
|
||||||
#link_area {
|
#link_area {
|
||||||
margin-left: 1.5em;
|
margin-left: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbar_text {
|
||||||
|
position: relative;
|
||||||
|
top: 0.375em;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_list_text {
|
||||||
|
position: relative;
|
||||||
|
top: -0.625em;
|
||||||
|
line-height: 50%;
|
||||||
|
}
|
||||||
|
|
|
@ -43,7 +43,6 @@ ol li {
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar {
|
#toolbar {
|
||||||
float: left;
|
|
||||||
width: 15em;
|
width: 15em;
|
||||||
max-width: 18%;
|
max-width: 18%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -52,14 +51,8 @@ ol li {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar ul li {
|
#toolbar .button_wrapper {
|
||||||
list-style: none;
|
float: right;
|
||||||
text-indent: -2.5em;
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-left: 0em;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
padding-top: 0em;
|
|
||||||
padding-left: 0em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar .button {
|
#toolbar .button {
|
||||||
|
@ -69,11 +62,18 @@ ol li {
|
||||||
height: 2em;
|
height: 2em;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: table-cell;
|
||||||
outline: none;
|
outline: none;
|
||||||
-moz-border-radius: 0.5em;
|
-moz-border-radius: 0.5em;
|
||||||
-webkit-border-radius: 0.5em;
|
-webkit-border-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#toolbar div {
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
#toolbar .button:hover {
|
#toolbar .button:hover {
|
||||||
background-color: #ffcc66;
|
background-color: #ffcc66;
|
||||||
}
|
}
|
||||||
|
@ -88,6 +88,21 @@ ol li {
|
||||||
background-color: #ffbb55;
|
background-color: #ffbb55;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbar_link_button {
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_list_text {
|
||||||
|
font-size: 50%;
|
||||||
|
line-height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#createLink {
|
||||||
|
color: blue;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
#bold {
|
#bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,23 +1,50 @@
|
||||||
from Tags import Div, Ul, Li, A, Input
|
from Tags import P, Div, A, Input, Span, Br
|
||||||
|
|
||||||
|
|
||||||
class Toolbar( Div ):
|
class Toolbar( Div ):
|
||||||
def __init__( self ):
|
def __init__( self ):
|
||||||
Div.__init__(
|
Div.__init__(
|
||||||
self,
|
self,
|
||||||
Ul(
|
Div(
|
||||||
Li( Input( type = u"button", value = u"+", id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ),
|
P(
|
||||||
Li( Input( type = u"button", value = u"→", id = u"createLink", title = u"note link [ctrl-L]", class_ = u"button" ) ),
|
Div( Div( Span( u"+", class_ = u"toolbar_text" ), id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ),
|
||||||
),
|
Div( Div(
|
||||||
Ul(
|
Span(
|
||||||
Li( Input( type = u"button", value = u"B", id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ),
|
u"link",
|
||||||
Li( Input( type = u"button", value = u"I", id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ),
|
class_ = u"toolbar_text toolbar_link_button",
|
||||||
Li( Input( type = u"button", value = u"U", id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ),
|
),
|
||||||
Li( Input( type = u"button", value = u"T", id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ),
|
id = u"createLink", title = u"link [ctrl-L]", class_ = u"button"
|
||||||
),
|
) ),
|
||||||
Ul(
|
),
|
||||||
Li( Input( type = u"button", value = u"•", id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button" ) ),
|
P(
|
||||||
Li( Input( type = u"button", value = u"1.", id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button" ) ),
|
Div( Div( Span( u"B", class_ = u"toolbar_text" ), id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ),
|
||||||
|
Div( Div( Span( u"I", class_ = u"toolbar_text" ), id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ),
|
||||||
|
Div( Div( Span( u"U", class_ = u"toolbar_text" ), id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ),
|
||||||
|
Div( Div( Span( u"T", class_ = u"toolbar_text" ), id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ),
|
||||||
|
),
|
||||||
|
P(
|
||||||
|
Div( Div(
|
||||||
|
Span(
|
||||||
|
u"• ―", Br(),
|
||||||
|
u"• ―", Br(),
|
||||||
|
u"• ―", Br(),
|
||||||
|
Br( class_ = "undisplayed" ), # to make IE 6 happy. without this, the last list element is truncated
|
||||||
|
class_ = u"toolbar_list_text",
|
||||||
|
),
|
||||||
|
id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button",
|
||||||
|
) ),
|
||||||
|
Div( Div(
|
||||||
|
Span(
|
||||||
|
u"1.―", Br(),
|
||||||
|
u"2.―", Br(),
|
||||||
|
u"3.―", Br(),
|
||||||
|
Br( class_ = "undisplayed" ),
|
||||||
|
class_ = u"toolbar_list_text",
|
||||||
|
),
|
||||||
|
id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button",
|
||||||
|
) ),
|
||||||
|
),
|
||||||
|
class_ = u"button_wrapper",
|
||||||
),
|
),
|
||||||
id = u"toolbar",
|
id = u"toolbar",
|
||||||
class_ = u"undisplayed", # start out as hidden, and then shown in the browser if the current notebook is read-write
|
class_ = u"undisplayed", # start out as hidden, and then shown in the browser if the current notebook is read-write
|
||||||
|
|
Reference in New Issue