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 {
background-image: url(../img/honeycomb.png);
background-repeat: repeat;
background-color: #f5f5f5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -8,16 +7,111 @@ body {
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 {
position: static;
}
#menu-bar {
margin-right: 20px;
margin-right: 15px;
}
#wmd-button-bar {
margin-left: 20px;
margin-left: 15px;
}
#wmd-input,#wmd-preview {
@ -39,7 +133,7 @@ body {
}
.wmd-spacer {
margin: 0 5px;
margin: 0 10px;
display: inline-block;
}
@ -69,13 +163,6 @@ body {
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 {
background-position: -384px -168px;
}
@ -107,18 +194,8 @@ body {
margin: 13px 15px 0;
}
.ui-layout-toggler-north {
margin-top: -3px !important;
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 .caret, .ui-layout-toggler-south .caret {
margin-top: 5px;
}
.ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret
@ -137,11 +214,6 @@ body {
border-bottom: 0;
}
.ui-layout-toggler-east {
margin-left: 3px !important;
width: 18px !important;
}
.ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret {
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
src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="action-create-file" href="#"
title="Create a new local file"><i class="icon-file"></i> New
file</a></li>
<li><a href="#"
title="Delete the current file locally" data-toggle="modal"
data-target="#modal-remove-file-confirm"><i
class="icon-trash"></i> Remove file</a></li>
<li><a class="action-download-md" href="#"
title="Download the current file as Markdown"><i class="icon-download-alt"></i> Download as MD</a></li>
<li><a class="action-download-html" href="#"
title="Download the current file as HTML"><i
class="icon-download-alt"></i> Download as HTML</a></li>
<li class="divider"></li>
<li><a class="action-upload-gdrive"
href="#"><i class="icon-gdrive"></i> Save

View File

@ -7,14 +7,14 @@ var FLAG_GDRIVE_UPLOAD = 1;
var FLAG_SYNCHRONIZE = 2;
function setWorkingIndicator(flag) {
workingIndicator |= flag;
if(workingIndicator) {
if (workingIndicator) {
$(".working-indicator").removeClass("hide");
}
}
function unsetWorkingIndicator(flag) {
workingIndicator &= ~flag;
if(!workingIndicator) {
if (!workingIndicator) {
$(".working-indicator").addClass("hide");
}
}
@ -22,31 +22,33 @@ function unsetWorkingIndicator(flag) {
var SYNC_PROVIDER_GDRIVE = "sync.gdrive.";
var synchronizer = (function($) {
var synchronizer = {};
// A synchronization queue containing fileIndex that has to be synchronized
var syncQueue = undefined;
synchronizer.init = function() {
syncQueue = ";";
// Load the queue from localStorage in case a previous synchronization was aborted
if(localStorage["sync.queue"]) {
// Load the queue from localStorage in case a previous synchronization
// was aborted
if (localStorage["sync.queue"]) {
syncQueue = localStorage["sync.queue"];
}
if(localStorage["sync.current"]) {
if (localStorage["sync.current"]) {
this.addFile(localStorage["sync.current"]);
}
};
// Add a file to the synchronization queue
synchronizer.addFile = function(fileIndex) {
if(syncQueue.indexOf(";" + fileIndex + ";") === -1) {
if (syncQueue.indexOf(";" + fileIndex + ";") === -1) {
syncQueue += fileIndex + ";";
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) {
if(fileSyncIndexList.length === 0) {
if (fileSyncIndexList.length === 0) {
localStorage.removeItem("sync.current");
unsetWorkingIndicator(FLAG_SYNCHRONIZE);
running = false;
@ -55,12 +57,12 @@ var synchronizer = (function($) {
return;
}
var fileSyncIndex = fileSyncIndexList.pop();
// 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);
gdrive.updateFile(id, title, content, function(result) {
if(!result) {
if (!result) {
showError("Error while uploading file on Google Drive");
}
sync(fileSyncIndexList, content, title);
@ -69,33 +71,33 @@ var synchronizer = (function($) {
sync(fileSyncIndexList, content, title);
}
}
var running = false;
synchronizer.run = function() {
// If synchronization is already running or nothing to synchronize
if(running || syncQueue.length === 1) {
if (running || syncQueue.length === 1) {
return;
}
// Start synchronization of the next available in the queue
setWorkingIndicator(FLAG_SYNCHRONIZE);
running = true;
// Dequeue the fileIndex
var separatorPos = syncQueue.indexOf(";", 1);
var fileIndex = syncQueue.substring(1, separatorPos);
localStorage["sync.current"] = fileIndex;
syncQueue = syncQueue.substring(separatorPos);
localStorage["sync.queue"] = syncQueue;
var content = localStorage[fileIndex + ".content"];
var title = localStorage[fileIndex + ".title"];
// Parse the list of synchronized locations associated to the file
var fileSyncIndexList = localStorage[fileIndex + ".sync"].split(";");
sync(fileSyncIndexList, content, title);
};
return synchronizer;
})(jQuery);
@ -107,10 +109,13 @@ var fileManager = (function($) {
fileManager.init = function() {
synchronizer.init();
fileManager.selectFile();
// Save file automatically and synchronize
window.setInterval(function() {
fileManager.saveFile();
synchronizer.run();
}, 3000);
}, 1000);
$(".action-create-file").click(function() {
fileManager.saveFile();
fileManager.createFile();
@ -136,24 +141,44 @@ var fileManager = (function($) {
fileManager.updateFileTitleUI();
save = true;
});
$(".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");
}
$(".action-download-md").click(
function() {
var content = $("#wmd-input").val();
var uriContent = "data:application/octet-stream,"
+ encodeURIComponent(content);
window.open(uriContent, 'file');
});
$(".action-download-html").click(
function() {
var content = $("#wmd-preview").html();
var uriContent = "data:application/octet-stream,"
+ 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() {
// If file system does not exist
if (!localStorage["file.counter"] || !localStorage["file.list"]) {
@ -199,7 +224,8 @@ var fileManager = (function($) {
fileManager.deleteFile = function() {
var fileIndex = localStorage["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 + ".title");
localStorage.removeItem(fileIndex + ".content");
@ -239,20 +265,19 @@ var fileManager = (function($) {
if (fileDesc.index == fileIndex) {
li.addClass("disabled");
} else {
a.prop("href", "#").click(
(function(fileIndex) {
return function() {
localStorage["file.current"] = fileIndex;
fileManager.selectFile();
};
})(fileDesc.index));
a.prop("href", "#").click((function(fileIndex) {
return function() {
localStorage["file.current"] = fileIndex;
fileManager.selectFile();
};
})(fileDesc.index));
}
$("#file-selector").append(li);
}
};
fileManager.saveFile = function() {
if(save) {
if (save) {
var content = $("#wmd-input").val();
var fileIndex = localStorage["file.current"];
localStorage[fileIndex + ".content"] = content;
@ -266,61 +291,62 @@ var fileManager = (function($) {
var core = (function($) {
var core = {};
core.init = function() {
this.loadSettings();
this.createLayout();
$(".action-load-settings").click(function() {
core.loadSettings();
});
$(".action-apply-settings").click(function() {
core.saveSettings();
fileManager.saveFile();
location.reload();
});
};
var settings = {
layoutOrientation: "horizontal"
};
var settings = { layoutOrientation : "horizontal" };
core.loadSettings = function() {
if(localStorage.settings) {
if (localStorage.settings) {
$.extend(settings, JSON.parse(localStorage.settings));
}
// 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() {
// 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);
};
core.createLayout = function() {
var layout = undefined;
var layoutGlobalConfig = { closable : true, resizable : false,
slidable : false, livePaneResizing : true, spacing_open : 20,
spacing_closed : 20, togglerLength_open : 90,
togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
stateManagement__enabled : false, };
slidable : false, livePaneResizing : true, spacing_open : 15,
spacing_closed : 15, togglerLength_open : 90,
togglerLength_closed : 90, center__minWidth : 100,
center__minHeight : 100, stateManagement__enabled : false, };
if (settings.layoutOrientation == "horizontal") {
$(".ui-layout-south").remove();
$(".ui-layout-east").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig,
{ east__resizable : true, east__size : .5, east__minSize : 200,
south__closable : false, }));
$.extend(layoutGlobalConfig, { east__resizable : true,
east__size : .5, east__minSize : 200 }));
} else if (settings.layoutOrientation == "vertical") {
$(".ui-layout-east").remove();
$(".ui-layout-south").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig, { south__resizable : true,
south__size : .5, south__minSize : 200, }));
south__size : .5, south__minSize : 200 }));
}
$(".ui-layout-toggler-north").addClass("btn").append(
$("<b>").addClass("caret"));
@ -337,12 +363,12 @@ var core = (function($) {
$("#wmd-button-bar").empty();
var converter = Markdown.getSanitizingConverter();
var firstChange = true;
converter.hooks.chain("preConversion", function (text) {
if(!firstChange) {
converter.hooks.chain("preConversion", function(text) {
if (!firstChange) {
onTextChange();
}
return text;
});
return text;
});
var editor = new Markdown.Editor(converter);
editor.run();
firstChange = false;
@ -362,7 +388,7 @@ var core = (function($) {
$("#wmd-undo-button").append($("<i>").addClass("icon-undo"));
$("#wmd-redo-button").append($("<i>").addClass("icon-share-alt"));
};
return core;
})(jQuery);