diff --git a/src/static/css/pad.css b/src/static/css/pad.css index cf89ed35dfc..f5483d92440 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -53,6 +53,715 @@ a img { /* Not sure why important is required here but it is */ border: 1px solid #666 !important; } +.toolbar ul li a.grouped-left { + border-radius: 3px 0 0 3px; +} +.toolbar ul li a.grouped-middle { + border-radius: 0; + margin-left: -2px; + border-left: 0; +} +.toolbar ul li a.grouped-right { + border-radius: 0 3px 3px 0; + margin-left: -2px; + border-left: 0; +} +.toolbar ul li a.selected { + background: #eee !important; + background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; + background: -moz-linear-gradient(#EEE, #F0F0F0) !important; + background: -o-linear-gradient(#EEE, #F0F0F0) !important; + background: -ms-linear-gradient(#EEE, #F0F0F0) !important; + background: linear-gradient(#EEE, #F0F0F0) !important; +} +.toolbar ul li select { + background: #fff; + padding: 4px; + line-height: 22px; /* fix for safari (win/mac) */ + height: 28px; /* fix for chrome (mac) */ + border-radius: 3px; + border: 1px solid #ccc; + outline: none; +} +.toolbar ul.menu_left { + left:0px; + right:250px; +} + +.toolbar ul.menu_right { + right:0px; +} + +li[data-key=showusers] > a { + min-width: 30px; + text-align: left; +} +li[data-key=showusers] > a #online_count { + color: #777; + font-size: 11px; + position: relative; + top: 2px; + padding-left: 2px; +} +#editbar{ + display:none; +} + +#editorcontainer { + position: absolute; + top: 37px; /* + 1px border */ + left: 0px; + right: 0px; + bottom: 0px; + z-index: 1; + + /* Required to be able to scroll on iOS: */ + -webkit-overflow-scrolling: touch; +} +#editorcontainer iframe { + height: 100%; + width: 100%; + padding: 0; + margin: 0; + left: 0; /* Required for safari fixes RTL */ +} +#editorloadingbox { + padding-top: 100px; + padding-bottom: 100px; + font-size: 2.5em; + color: #aaa; + text-align: center; + position: absolute; + width: 100%; + height: 30px; + z-index: 100; +} + +#editorloadingbox .passForm{ + padding:10px; +} + +#editorloadingbox input{ + padding:10px; +} + +#editorloadingbox button{ + padding:10px; +} + +.loadingAnimation{ + -webkit-animation: loadingAnimation 2s infinite linear; + animation: loadingAnimation 2s infinite linear; + font-family: "fontawesome-etherpad"; + font-size:24px; + z-index:150; + width:25px; + height:25px; +} + +.loadingAnimation:before{ + content: "\e80e"; +} + +@-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +#editorcontainerbox { + position: absolute; + bottom: 0; + top: 0; + width: 100%; +} +#padpage { + position: absolute; + top: 0px; + bottom: 0px; + width: 100%; +} +#padmain { + margin-top: 0px; + position: absolute; + top: 63px !important; + left: 0px; + right: 0px; + bottom: 0px; + zoom: 1; +} +#padeditor { + bottom: 0px; + left: 0; + position: absolute; + right: 0px; + top: 0; + zoom: 1; +} +#myswatchbox { + position: absolute; + left: 5px; + top: 5px; + width: 24px; + height: 24px; + border: 1px solid #000; + background: transparent; + cursor: pointer; +} +#myswatch { + width: 100%; + height: 100%; + background: transparent; /*...initially*/ +} +#mycolorpicker { + width: 232px; + height: 265px; + position: absolute; + left: -250px; + top: 0px; + z-index: 101; + display: none; + border-radius: 0 0 6px 6px; + background: #f7f7f7; + border: 1px solid #ccc; + border-top: 0; + padding-left: 10px; + padding-top: 10px; +} +#mycolorpickersave { + left: 10px; + font-weight: bold; +} +#mycolorpickercancel { + left: 85px +} +#mycolorpickersave, +#mycolorpickercancel { + background: #fff; + background: -webkit-linear-gradient(#fff, #ccc); + background: -moz-linear-gradient(#fff, #ccc); + background: -o-linear-gradient(#fff, #ccc); + background: -ms-linear-gradient(#fff, #ccc); + background: linear-gradient(#fff, #ccc); + border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + color: #000; + overflow: hidden; + padding: 4px; + top: 240px; + text-align: center; + position: absolute; + width: 60px; +} +#mycolorpickerpreview { + position: absolute; + left: 207px; + top: 240px; + width: 16px; + height: 16px; + padding: 4px; + overflow: hidden; + color: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +#myusernameform { + margin-left: 30px +} +#myusernameedit { + font-size: 1.3em; + color: #fff; + padding: 3px; + height: 18px; + margin: 0; + border: 0; + width: 122px; + background: transparent; +} +#myusernameform input.editable { + border: 1px solid #444 +} +#myuser .myusernameedithoverable:hover { + background: white; + color: black; +} +#mystatusform { + margin-left: 35px; + margin-top: 5px; +} +#mystatusedit { + font-size: 1.2em; + color: #777; + font-style: italic; + display: none; + padding: 2px; + height: 14px; + margin: 0; + border: 1px solid #bbb; + width: 199px; + background: transparent; +} +#myusernameform .editactive, +#myusernameform .editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; + color: #000; +} +#myusernameform .editempty { + color: #333 +} +#myswatchbox, #myusernameedit, #otheruserstable .swatch { + border: 1px solid #ccc !important; + color: #333; +} +table#otheruserstable { + display: none +} +#nootherusers { + padding: 10px; + font-size: 1.2em; + color: #eee; + font-weight: bold; +} +#nootherusers a { + color: #3C88FF +} +#otheruserstable td { + height: 26px; + vertical-align: middle; + padding: 0 2px; + color: #333; +} +#otheruserstable .swatch { + border: 1px solid #000; + width: 13px; + height: 13px; + overflow: hidden; + margin: 0 4px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.usertdswatch { + width: 1% +} +.usertdname { + font-size: 1.3em; + color: #444; +} +.usertdstatus { + font-size: 1.1em; + font-style: italic; + color: #999; +} +.usertdactivity { + font-size: 1.1em; + color: #777; +} +.usertdname input { + border: 1px solid #bbb; + width: 80px; + padding: 2px; +} +.usertdname input.editactive, +.usertdname input.editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; +} +.usertdname input.editempty { + color: #888; + font-style: italic; +} + +#connectivity { + z-index: 600 !important; +} + +#connectivity * { + display: none; +} + +#connectivity .visible, +#connectivity .visible * { + display: block; +} + +/* styles for the automatic reconnection timer: */ +#connectivity .visible.with_reconnect_timer button, +#connectivity .visible.with_reconnect_timer .reconnecttimer * { + display: inline-block; +} + +#connectivity .with_reconnect_timer .hidden, +#connectivity .with_reconnect_timer #defaulttext.hidden, +#connectivity .with_reconnect_timer button.hidden { + display: none; +} + +#connectivity .with_reconnect_timer #cancelreconnect { + margin-left: 10px; +} +/* end of styles for the automatic reconnection timer */ + +#reconnect_form button { + font-size: 12pt; + padding: 5px; +} + +.toolbar #overlay { + z-index: 500; + display: none; + background-repeat: repeat-both; + width: 100%; + position: absolute; + height: inherit; + left: 0; + top: 0; +} +* html #overlay { + /* for IE 6+ */ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; /* in case this is looked at */ + background-image: none; + background-repeat: no-repeat; /* scale the image */ +} + +#chatbox { + position: absolute; + bottom: 0px; + right: 20px; + width: 180px; + height: 200px; + z-index: 400; + background-color: #f7f7f7; + border-left: 1px solid #999; + border-right: 1px solid #999; + border-top: 1px solid #999; + padding: 3px; + padding-bottom: 10px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: none; +} +#chattext { + background-color: white; + border: 1px solid white; + -ms-overflow-y: scroll; + overflow-y: scroll; + font-size: 12px; + position: absolute; + right: 0px; + left: 0px; + top: 25px; + bottom: 25px; + z-index: 1002; +} +#chattext p { + padding: 3px; + -ms-overflow-x: hidden; + overflow-x: hidden; +} +.chatloadmessages +{ + margin-bottom: 5px; + margin-top: 5px; + margin-left: auto; + margin-right: auto; + display: block; +} +#chatloadmessagesbutton +{ + line-height: 1.8em; +} +#chatloadmessagesball +{ + display: none; +} +#chatinputbox { + padding: 3px 2px; + position: absolute; + bottom: 0px; + right: 0px; + left: 3px; +} +#chatlabel { + font-size: 13px; + font-weight: bold; + color: #555; + text-decoration: none; + margin-right: 3px; + vertical-align: middle; +} +#chatinput { + border: 1px solid #BBBBBB; + width: 100%; + float: right; +} +#chaticon { + z-index: 400; + position: fixed; + bottom: 0px; + right: 20px; + padding: 5px; + border-left: 1px solid #999; + border-right: 1px solid #999; + border-top: 1px solid #999; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background-color: #fff; + cursor: pointer; +} +#chaticon a { + text-decoration: none +} +#chatcounter { + color: #777; + font-size: 10px; + vertical-align: middle; +} +#titlebar { + line-height: 16px; + font-weight: bold; + color: #555; + position: relative; + bottom: 2px; +} +#titlelabel { + font-size: 13px; + margin: 4px 0 0 4px; + position: absolute; +} +#titlesticky{ + font-size: 10px; + padding-top:2px; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; + color: #555; +} +#titlecross { + font-size: 25px; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; + color: #555; +} +.time { + float: right; + color: #333; + font-style: italic; + font-size: 10px; + margin-left: 3px; + margin-right: 3px; + margin-top: 2px; +} +#exportColumn{ + margin-top:20px; +} +.exporttype { + margin-top: 4px; + background-repeat: no-repeat; + padding-left: 25px; + color: #333; + text-decoration: none; + padding-bottom:2px; + display:inline; + padding-left:5px; + font-family: "Arial"; +} +.exportlink{ + font-family: "fontawesome-etherpad"; + display:block; + margin:5px; + color:#666; +} +#exporthtmla:before { + content: "\e826"; +} +#exportplaina:before { + content: "\e802"; +} +#exportworda:before { + content: "\e804"; +} +#exportpdfa:before { + content: "\e803"; +} +#exportetherpada:before { + content: "\e806"; +} +#exportopena:before { + content: "\e805"; +} + +/* hidden element */ +#importstatusball, +#importmessagesuccess, +#importmessageabiword { + display: none; +} + +.throbbold{ + font-weight:bold; +} + +#importmessageabiword { + color: #900; + font-size: small; +} + +#importsubmitinput { + margin-top: 12px; + padding:2px 4px 2px 4px; +} +#chatthrob { + display: none; + position: absolute; + bottom: 40px; + font-size: 14px; + width: 150px; + height: 40px; + right: 20px; + z-index: 200; + background-color: #000; + color: white; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.7); + padding: 10px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + opacity: .8; +} +.buttonicon { + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + border: none; + padding: 0; + background: none; + font-family: "fontawesome-etherpad"; + font-size: 15px; + font-style: normal; + font-weight: normal; + color: #666; + cursor: pointer; +} + +.buttonicon::-moz-focus-inner { + padding: 0; + border: 0 +} + +.buttonicon:before { + font-family: "fontawesome-etherpad"; +} + +.buttonicon:focus{ + border: 1px solid #666; +} +.buttonicon-bold:before { + content: "\e81c"; +} +.buttonicon-italic:before { + content: "\e81d"; +} +.buttonicon-underline:before { + content: "\e817"; +} +.buttonicon-strikethrough:before { + content: "\e818"; +} +.buttonicon-insertorderedlist:before { + content: "\e816"; +} +.buttonicon-insertunorderedlist:before { + content: "\e815"; +} +.buttonicon-indent:before { + content: "\e814"; +} +.buttonicon-outdent:before { + content: "\e813"; +} +.buttonicon-undo:before { + content: "\e823"; +} +.buttonicon-redo:before { + content: "\e824"; +} +.buttonicon-clearauthorship:before { + content: "\e80d"; +} +.buttonicon-settings:before { + content: "\e833"; +} +.buttonicon-import_export:before { + content: "\e834"; +} +.buttonicon-embed:before { + content: "\e827"; +} +.buttonicon-history:before { + content: "\e837"; +} +.buttonicon-chat:before { + content: "\e829"; +} +.buttonicon-showusers:before { + content: "\e808"; +} +.buttonicon-savedRevision:before { + content: "\e835"; +} +#focusprotector { + z-index: 100; + position: absolute; + bottom: 0px; + top: 0px; + left: 0px; + right: 0px; + background-color: white; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; + filter: alpha(opacity=1); + opacity: 0.01; + display: none; +} .rtl { direction: RTL } diff --git a/src/static/js/chat.js b/src/static/js/chat.js index a00ac9d9264..ca488fe5fd2 100755 --- a/src/static/js/chat.js +++ b/src/static/js/chat.js @@ -47,6 +47,9 @@ var chat = (function() }, stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen { + if(pad.settings.hideChat){ + return; + } chat.show(); isStuck = (!isStuck || fromInitialCall); $('#chatbox').hide(); diff --git a/src/static/js/pad.js b/src/static/js/pad.js index aeeca15c6b5..9c1b7bc1862 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -74,7 +74,7 @@ function randomString() var getParameters = [ { name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } }, { name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } }, - { name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } }, + { name: "showChat", checkVal: null, callback: function(val) { if(val==="false"){settings.hideChat = true;chat.hide();$('#chaticon').hide()} } }, { name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } }, { name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } }, // If the username is set as a parameter we should set a global value that we can call once we have initiated the pad. @@ -82,7 +82,7 @@ var getParameters = [ // If the userColor is set as a parameter, set a global value to use once we have initiated the pad. { name: "userColor", checkVal: null, callback: function(val) { settings.globalUserColor = decodeURIComponent(val); clientVars.userColor = decodeURIComponent(val); } }, { name: "rtl", checkVal: "true", callback: function(val) { settings.rtlIsTrue = true } }, - { name: "alwaysShowChat", checkVal: "true", callback: function(val) { chat.stickToScreen(); } }, + { name: "alwaysShowChat", checkVal: "true", callback: function(val) { if(!settings.hideChat) chat.stickToScreen(); } }, { name: "chatAndUsers", checkVal: "true", callback: function(val) { chat.chatAndUsers(); } }, { name: "lang", checkVal: null, callback: function(val) { window.html10n.localize([val, 'en']); createCookie('language', val); } } ]; @@ -92,7 +92,7 @@ function getParams() // Tries server enforced options first.. for(var i = 0; i < getParameters.length; i++) { - var setting = getParameters[i]; + var setting = getParameters[i]; var value = clientVars.padOptions[setting.name]; if(value.toString() === setting.checkVal) { @@ -102,12 +102,10 @@ function getParams() // Then URL applied stuff var params = getUrlVars() - for(var i = 0; i < getParameters.length; i++) { var setting = getParameters[i]; var value = params[setting.name]; - if(value && (value == setting.checkVal || setting.checkVal == null)) { setting.callback(value); diff --git a/tests/frontend/helper.js b/tests/frontend/helper.js index 449355e5d92..42712cf30a9 100644 --- a/tests/frontend/helper.js +++ b/tests/frontend/helper.js @@ -78,20 +78,25 @@ var helper = {}; helper.newPad = function(cb, padName){ //build opts object var opts = {clearCookies: true} + if(typeof cb === 'function'){ opts.cb = cb } else { opts = _.defaults(cb, opts); } + // if opts.params is set we manipulate the URL to include URL parameters IE ?foo=Bah. + if(opts.params){ + var encodedParams = "?" + $.param(opts.params); + } + //clear cookies if(opts.clearCookies){ helper.clearCookies(); } - if(!padName) padName = "FRONTEND_TEST_" + helper.randomString(20); - $iframe = $(""); + $iframe = $(""); //clean up inner iframe references helper.padChrome$ = helper.padOuter$ = helper.padInner$ = null; diff --git a/tests/frontend/specs/chat.js b/tests/frontend/specs/chat.js index 8eaf08a9514..84b9344efba 100644 --- a/tests/frontend/specs/chat.js +++ b/tests/frontend/specs/chat.js @@ -131,4 +131,41 @@ describe("Chat messages and UI", function(){ }, 10) }, 10) }); + + it("Checks showChat=false URL Parameter hides chat then when removed it shows chat", function(done) { + this.timeout(60000); + var inner$ = helper.padInner$; + var chrome$ = helper.padChrome$; + + setTimeout(function(){ //give it a second to save the username on the server side + helper.newPad({ // get a new pad, but don't clear the cookies + clearCookies: false, + params:{ + showChat: "false" + }, cb: function(){ + var chrome$ = helper.padChrome$; + var chaticon = chrome$("#chaticon"); + // chat should be hidden. + expect(chaticon.is(":visible")).to.be(false); + + + setTimeout(function(){ //give it a second to save the username on the server side + helper.newPad({ // get a new pad, but don't clear the cookies + clearCookies: false + , cb: function(){ + var chrome$ = helper.padChrome$; + var chaticon = chrome$("#chaticon"); + // chat should be visible. + expect(chaticon.is(":visible")).to.be(true); + done(); + } + }); + }, 1000); + + } + }); + }, 1000); + + }); + });