CSS theming
This commit is contained in:
benweet
parent
7bc1a3ccc1
commit
b98ff39296
130
css/main.css
130
css/main.css
@ -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 |
12
index.html
12
index.html
@ -63,13 +63,11 @@
|
||||
data-toggle="dropdown" href="#" title="Menu"><img
|
||||
src="img/stackedit-16.png" /> <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
|
||||
|
||||
134
js/main.js
134
js/main.js
@ -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");
|
||||
}
|
||||
}
|
||||
@ -27,26 +27,28 @@ var synchronizer = (function($) {
|
||||
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;
|
||||
@ -57,10 +59,10 @@ var synchronizer = (function($) {
|
||||
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);
|
||||
@ -73,7 +75,7 @@ var synchronizer = (function($) {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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,22 +141,42 @@ 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() {
|
||||
@ -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;
|
||||
@ -282,22 +307,23 @@ var core = (function($) {
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
@ -305,22 +331,22 @@ var core = (function($) {
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user