Pad Not Pinned: Better CSS, moved element outside of the title element, added it in poll, better colors, tippy, and login/register in same window

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

@@ -46,18 +46,18 @@
 
 @colortheme_slide-bg: #e57614;
 @colortheme_slide-color: #fff;
-@colortheme_slide-warn: #7bccd1;
+@colortheme_slide-warn: #58D697;
 
 @colortheme_code-bg: #ffae00;
 @colortheme_code-color: #000;
-@colortheme_code-warn: #005bef;
+@colortheme_code-warn: #9A37F7;
 
 @colortheme_poll-bg: #006304;
 @colortheme_poll-color: #fff;
 @colortheme_poll-help-bg: #bbffbb;
 @colortheme_poll-th-bg: #005bef;
 @colortheme_poll-th-fg: #fff;
-@colortheme_poll-warn: #cd2532;
+@colortheme_poll-warn: #ffae00;
 
 @colortheme_whiteboard-bg: #800080;
 @colortheme_whiteboard-color: #fff;

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

@@ -421,10 +421,45 @@
         height: @toolbar_top-height;
         position: relative;
         width: 100%;
+
+        .cp-pad-not-pinned {
+            order: 4;
+            flex: 1;
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            align-self: center;
+            padding-left: 20px;
+            padding-right: 5px;
+            font-size: @colortheme_app-font-size;
+            color: @warn-color;
+            .cp-pnp-msg {
+                padding-left: 5px;
+                font-family: @colortheme_font;
+                font-size: @colortheme_app-font-size;
+                a {
+                    font-size: @colortheme_app-font-size;
+                    font-weight: bold;
+                    color: @warn-color;
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+                @media screen and (max-width: (@browser_media-not-big)) {
+                    display: none;
+                }
+            }
+            @media screen and (max-width: (@browser_media-not-big)) {
+                overflow: visible;
+                max-width: 20px;
+            }
+        }
         .cp-toolbar-top-filler {
             height: @toolbar_top-height;
             display: inline-block;
-            order: 4;
+            order: 5;
             //flex: 1;
         }
         .cp-toolbar-title {
@@ -504,35 +539,6 @@
                 padding: 5px 5px;
                 height: 40px;
             }
-            .cp-pad-not-pinned {
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-    
-                align-self: right;
-                padding-left: 20px;
-                padding-left: 5px;
-                font-size: @colortheme_app-font-size;
-                color: @warn-color;
-                .cp-pnp-msg {
-                    padding-left: 5px;
-                    a {
-                        font-size: @colortheme_app-font-size;
-                        font-weight: bold;
-                        color: @warn-color;
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-                    @media screen and (max-width: (@browser_media-not-big)) {
-                        display: none;
-                    }
-                }
-                @media screen and (max-width: (@browser_media-not-big)) {
-                    overflow: visible;
-                }
-    
-            }
         }
         .cp-toolbar-link, .cp-toolbar-new {
             font-size: 48px;
@@ -615,7 +621,7 @@
         .cp-toolbar-user {
             height: @toolbar_top-height;
             display: inline-flex;
-            order: 5;
+            order: 6;
             line-height: @toolbar_top-height;
             color: white;
             .cp-toolbar-new { order: 2; }

www/common/toolbar3.js

@@ -731,20 +731,31 @@ define([
             if (x.response[0] === true) { return; }
             var pnpTitle = Messages._getKey('padNotPinned', ['','','','']);
             var pnpMsg = Messages._getKey('padNotPinned', [
-                '<a href="' + o + '/login" target="blank" title>',
+                '<a href="' + o + '/login" class="cp-pnp-login" target="blank" title>',
                 '</a>',
-                '<a href="' + o + '/register" target="blank" title>',
+                '<a href="' + o + '/register" class="cp-pnp-register" target="blank" title>',
                 '</a>'
             ]);
-            var msg = $('<span>', {
+            var $msg = $('<span>', {
-                'class': 'cp-pad-not-pinned',
+                'class': 'cp-pad-not-pinned'
-                'title': pnpTitle
             }).append([
-                $('<span>', {'class': 'fa fa-exclamation-triangle'}),
+                $('<span>', {'class': 'fa fa-exclamation-triangle', 'title': pnpTitle}),
                 $('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
             ]);
-            $('.cp-toolbar-title').append(msg);
+            $msg.find('a.cp-pnp-login').click(function (ev) {
-            console.log("This pad is not pinned");
+                ev.preventDefault();
+                Common.setLoginRedirect(function () {
+                    window.parent.location = o + '/login/';
+                });
+            });
+            $msg.find('a.cp-pnp-register').click(function (ev) {
+                ev.preventDefault();
+                Common.setLoginRedirect(function () {
+                    window.parent.location = o + '/register/';
+                });
+            });
+            $('.cp-toolbar-top').append($msg);
+            UI.addTooltips();
         });
     };
 

www/poll/inner.js

@@ -1079,7 +1079,16 @@ define([
         Title = common.createTitle(titleCfg);
 
         var configTb = {
-            displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
+            displayed: [
+                'userlist',
+                'title',
+                'useradmin',
+                'spinner',
+                'newpad',
+                'share',
+                'limit',
+                'unpinnedWarning'
+            ],
             title: Title.getTitleConfig(),
             metadataMgr: metadataMgr,
             readOnly: APP.readOnly,