Merge pull request #164 from pbondoer/staging

UI improvements

customize.dist/pages.js

@@ -263,7 +263,7 @@ define([
                                 [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
                                 [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
                                 [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
-                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_recentPads, 'fa-hdd-o' ]
+                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
                             ].map(function (x) {
                                 return h('a', [
                                     { href: x[1] },

customize.dist/src/less2/include/alertify.less

@@ -39,14 +39,14 @@
             box-shadow: @alertify_box-shadow;
             &, &.default {
                 // FIXME
-                background: rgba(0, 0, 0, .8);
+                background: @colortheme_notification-log;
             }
             &.error {
                 font-weight: bold;
-                background: @colortheme_cp-red;
+                background: @colortheme_notification-warn;
             }
             &.success {
-                background: rgba(0, 0, 0, .8);
+                background: @colortheme_notification-log;
             }
         }
     }

customize.dist/src/less2/include/colortheme.less

@@ -24,6 +24,9 @@
 @colortheme_alertify-red: #E55236;
 @colortheme_alertify-green: #77C825;
 
+@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
+
 // Apps
 
 @colortheme_pad-bg: #1c4fa0;

customize.dist/src/less2/include/mediatag.less

@@ -0,0 +1,18 @@
+.mediatag_base() {
+    media-tag {
+        min-height: 0;
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        text-align: center;
+    }
+
+    media-tag img {
+        flex: 1;
+        max-height: 100% !important;
+    }
+
+    media-tag iframe {
+        min-height: 100%;
+    }
+}

customize.dist/translations/messages.js

@@ -525,7 +525,7 @@ define(function () {
     out.main_slidePad = 'Markdown Presentation';
     out.main_pollPad = 'Poll or Schedule';
     out.main_whiteboardPad = 'Whiteboard';
-    out.main_recentPads = 'Recent Pads';
+    out.main_localPads = 'Local Pads';
 
     out.footer_applications = "Applications";
     out.footer_contact = "Contact";

www/code/code.less

@@ -59,8 +59,14 @@ body {
     box-sizing: border-box;
     font-family: Calibri,Ubuntu,sans-serif;
     word-wrap: break-word;
-    media-tag * {
-        max-width:100%;
+    position: relative;
+    media-tag {
+        * {
+            max-width:100%;
+        }
+        iframe[type="application/pdf"] {
+            max-height:50vh;
+        }
     }
 }
 
@@ -72,6 +78,17 @@ body {
     .markdown_gfm-table(black);
 }
 
+.cp-splitter {
+    position: absolute;
+    height: 100%;
+    width: 8px;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+
+    cursor: col-resize;
+}
+
 @media (max-width: @media-medium-screen) {
     .CodeMirror {
         flex: 1;

www/code/inner.js

@@ -4,6 +4,7 @@ define([
     'cm/lib/codemirror',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',

www/code/main.js

@@ -387,6 +387,26 @@ define([
                     }
                 });
 
+                // add the splitter
+                var splitter = $('<div>', {
+                    'class': 'cp-splitter'
+                }).appendTo($iframe.find('#previewContainer'));
+
+                var $target = $iframe.find('.CodeMirror');
+                splitter.on('mousedown', function (e) {
+                    e.preventDefault();
+                    var x = e.pageX;
+                    var w = $target.width();
+
+                    $iframe.on('mouseup mousemove', function handler(evt) {
+                        if (evt.type === 'mouseup') {
+                            $iframe.off('mouseup mousemove', handler);
+                            return;
+                        }
+                        $target.css('width', (w - x + evt.pageX) + 'px');
+                    });
+                });
+
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;

www/common/diffMarked.js

@@ -60,6 +60,10 @@ define([
         return out;
     };
 
+    renderer.paragraph = function (p) {
+        return /<media\-tag[\s\S]*>/i.test(p)? p + '\n': '<p>' + p + '</p>\n';
+    };
+
     var MutationObserver = window.MutationObserver;
     var forbiddenTags = [
         'SCRIPT',

www/slide/slide.less

@@ -336,6 +336,15 @@ div#modal #content, #print {
             padding-left: 0.3em;
         }
 
+        // fixes image overflowing
+        media-tag {
+            height: 100%;
+
+            & + * {
+                margin-top: 1rem;
+            }
+        }
+
         img {
             position: relative;
             min-width: 1%;
@@ -383,19 +392,6 @@ p {
     //flex: 1;
 }
 
-media-tag {
-    min-height: 0;
-    flex: 1;
-    display: flex;
-    flex-flow: column;
-    text-align: center;
-}
+@import "../customize/src/less2/include/mediatag.less";
 
-media-tag img {
-    flex: 1;
-    max-height: 100% !important;
-}
-
-media-tag iframe {
-  min-height: 100%;
-}
+.mediatag_base();