CSS theming

This commit is contained in:
benweet 2013-03-29 19:37:52 +00:00
parent 7bc1a3ccc1
commit b98ff39296
5 changed files with 205 additions and 109 deletions

View File

@ -1,6 +1,5 @@
body { body {
background-image: url(../img/honeycomb.png); background-color: #f5f5f5;
background-repeat: repeat;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -8,16 +7,111 @@ body {
user-select: none; user-select: none;
} }
/*
Override Bootstrap
*/
div, span, a, ul, li, textarea, input {
background-image: none !important;
filter: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn, .navbar-inner, .well, textarea, input {
border: none !important;
}
.navbar-inner .btn {
background-color: #ddd;
}
.navbar-inner .btn:hover,
.navbar-inner .btn:focus,
.navbar-inner .btn:active,
.navbar-inner .btn.active,
.btn-group.open .btn.dropdown-toggle {
color: #333333;
background-color: #eee;
}
.navbar-inner .btn.disabled,
.navbar-inner .btn[disabled] {
color: #333333;
background-color: #ddd;
opacity: 0.3;
filter: alpha(opacity=30);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: #999;
}
.btn-primary {
background-color: #888;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #999;
}
.btn-group {
margin-left: 5px !important;
margin-right: 5px !important;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.navbar-inner {
background-color: #ddd !important;
}
code {
color: #333333 !important;
}
h1 {
margin: 50px 0 20px;
}
h2 {
margin-top: 30px;
}
p, pre, blockquote {
margin: 0 0 20px;
}
hr {
border-top: 1px solid #ddd;
margin: 30px 0;
}
#navbar { #navbar {
position: static; position: static;
} }
#menu-bar { #menu-bar {
margin-right: 20px; margin-right: 15px;
} }
#wmd-button-bar { #wmd-button-bar {
margin-left: 20px; margin-left: 15px;
} }
#wmd-input,#wmd-preview { #wmd-input,#wmd-preview {
@ -39,7 +133,7 @@ body {
} }
.wmd-spacer { .wmd-spacer {
margin: 0 5px; margin: 0 10px;
display: inline-block; display: inline-block;
} }
@ -69,13 +163,6 @@ body {
font-weight: bold; font-weight: bold;
} }
.ui-layout-center,.ui-layout-east,.ui-layout-south {
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
border-color: #cccccc !important;
}
.icon-code { .icon-code {
background-position: -384px -168px; background-position: -384px -168px;
} }
@ -107,18 +194,8 @@ body {
margin: 13px 15px 0; margin: 13px 15px 0;
} }
.ui-layout-toggler-north { .ui-layout-toggler-north .caret, .ui-layout-toggler-south .caret {
margin-top: -3px !important; margin-top: 5px;
height: 18px !important;
}
.ui-layout-toggler-south {
margin-top: 3px !important;
height: 18px !important;
}
.ui-layout-toggler-south .caret {
margin-top: 6px;
} }
.ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret .ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret
@ -137,11 +214,6 @@ body {
border-bottom: 0; border-bottom: 0;
} }
.ui-layout-toggler-east {
margin-left: 3px !important;
width: 18px !important;
}
.ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret { .ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret {
margin-top: 40px; margin-top: 40px;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 387 B

View File

@ -63,13 +63,11 @@
data-toggle="dropdown" href="#" title="Menu"><img data-toggle="dropdown" href="#" title="Menu"><img
src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a> src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="action-create-file" href="#" <li><a class="action-download-md" href="#"
title="Create a new local file"><i class="icon-file"></i> New title="Download the current file as Markdown"><i class="icon-download-alt"></i> Download as MD</a></li>
file</a></li> <li><a class="action-download-html" href="#"
<li><a href="#" title="Download the current file as HTML"><i
title="Delete the current file locally" data-toggle="modal" class="icon-download-alt"></i> Download as HTML</a></li>
data-target="#modal-remove-file-confirm"><i
class="icon-trash"></i> Remove file</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a class="action-upload-gdrive" <li><a class="action-upload-gdrive"
href="#"><i class="icon-gdrive"></i> Save href="#"><i class="icon-gdrive"></i> Save

View File

@ -7,14 +7,14 @@ var FLAG_GDRIVE_UPLOAD = 1;
var FLAG_SYNCHRONIZE = 2; var FLAG_SYNCHRONIZE = 2;
function setWorkingIndicator(flag) { function setWorkingIndicator(flag) {
workingIndicator |= flag; workingIndicator |= flag;
if(workingIndicator) { if (workingIndicator) {
$(".working-indicator").removeClass("hide"); $(".working-indicator").removeClass("hide");
} }
} }
function unsetWorkingIndicator(flag) { function unsetWorkingIndicator(flag) {
workingIndicator &= ~flag; workingIndicator &= ~flag;
if(!workingIndicator) { if (!workingIndicator) {
$(".working-indicator").addClass("hide"); $(".working-indicator").addClass("hide");
} }
} }
@ -27,26 +27,28 @@ var synchronizer = (function($) {
var syncQueue = undefined; var syncQueue = undefined;
synchronizer.init = function() { synchronizer.init = function() {
syncQueue = ";"; syncQueue = ";";
// Load the queue from localStorage in case a previous synchronization was aborted // Load the queue from localStorage in case a previous synchronization
if(localStorage["sync.queue"]) { // was aborted
if (localStorage["sync.queue"]) {
syncQueue = localStorage["sync.queue"]; syncQueue = localStorage["sync.queue"];
} }
if(localStorage["sync.current"]) { if (localStorage["sync.current"]) {
this.addFile(localStorage["sync.current"]); this.addFile(localStorage["sync.current"]);
} }
}; };
// Add a file to the synchronization queue // Add a file to the synchronization queue
synchronizer.addFile = function(fileIndex) { synchronizer.addFile = function(fileIndex) {
if(syncQueue.indexOf(";" + fileIndex + ";") === -1) { if (syncQueue.indexOf(";" + fileIndex + ";") === -1) {
syncQueue += fileIndex + ";"; syncQueue += fileIndex + ";";
localStorage["sync.queue"] = syncQueue; localStorage["sync.queue"] = syncQueue;
} }
}; };
// Recursive function to run synchronization of a single file on multiple locations // Recursive function to run synchronization of a single file on multiple
// locations
function sync(fileSyncIndexList, content, title) { function sync(fileSyncIndexList, content, title) {
if(fileSyncIndexList.length === 0) { if (fileSyncIndexList.length === 0) {
localStorage.removeItem("sync.current"); localStorage.removeItem("sync.current");
unsetWorkingIndicator(FLAG_SYNCHRONIZE); unsetWorkingIndicator(FLAG_SYNCHRONIZE);
running = false; running = false;
@ -57,10 +59,10 @@ var synchronizer = (function($) {
var fileSyncIndex = fileSyncIndexList.pop(); var fileSyncIndex = fileSyncIndexList.pop();
// Try to find the provider // Try to find the provider
if(fileSyncIndex.indexOf(SYNC_PROVIDER_GDRIVE) === 0) { if (fileSyncIndex.indexOf(SYNC_PROVIDER_GDRIVE) === 0) {
var id = fileSyncIndex.substring(SYNC_PROVIDER_GDRIVE.length); var id = fileSyncIndex.substring(SYNC_PROVIDER_GDRIVE.length);
gdrive.updateFile(id, title, content, function(result) { gdrive.updateFile(id, title, content, function(result) {
if(!result) { if (!result) {
showError("Error while uploading file on Google Drive"); showError("Error while uploading file on Google Drive");
} }
sync(fileSyncIndexList, content, title); sync(fileSyncIndexList, content, title);
@ -73,7 +75,7 @@ var synchronizer = (function($) {
var running = false; var running = false;
synchronizer.run = function() { synchronizer.run = function() {
// If synchronization is already running or nothing to synchronize // If synchronization is already running or nothing to synchronize
if(running || syncQueue.length === 1) { if (running || syncQueue.length === 1) {
return; return;
} }
@ -107,10 +109,13 @@ var fileManager = (function($) {
fileManager.init = function() { fileManager.init = function() {
synchronizer.init(); synchronizer.init();
fileManager.selectFile(); fileManager.selectFile();
// Save file automatically and synchronize
window.setInterval(function() { window.setInterval(function() {
fileManager.saveFile(); fileManager.saveFile();
synchronizer.run(); synchronizer.run();
}, 3000); }, 1000);
$(".action-create-file").click(function() { $(".action-create-file").click(function() {
fileManager.saveFile(); fileManager.saveFile();
fileManager.createFile(); fileManager.createFile();
@ -136,22 +141,42 @@ var fileManager = (function($) {
fileManager.updateFileTitleUI(); fileManager.updateFileTitleUI();
save = true; save = true;
}); });
$(".action-upload-gdrive").click(function() { $(".action-download-md").click(
$(".file-sync-indicator").removeClass("hide"); function() {
var fileIndex = localStorage["file.current"]; var content = $("#wmd-input").val();
var content = localStorage[fileIndex + ".content"]; var uriContent = "data:application/octet-stream,"
var title = localStorage[fileIndex + ".title"]; + encodeURIComponent(content);
(function(fileIndex) { window.open(uriContent, 'file');
gdrive.createFile(title, content, function(fileSyncIndex) { });
if(fileSyncIndex) { $(".action-download-html").click(
localStorage[fileIndex + ".sync"] += fileSyncIndex + ";"; function() {
} var content = $("#wmd-preview").html();
else { var uriContent = "data:application/octet-stream,"
showError("Error while creating file on Google Drive"); + encodeURIComponent(content);
} window.open(uriContent, 'file');
});
$(".action-upload-gdrive")
.click(
function() {
$(".file-sync-indicator").removeClass("hide");
var fileIndex = localStorage["file.current"];
var content = localStorage[fileIndex + ".content"];
var title = localStorage[fileIndex + ".title"];
(function(fileIndex) {
gdrive
.createFile(
title,
content,
function(fileSyncIndex) {
if (fileSyncIndex) {
localStorage[fileIndex + ".sync"] += fileSyncIndex
+ ";";
} else {
showError("Error while creating file on Google Drive");
}
});
})(fileIndex);
}); });
})(fileIndex);
});
}; };
fileManager.selectFile = function() { fileManager.selectFile = function() {
@ -199,7 +224,8 @@ var fileManager = (function($) {
fileManager.deleteFile = function() { fileManager.deleteFile = function() {
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
localStorage.removeItem("file.current"); localStorage.removeItem("file.current");
localStorage["file.list"] = localStorage["file.list"].replace(";" + fileIndex + ";", ";"); localStorage["file.list"] = localStorage["file.list"].replace(";"
+ fileIndex + ";", ";");
localStorage.removeItem(fileIndex + ".sync"); localStorage.removeItem(fileIndex + ".sync");
localStorage.removeItem(fileIndex + ".title"); localStorage.removeItem(fileIndex + ".title");
localStorage.removeItem(fileIndex + ".content"); localStorage.removeItem(fileIndex + ".content");
@ -239,20 +265,19 @@ var fileManager = (function($) {
if (fileDesc.index == fileIndex) { if (fileDesc.index == fileIndex) {
li.addClass("disabled"); li.addClass("disabled");
} else { } else {
a.prop("href", "#").click( a.prop("href", "#").click((function(fileIndex) {
(function(fileIndex) { return function() {
return function() { localStorage["file.current"] = fileIndex;
localStorage["file.current"] = fileIndex; fileManager.selectFile();
fileManager.selectFile(); };
}; })(fileDesc.index));
})(fileDesc.index));
} }
$("#file-selector").append(li); $("#file-selector").append(li);
} }
}; };
fileManager.saveFile = function() { fileManager.saveFile = function() {
if(save) { if (save) {
var content = $("#wmd-input").val(); var content = $("#wmd-input").val();
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
localStorage[fileIndex + ".content"] = content; localStorage[fileIndex + ".content"] = content;
@ -282,22 +307,23 @@ var core = (function($) {
}); });
}; };
var settings = { var settings = { layoutOrientation : "horizontal" };
layoutOrientation: "horizontal"
};
core.loadSettings = function() { core.loadSettings = function() {
if(localStorage.settings) { if (localStorage.settings) {
$.extend(settings, JSON.parse(localStorage.settings)); $.extend(settings, JSON.parse(localStorage.settings));
} }
// Layout orientation // Layout orientation
$("input:radio[name=radio-layout-orientation][value=" + settings.layoutOrientation + "]").prop("checked", true); $(
"input:radio[name=radio-layout-orientation][value="
+ settings.layoutOrientation + "]").prop("checked", true);
}; };
core.saveSettings = function() { core.saveSettings = function() {
// Layout orientation // Layout orientation
settings.layoutOrientation = $("input:radio[name=radio-layout-orientation]:checked").prop("value"); settings.layoutOrientation = $(
"input:radio[name=radio-layout-orientation]:checked").prop("value");
localStorage.settings = JSON.stringify(settings); localStorage.settings = JSON.stringify(settings);
}; };
@ -305,22 +331,22 @@ var core = (function($) {
core.createLayout = function() { core.createLayout = function() {
var layout = undefined; var layout = undefined;
var layoutGlobalConfig = { closable : true, resizable : false, var layoutGlobalConfig = { closable : true, resizable : false,
slidable : false, livePaneResizing : true, spacing_open : 20, slidable : false, livePaneResizing : true, spacing_open : 15,
spacing_closed : 20, togglerLength_open : 90, spacing_closed : 15, togglerLength_open : 90,
togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100, togglerLength_closed : 90, center__minWidth : 100,
stateManagement__enabled : false, }; center__minHeight : 100, stateManagement__enabled : false, };
if (settings.layoutOrientation == "horizontal") { if (settings.layoutOrientation == "horizontal") {
$(".ui-layout-south").remove();
$(".ui-layout-east").addClass("well").prop("id", "wmd-preview"); $(".ui-layout-east").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout( layout = $('body').layout(
$.extend(layoutGlobalConfig, $.extend(layoutGlobalConfig, { east__resizable : true,
{ east__resizable : true, east__size : .5, east__minSize : 200, east__size : .5, east__minSize : 200 }));
south__closable : false, }));
} else if (settings.layoutOrientation == "vertical") { } else if (settings.layoutOrientation == "vertical") {
$(".ui-layout-east").remove(); $(".ui-layout-east").remove();
$(".ui-layout-south").addClass("well").prop("id", "wmd-preview"); $(".ui-layout-south").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout( layout = $('body').layout(
$.extend(layoutGlobalConfig, { south__resizable : true, $.extend(layoutGlobalConfig, { south__resizable : true,
south__size : .5, south__minSize : 200, })); south__size : .5, south__minSize : 200 }));
} }
$(".ui-layout-toggler-north").addClass("btn").append( $(".ui-layout-toggler-north").addClass("btn").append(
$("<b>").addClass("caret")); $("<b>").addClass("caret"));
@ -337,12 +363,12 @@ var core = (function($) {
$("#wmd-button-bar").empty(); $("#wmd-button-bar").empty();
var converter = Markdown.getSanitizingConverter(); var converter = Markdown.getSanitizingConverter();
var firstChange = true; var firstChange = true;
converter.hooks.chain("preConversion", function (text) { converter.hooks.chain("preConversion", function(text) {
if(!firstChange) { if (!firstChange) {
onTextChange(); onTextChange();
} }
return text; return text;
}); });
var editor = new Markdown.Editor(converter); var editor = new Markdown.Editor(converter);
editor.run(); editor.run();
firstChange = false; firstChange = false;