wiki.ohea.xyz/gollum
10
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Finally done with this editor style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
scratch/css/editor.css
+39
View File
@@ -71,6 +71,45 @@
background: -moz-linear-gradient(top, #599bdc, #3072b3); 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 { #gollum-editor #gollum-editor-function-bar a.disabled {
display: none; display: none;
} }
scratch/edit.html
+23 -12
View File
@@ -28,23 +28,34 @@
<li><a href="#" id="type-switch-rt">Easy Mode</a></li> <li><a href="#" id="type-switch-rt">Easy Mode</a></li>
</ul> </ul>
<div id="gollum-editor-function-bar"> <div id="gollum-editor-function-bar">
<a href="#" id="function-bold" class="function-button">Bold</a> <a href="#" id="function-bold" class="function-button">
<a href="#" id="function-italic" class="function-button">Italic</a> <span>Bold</span></a>
<a href="#" id="function-code" class="function-button">Code</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> <span class="function-divider">&nbsp;</span>
<a href="#" id="function-ul" class="function-button">Unordered List</a> <a href="#" id="function-ul" class="function-button">
<a href="#" id="function-ol" class="function-button">Ordered List</a> <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"> <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> <span class="function-divider">&nbsp;</span>
<a href="#" id="function-h1" class="function-button">h1</a> <a href="#" id="function-h1" class="function-button">
<a href="#" id="function-h2" class="function-button">h2</a> <span>h1</span></a>
<a href="#" id="function-h3" class="function-button">h3</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> <span class="function-divider">&nbsp;</span>
<a href="#" id="function-link" class="function-button">Link</a> <a href="#" id="function-link" class="function-button">
<a href="#" id="function-image" class="function-button">Image</a> <span>Link</span></a>
<a href="#" id="function-image" class="function-button">
<span>Image</span></a>
</div> </div>
<fieldset id="gollum-editor-fields"> <fieldset id="gollum-editor-fields">
<textarea id="gollum-editor-body" <textarea id="gollum-editor-body"
scratch/images/icon-sprite.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

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