Finally done with this editor style

This commit is contained in:
Eston Bond
2010-11-04 13:32:22 -07:00
parent b03d361f0e
commit c9870fb6cb
8 changed files with 69 additions and 20 deletions
+39
View File
@@ -71,6 +71,45 @@
background: -moz-linear-gradient(top, #599bdc, #3072b3);
}
#gollum-editor #gollum-editor-function-bar a span {
background-image: url(../images/icon-sprite.png);
background-repeat: no-repeat;
display: block;
height: 25px;
overflow: hidden;
text-indent: -5000px;
width: 25px;
}
a#function-bold span { background-position: 0 0; }
a#function-italic span { background-position: -27px 0; }
a#function-underline span { background-position: -54px 0; }
a#function-code span { background-position: -82px 0; }
a#function-ul span { background-position: -109px 0; }
a#function-ol span { background-position: -136px 0; }
a#function-blockquote span { background-position: -163px 0; }
a#function-hr span { background-position: -190px 0; }
a#function-h1 span { background-position: -217px 0; }
a#function-h2 span { background-position: -244px 0; }
a#function-h3 span { background-position: -271px 0; }
a#function-link span { background-position: -298px 0; }
a#function-image span { background-position: -324px 0; }
a#function-bold:hover span { background-position: 0 -28px; }
a#function-italic:hover span { background-position: -27px -28px; }
a#function-underline:hover span { background-position: -54px -28px; }
a#function-code:hover span { background-position: -82px -28px; }
a#function-ul:hover span { background-position: -109px -28px; }
a#function-ol:hover span { background-position: -136px -28px; }
a#function-blockquote:hover span { background-position: -163px -28px; }
a#function-hr:hover span { background-position: -190px -28px; }
a#function-h1:hover span { background-position: -217px -28px; }
a#function-h2:hover span { background-position: -244px -28px; }
a#function-h3:hover span { background-position: -271px -28px; }
a#function-link:hover span { background-position: -298px -28px; }
a#function-image:hover span { background-position: -324px -28px; }
#gollum-editor #gollum-editor-function-bar a.disabled {
display: none;
}
+23 -12
View File
@@ -28,23 +28,34 @@
<li><a href="#" id="type-switch-rt">Easy Mode</a></li>
</ul>
<div id="gollum-editor-function-bar">
<a href="#" id="function-bold" class="function-button">Bold</a>
<a href="#" id="function-italic" class="function-button">Italic</a>
<a href="#" id="function-code" class="function-button">Code</a>
<a href="#" id="function-bold" class="function-button">
<span>Bold</span></a>
<a href="#" id="function-italic" class="function-button">
<span>Italic</span></a>
<a href="#" id="function-code" class="function-button">
<span>Code</span></a>
<span class="function-divider">&nbsp;</span>
<a href="#" id="function-ul" class="function-button">Unordered List</a>
<a href="#" id="function-ol" class="function-button">Ordered List</a>
<a href="#" id="function-ul" class="function-button">
<span>Unordered List</span></a>
<a href="#" id="function-ol" class="function-button">
<span>Ordered List</span></a>
<a href="#" id="function-blockquote" class="function-button">
Blockquote</a>
<span>Blockquote</span></a>
<a href="#" id="function-hr" class="function-button">Horizontal Rule</a>
<a href="#" id="function-hr" class="function-button">
<span>Horizontal Rule</span></a>
<span class="function-divider">&nbsp;</span>
<a href="#" id="function-h1" class="function-button">h1</a>
<a href="#" id="function-h2" class="function-button">h2</a>
<a href="#" id="function-h3" class="function-button">h3</a>
<a href="#" id="function-h1" class="function-button">
<span>h1</span></a>
<a href="#" id="function-h2" class="function-button">
<span>h2</span></a>
<a href="#" id="function-h3" class="function-button">
<span>h3</span></a>
<span class="function-divider">&nbsp;</span>
<a href="#" id="function-link" class="function-button">Link</a>
<a href="#" id="function-image" class="function-button">Image</a>
<a href="#" id="function-link" class="function-button">
<span>Link</span></a>
<a href="#" id="function-image" class="function-button">
<span>Image</span></a>
</div>
<fieldset id="gollum-editor-fields">
<textarea id="gollum-editor-body"
Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -561,6 +561,7 @@
if ( !Dialog.markupCreated ) {
debug('Dialog: No markup to show. Please use init first.')
} else {
debug('Showing dialog');
$('#gollum-editor-dialog').animate({ opacity: 0 }, {
duration: 1,
complete: function() {
+1 -1
View File
@@ -41,7 +41,7 @@ var ASCIIDoc = {
'function-link' : {
exec: function( txt, selText, $field ) {
var results = null;
$.GollumEditor.Dialog({
$.GollumEditor.Dialog.init({
title: 'Insert Link',
fields: [
{
+1 -1
View File
@@ -39,7 +39,7 @@ var Creole = {
'function-link' : {
exec: function( txt, selText, $field ) {
var results = null;
$.GollumEditor.Dialog({
$.GollumEditor.Dialog.init({
title: 'Insert Link',
fields: [
{
+3 -5
View File
@@ -74,20 +74,18 @@ var MarkDown = {
'function-link' : {
exec: function( txt, selText, $field ) {
var results = null;
$.GollumEditor.Dialog({
$.GollumEditor.Dialog.init({
title: 'Insert Link',
fields: [
{
id: 'text',
name: 'Link Text',
type: 'text',
help: 'The text to display to the user.'
type: 'text'
},
{
id: 'href',
name: 'URL',
type: 'text',
help: 'The URL to link to.'
type: 'text'
}
],
OK: function( res ) {
+1 -1
View File
@@ -43,7 +43,7 @@ var Textile = {
'function-link' : {
exec: function( txt, selText, $field ) {
var results = null;
$.GollumEditor.Dialog({
$.GollumEditor.Dialog.init({
title: 'Insert Link',
fields: [
{