make updates

2016-06-25 21:57:10 +01:00
parent 4274a181a5
commit 669cb2c4ae
32 changed files with 997 additions and 211 deletions
--- a/assets/public/css/styles.css
+++ b/assets/public/css/styles.css
@@ -325,6 +325,12 @@ header p i {
 font-size: 1em !important;
 color: rgba(255, 255, 255, .31);
 }
+header #logout {
+    background-color: rgba(0,0,0,0.1);
+    border-radius: 0;
+    margin: -0.5em;
+    padding: .5em;
+}
 header p i {
 vertical-align: middle;
 }
@@ -414,6 +420,7 @@ header form input {
 }
 .action.disabled {
 opacity: 0.2;
+ cursor: not-allowed;
 }
 .action i {
 padding: 0.5em;
@@ -486,13 +493,30 @@ i.spin {

 /* EDITOR */

+
+#editor .block {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    display: block;
+    border-radius: .2em;
+    padding: .5em;
+    margin-bottom: 1em;
+    break-inside: avoid;
+    background-color: #fff;
+}
+
 #editor .frontmatter {
- border: 1px solid #ddd;
- background: #fff;
+ /* border: 1px solid #ddd; */
+ /* background: #fff; */
+ column-count: 3;
+ column-gap: 1em;
+ margin-bottom: 1em;
+ display: flex;
+ flex-direction: column;
 }
 #editor label {
- display: inline-block;
+ display: block;
 width: 19%;
+ font-size: 2em;
 }
 #editor fieldset {
 margin: 0;
@@ -503,3 +527,10 @@ i.spin {
 #editor button {
 display: none;
 }
+#editor textarea[name="content"] {
+    display: none;
+}
+
+#editor h3 {
+    font-size: .8rem;
+}
--- a/assets/public/js/application.js
+++ b/assets/public/js/application.js
@@ -111,6 +111,9 @@ var handleViewType = function (viewList) {

 // Handles the open file button event
 var openEvent = function (event) {
+ if (this.classList.contains('disabled')) {
+  return false;
+ }
 if (selectedItems.length) {
  window.open(selectedItems[0] + '?raw=true');
  return false;
@@ -181,6 +184,9 @@ var preventDefault = function (event) {

 // Rename file event
 var renameEvent = function (event) {
+ if (this.classList.contains('disabled')) {
+  return false;
+ }
 if (selectedItems.length) {
  Array.from(selectedItems).forEach(link => {
   let item = document.getElementById(link);
@@ -248,6 +254,9 @@ var renameEvent = function (event) {

 // Download file event
 var downloadEvent = function (event) {
+ if (this.classList.contains('disabled')) {
+  return false;
+ }
 if (selectedItems.length) {
  Array.from(selectedItems).forEach(item => {
   window.open(item + "?download=true");
@@ -416,15 +425,39 @@ document.addEventListener("DOMContentLoaded", function (event) {
  }, false);
 }

-
 if (document.getElementById('editor')) {
-     handleEditorPage();
+  handleEditorPage();
 }

 return false;
 });

-var handleEditorPage = function() {
-    
-    return false;
+var handleEditorPage = function () {
+    let container = document.getElementById('editor');
+    let kind = container.dataset.kind;
+
+    if (kind != 'frontmatter-only') {
+        let editor = document.getElementById('editor-source');
+        let mode = editor.dataset.mode;
+        let textarea = document.querySelector('textarea[name="content"]');
+        let aceEditor =  ace.edit('editor-source');
+        aceEditor.getSession().setMode("ace/mode/" + mode);
+        aceEditor.getSession().setValue(textarea.value);
+        aceEditor.getSession().on('change', function() {
+          textarea.value = aceEditor.getSession().getValue();
+        });
+        aceEditor.setOptions({
+          wrap: true,
+          maxLines: Infinity,
+          theme: "ace/theme/github",
+          showPrintMargin: false,
+          fontSize: "1em",
+          minLines: 20
+        });
+    }
+
+
+
+
+ return false;
 }
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -18,6 +18,7 @@
  {{ end }}
 </head>
 <body>
+     
  <header>
   <div>
    {{ $lnk := .PreviousLink }}
--- a/assets/templates/editor.tmpl
+++ b/assets/templates/editor.tmpl
@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div id="editor" class="container {{ .Class }}">
+<div id="editor" class="container" data-kind="{{ .Class }}">
    <form method="POST" action="./">
        {{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
        <div class="frontmatter">
@@ -10,7 +10,7 @@

        {{ if or (eq .Class "content-only") (eq .Class "complete") }}
        <div class="content">
-          <div id="editor" data-mode="{{ .Mode }}"></div>
+          <div id="editor-source" data-mode="{{ .Mode }}"></div>
          <textarea name="content">{{ .Content }}</textarea>
        </div>
        {{ end }}