http://www.mediawiki.org/wiki/Special:Code/MediaWiki/94983
Revision: 94983
Author: tparscal
Date: 2011-08-19 02:26:17 +0000 (Fri, 19 Aug 2011)
Log Message:
-----------
More UI sweetness
Modified Paths:
--------------
trunk/parsers/wikidom/demos/es/es.css
trunk/parsers/wikidom/demos/es/es.js
trunk/parsers/wikidom/demos/es/index.html
Added Paths:
-----------
trunk/parsers/wikidom/demos/es/images/html.png
trunk/parsers/wikidom/demos/es/images/render.png
Modified: trunk/parsers/wikidom/demos/es/es.css
===================================================================
--- trunk/parsers/wikidom/demos/es/es.css 2011-08-19 02:22:14 UTC (rev
94982)
+++ trunk/parsers/wikidom/demos/es/es.css 2011-08-19 02:26:17 UTC (rev
94983)
@@ -6,29 +6,38 @@
padding: 0;
overflow-y: scroll;
-webkit-user-select: none;
+ background-color: white;
}
+#es-base {
+ margin: 2em;
+ -webkit-box-shadow: 0 0.25em 1.5em 0 #dddddd;
+ -moz-box-shadow: 0 0.25em 1.5em 0 #dddddd;
+ box-shadow: 0 0.25em 1.5em 0 #dddddd;
+ -webkit-border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -o-border-radius: 0.5em;
+ border-radius: 0.5em;
+}
#es-toolbar,
#es-panes {
- margin-left: 1.5%;
- width: 97%;
border: solid 1px #dddddd;
}
#es-toolbar {
border-bottom: none;
- border-top-right-radius: 0.25em;
-webkit-border-top-right-radius: 0.25em;
-moz-border-top-right-radius: 0.25em;
-o-border-top-right-radius: 0.25em;
- border-top-left-radius: 0.25em;
+ border-top-right-radius: 0.25em;
-webkit-border-top-left-radius: 0.25em;
-moz-border-top-left-radius: 0.25em;
-o-border-top-left-radius: 0.25em;
+ border-top-left-radius: 0.25em;
background-image: url(images/fade-up.png);
background-position: bottom left;
background-repeat: repeat-x;
}
.es-showData #es-visual,
-.es-showData #es-data {
+.es-showData #es-previews {
width: 50%;
float: left;
overflow: hidden;
@@ -36,13 +45,15 @@
.es-showData #es-editor {
border-right: solid 1px #dddddd;
}
+#es-editor {
+ font-size: 0.8em;
+}
.es-toolbarGroup {
float: left;
padding: 0.25em;
}
-.es-toolbarGroup-right {
+.es-toolbarGroup-preview {
float: right;
- padding: 0.25em;
}
.es-toolbarDivider {
float: left;
@@ -84,16 +95,23 @@
width: 22px;
height: 22px;
}
-#es-data {
+#es-previews {
display: none;
}
-.es-showData #es-data {
+.es-showData #es-previews {
display: block;
}
-.es-code {
+.es-preview {
margin: 0;
padding: 1em;
+}
+.es-code {
white-space: pre-wrap;
font-family: "Droid Sans Mono", "Courier New", monospace;
font-size: 0.7em;
}
+.es-render {
+ font-size: 0.8em;
+ line-height: 1.5em;
+ padding-top: 0;
+}
Modified: trunk/parsers/wikidom/demos/es/es.js
===================================================================
--- trunk/parsers/wikidom/demos/es/es.js 2011-08-19 02:22:14 UTC (rev
94982)
+++ trunk/parsers/wikidom/demos/es/es.js 2011-08-19 02:26:17 UTC (rev
94983)
@@ -205,13 +205,14 @@
surface.annotateContent( 'remove', { 'type': 'all' } );
return false;
} );
- $( '#es-toolbar-json' ).click( function() {
- showData = showData === 'json' ? false : 'json';
+ $( '.es-toolbarGroup-preview .es-toolbarTool' ).click( function() {
+ var type = $(this).attr( 'rel' );
+ showData = showData === type ? false : type;
if ( showData ) {
$( 'body' ).addClass( 'es-showData' );
- $( '#es-json' ).show();
- $( '#es-wikitext' ).hide();
- $( '#es-toolbar-wikitext' ).removeClass(
'es-toolbarTool-down' );
+ $( '.es-preview' ).hide();
+ $( '#es-preview-' + type ).show();
+ $( '.es-toolbarGroup-preview .es-toolbarTool'
).removeClass( 'es-toolbarTool-down' );
$(this).addClass( 'es-toolbarTool-down' );
} else {
$( 'body' ).removeClass( 'es-showData' );
@@ -220,21 +221,6 @@
doc.renderBlocks();
doc.emit( 'update' );
} );
- $( '#es-toolbar-wikitext' ).click( function() {
- showData = showData === 'wikitext' ? false : 'wikitext';
- if ( showData ) {
- $( 'body' ).addClass( 'es-showData' );
- $( '#es-wikitext' ).show();
- $( '#es-json' ).hide();
- $( '#es-toolbar-json' ).removeClass(
'es-toolbarTool-down' );
- $(this).addClass( 'es-toolbarTool-down' );
- } else {
- $( 'body' ).removeClass( 'es-showData' );
- $(this).removeClass( 'es-toolbarTool-down' );
- }
- doc.renderBlocks();
- doc.emit( 'update' );
- } );
// Setup data updates
var previewTimeout = null,
context = new es.Document.Context();
@@ -244,12 +230,20 @@
clearTimeout( previewTimeout );
}
previewTimeout = setTimeout( function () {
- if ( showData === 'json' ) {
- $( '#es-json' ).text( doc.serialize(
'json', context, {
- 'indentWith': ' '
- } ) );
- } else if ( showData === 'wikitext' ) {
- $( '#es-wikitext' ).text(
doc.serialize( 'wikitext', context ) );
+ switch ( showData ) {
+ case 'json':
+ $( '#es-preview-json' )
+ .text( doc.serialize(
'json', context, { 'indentWith': ' ' } ) );
+ break;
+ case 'wikitext':
+ $( '#es-preview-wikitext'
).text( doc.serialize( 'wikitext', context ) );
+ break;
+ case 'html':
+ $( '#es-preview-html' ).text(
doc.serialize( 'html', context ) );
+ break;
+ case 'render':
+ $( '#es-preview-render' ).html(
doc.serialize( 'html', context ) );
+ break;
}
}, 100 );
}
Added: trunk/parsers/wikidom/demos/es/images/html.png
===================================================================
(Binary files differ)
Property changes on: trunk/parsers/wikidom/demos/es/images/html.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/parsers/wikidom/demos/es/images/render.png
===================================================================
(Binary files differ)
Property changes on: trunk/parsers/wikidom/demos/es/images/render.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: trunk/parsers/wikidom/demos/es/index.html
===================================================================
--- trunk/parsers/wikidom/demos/es/index.html 2011-08-19 02:22:14 UTC (rev
94982)
+++ trunk/parsers/wikidom/demos/es/index.html 2011-08-19 02:26:17 UTC (rev
94983)
@@ -7,44 +7,50 @@
<link rel="stylesheet" href="es.css">
</head>
<body>
- <div id="es-toolbar" class="es-toolbar">
- <div class="es-toolbarGroup">
- <div class="es-toolbarLabel">Text</div>
- <div class="es-toolbarTool"
id="es-toolbar-bold"><img src="images/bold.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-italic"><img src="images/italic.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-link"><img src="images/link.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-small"><img src="images/small.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-big"><img src="images/big.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-sub"><img src="images/sub.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-super"><img src="images/super.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-clear"><img src="images/clear.png"></div>
+ <div id="es-base">
+ <div id="es-toolbar" class="es-toolbar">
+ <div class="es-toolbarGroup">
+ <div class="es-toolbarLabel">Text</div>
+ <div class="es-toolbarTool"
id="es-toolbar-bold"><img src="images/bold.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-italic"><img src="images/italic.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-link"><img src="images/link.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-small"><img src="images/small.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-big"><img src="images/big.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-sub"><img src="images/sub.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-super"><img src="images/super.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-clear"><img src="images/clear.png"></div>
+ <div style="clear:both"></div>
+ </div>
+ <div class="es-toolbarDivider"></div>
+ <div class="es-toolbarGroup">
+ <div class="es-toolbarLabel">Lists</div>
+ <div class="es-toolbarTool"
id="es-toolbar-bullet"><img src="images/bullet.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-number"><img src="images/number.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-indent"><img src="images/indent.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-outdent"><img src="images/outdent.png"></div>
+ <div style="clear:both"></div>
+ </div>
+ <div class="es-toolbarGroup
es-toolbarGroup-preview">
+ <div class="es-toolbarTool"
id="es-toolbar-json" rel="json"><img src="images/json.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-wikitext" rel="wikitext"><img src="images/wikitext.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-html" rel="html"><img src="images/html.png"></div>
+ <div class="es-toolbarTool"
id="es-toolbar-render" rel="render"><img src="images/render.png"></div>
+ </div>
<div style="clear:both"></div>
</div>
- <div class="es-toolbarDivider"></div>
- <div class="es-toolbarGroup">
- <div class="es-toolbarLabel">Lists</div>
- <div class="es-toolbarTool"
id="es-toolbar-bullet"><img src="images/bullet.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-number"><img src="images/number.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-indent"><img src="images/indent.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-outdent"><img src="images/outdent.png"></div>
+ <div id="es-panes">
+ <div id="es-visual">
+ <div id="es-editor"></div>
+ </div>
+ <div id="es-previews">
+ <div id="es-preview-wikitext"
class="es-preview es-code"></div>
+ <div id="es-preview-json"
class="es-preview es-code"></div>
+ <div id="es-preview-html"
class="es-preview es-code"></div>
+ <div id="es-preview-render"
class="es-preview es-render"></div>
+ </div>
<div style="clear:both"></div>
</div>
- <div class="es-toolbarGroup es-toolbarGroup-right">
- <div class="es-toolbarTool"
id="es-toolbar-json"><img src="images/json.png"></div>
- <div class="es-toolbarTool"
id="es-toolbar-wikitext"><img src="images/wikitext.png"></div>
- </div>
- <div style="clear:both"></div>
</div>
- <div id="es-panes">
- <div id="es-visual">
- <div id="es-editor"></div>
- </div>
- <div id="es-data">
- <div id="es-wikitext" class="es-code"></div>
- <div id="es-json" class="es-code"></div>
- </div>
- <div style="clear:both"></div>
- </div>
<!-- EditSurface -->
<script src="../../lib/jquery.js"></script>
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
