Use less2 in secure iframes

2017-09-04 15:09:54 +02:00
parent f12f4bb925
commit 86e23ac19f
52 changed files with 1677 additions and 1574 deletions
--- a/www/code2/app-code.less
+++ b/www/code2/app-code.less
@@ -0,0 +1,95 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+
+// body
+&.cp-app-code {
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    min-height: auto;
+
+    .CodeMirror {
+        display: inline-block;
+        height: 100%;
+        width: 50%;
+        min-width: 20%;
+        max-width: 80%;
+        resize: horizontal;
+        font-size: initial;
+    }
+    .CodeMirror.fullPage {
+        //min-width: 100%;
+        max-width: 100%;
+        resize: none;
+        flex: 1;
+    }
+    .CodeMirror-focused .cm-matchhighlight {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+        background-position: bottom;
+        background-repeat: repeat-x;
+    }
+    #cp-app-code-editor {
+        flex: 1;
+        display: flex;
+        flex-flow: row;
+        height: 100%;
+        overflow: hidden;
+    }
+    #cp-app-code-preview {
+        flex: 1;
+        padding: 5px 20px;
+        overflow: auto;
+        display: inline-block;
+        height: 100%;
+        border-left: 1px solid black;
+        box-sizing: border-box;
+        font-family: Calibri,Ubuntu,sans-serif;
+        word-wrap: break-word;
+        position: relative;
+        media-tag {
+            * {
+                max-width:100%;
+            }
+            iframe[type="application/pdf"] {
+                max-height:50vh;
+            }
+        }
+    }
+
+    #cp-app-code-preview-content {
+        max-width: 40vw;
+        margin: 1em auto;
+
+        .markdown_preformatted-code;
+        .markdown_gfm-table(black);
+    }
+
+    .cp-splitter {
+        position: absolute;
+        height: 100%;
+        width: 8px;
+        top: 0;
+        left: 0;
+
+        cursor: col-resize;
+    }
+
+    @media (max-width: @browser_media-medium-screen) {
+        .CodeMirror {
+            flex: 1;
+            max-width: 100%;
+            resize: none;
+        }
+        #cp-app-code-preview {
+            display: none !important;
+        }
+}
+}
+
--- a/www/code2/code.less
+++ b/www/code2/code.less
@@ -1,102 +0,0 @@
-@import "/customize/src/less/variables.less";
-@import "/customize/src/less/mixins.less";
-@import "/common/markdown.less";
-@import "/common/file-dialog.less";
-
-html, body{
-    height: 100%;
-    width: 100%;
-    padding: 0px;
-    margin: 0px;
-    overflow: hidden;
-    box-sizing: border-box;
-    position: relative;
-}
-body {
-    display: flex;
-    flex-flow: column;
-    max-height: 100%;
-    min-height: auto;
-}
-
-@slideTime: 500ms;
-.CodeMirror {
-    display: inline-block;
-    height: 100%;
-    width: 50%;
-    &.transition {
-        transition: width @slideTime, min-width @slideTime, max-width @slideTime;
-    }
-    min-width: 20%;
-    max-width: 80%;
-    resize: horizontal;
-    font-size: initial;
-}
-.CodeMirror.fullPage {
-    //min-width: 100%;
-    max-width: 100%;
-    resize: none;
-    flex: 1;
-}
-.CodeMirror-focused .cm-matchhighlight {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-    background-position: bottom;
-    background-repeat: repeat-x;
-}
-#editorContainer {
-    flex: 1;
-    display: flex;
-    flex-flow: row;
-    height: 100%;
-    overflow: hidden;
-}
-#previewContainer {
-    flex: 1;
-    padding: 5px 20px;
-    overflow: auto;
-    display: inline-block;
-    height: 100%;
-    border-left: 1px solid black;
-    box-sizing: border-box;
-    font-family: Calibri,Ubuntu,sans-serif;
-    word-wrap: break-word;
-    position: relative;
-    media-tag {
-        * {
-            max-width:100%;
-        }
-        iframe[type="application/pdf"] {
-            max-height:50vh;
-        }
-    }
-}
-
-#preview {
-    max-width: 40vw;
-    margin: 1em auto;
-
-    .markdown_preformatted-code;
-    .markdown_gfm-table(black);
-}
-
-.cp-splitter {
-    position: absolute;
-    height: 100%;
-    width: 8px;
-    top: 0;
-    left: 0;
-
-    cursor: col-resize;
-}
-
-@media (max-width: @media-medium-screen) {
-    .CodeMirror {
-        flex: 1;
-        max-width: 100%;
-        resize: none;
-    }
-    #previewContainer {
-        display: none !important;
-    }
-}
-
--- a/www/code2/inner.html
+++ b/www/code2/inner.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
-<html style="height: 100%;">
+<html class="cp-app-noscroll">
 <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <script async data-bootload="/code2/inner.js" data-main="/common/sframe-boot.js?ver=1.1" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
    <style> .loading-hidden { display: none; } </style>
 </head>
-<body class="app-code">
-  <div id="cme_toolbox" class="toolbar-container"></div>
-  <div id="editorContainer">
+<body class="cp-app-code">
+  <div id="cme_toolbox" class="cp-toolbar-container"></div>
+  <div id="cp-app-code-editor">
    <textarea id="editor1" name="editor1"></textarea>
-    <div id="previewContainer"><div id="preview"></div></div>
+    <div id="cp-app-code-preview">
+        <div id="cp-app-code-preview-content"></div>
+    </div>
  </div>
 </body>
 </html>
--- a/www/code2/inner.js
+++ b/www/code2/inner.js
@@ -17,9 +17,7 @@ define([

    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
-    'less!/customize/src/less/toolbar.less',
-    'less!/code2/code.less',
+    'less!/customize/src/less2/main.less',

    'css!cm/lib/codemirror.css',
    'css!cm/addon/dialog/dialog.css',
@@ -88,9 +86,9 @@ define([

        var isHistoryMode = false;

-        var $contentContainer = $('#editorContainer');
-        var $previewContainer = $('#previewContainer');
-        var $preview = $('#preview');
+        var $contentContainer = $('#cp-app-code-editor');
+        var $previewContainer = $('#cp-app-code-preview');
+        var $preview = $('#cp-app-code-preview-content');
        $preview.click(function (e) {
            if (!e.target) { return; }
            var $t = $(e.target);
@@ -370,7 +368,7 @@ define([
            common.initFilePicker(common, fileDialogCfg);
            APP.$mediaTagButton = $('<button>', {
                title: Messages.filePickerButton,
-                'class': 'rightside-button fa fa-picture-o',
+                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
                style: 'font-size: 17px'
            }).click(function () {
                common.openFilePicker(common);