Swiftdiff options
| author | Tobias Markmann <tm@ayena.de> | 2016-03-25 16:13:53 (GMT) |
|---|---|---|
| committer | Tobias Markmann <tm@ayena.de> | 2016-03-29 07:36:36 (GMT) |
| commit | c26314684cd4e6140e5ea882285c2076505bd53d (patch) | |
| tree | 9d31b6bfaced4a01aff8069096e2c9bb28efad43 /Swift/resources/themes/Default/Template.html | |
| parent | daf513a6567100322d3c51733ea0c449ca6adb1b (diff) | |
| download | swift-c26314684cd4e6140e5ea882285c2076505bd53d.zip swift-c26314684cd4e6140e5ea882285c2076505bd53d.tar.bz2 | |
Replace chat view theme with one based on the new design
This also removes the old chat theme resources and some code
in QtWebKitChatView that was required for compatibility to
Adium-style themes.
The new code uses a CSS style in the header to change the
font size and does not iterate the whole DOM tree itself
anymore.
Added new resources for failed and successful asks.
Test-Information:
Tested MUCs, PMs, message correction and file-transfers with
the new chat theme.
Change-Id: If922a972c658189444e60a7b00e5e5e96661620d
Diffstat (limited to 'Swift/resources/themes/Default/Template.html')
| -rw-r--r--[-rwxr-xr-x] | Swift/resources/themes/Default/Template.html | 358 |
1 files changed, 17 insertions, 341 deletions
diff --git a/Swift/resources/themes/Default/Template.html b/Swift/resources/themes/Default/Template.html index 9d5c3a0..a759ab5 100755..100644 --- a/Swift/resources/themes/Default/Template.html +++ b/Swift/resources/themes/Default/Template.html @@ -1,343 +1,19 @@ -<?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <base href="%@"> - - <script type="text/javascript"> - //<![CDATA[ - - isDebug = false; - - // Fade interval in milliseconds - // Make this larger if you experience performance issues - Fadomatic.INTERVAL_MILLIS = 50; - - // Creates a fader - // element - The element to fade - // speed - The speed to fade at, from 0.0 to 100.0 - // initialOpacity (optional, default 100) - element's starting opacity, 0 to 100 - // minOpacity (optional, default 0) - element's minimum opacity, 0 to 100 - // maxOpacity (optional, default 0) - element's minimum opacity, 0 to 100 - function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity) { - this._element = element; - this._intervalId = null; - this._rate = rate; - this._isFadeOut = true; - - // Set initial opacity and bounds - // NB use 99 instead of 100 to avoid flicker at start of fade - this._minOpacity = 0; - this._maxOpacity = 99; - this._opacity = 99; - - if (typeof minOpacity != 'undefined') { - if (minOpacity < 0) { - this._minOpacity = 0; - } else if (minOpacity > 99) { - this._minOpacity = 99; - } else { - this._minOpacity = minOpacity; - } - } - - if (typeof maxOpacity != 'undefined') { - if (maxOpacity < 0) { - this._maxOpacity = 0; - } else if (maxOpacity > 99) { - this._maxOpacity = 99; - } else { - this._maxOpacity = maxOpacity; - } - - if (this._maxOpacity < this._minOpacity) { - this._maxOpacity = this._minOpacity; - } - } - - if (typeof initialOpacity != 'undefined') { - if (initialOpacity > this._maxOpacity) { - this._opacity = this._maxOpacity; - } else if (initialOpacity < this._minOpacity) { - this._opacity = this._minOpacity; - } else { - this._opacity = initialOpacity; - } - } - - // See if we're using W3C opacity, MSIE filter, or just - // toggling visiblity - if(typeof element.style.opacity != 'undefined') { - - this._updateOpacity = this._updateOpacityW3c; - - } else if(typeof element.style.filter != 'undefined') { - - // If there's not an alpha filter on the element already, - // add one - if (element.style.filter.indexOf("alpha") == -1) { - - // Attempt to preserve existing filters - var existingFilters=""; - if (element.style.filter) { - existingFilters = element.style.filter+" "; - } - element.style.filter = existingFilters+"alpha(opacity="+this._opacity+")"; - } - - this._updateOpacity = this._updateOpacityMSIE; - - } else { - - this._updateOpacity = this._updateVisibility; - } - - this._updateOpacity(); - } - - // Initiates a fade out - Fadomatic.prototype.fadeOut = function () { - this._isFadeOut = true; - this._beginFade(); - } - - // Initiates a fade in - Fadomatic.prototype.fadeIn = function () { - this._isFadeOut = false; - this._beginFade(); - } - - // Makes the element completely opaque, stops any fade in progress - Fadomatic.prototype.show = function () { - this.haltFade(); - this._opacity = this._maxOpacity; - this._updateOpacity(); - } - - // Makes the element completely transparent, stops any fade in progress - Fadomatic.prototype.hide = function () { - this.haltFade(); - this._opacity = 0; - this._updateOpacity(); - } - - // Halts any fade in progress - Fadomatic.prototype.haltFade = function () { - - clearInterval(this._intervalId); - } - - // Resumes a fade where it was halted - Fadomatic.prototype.resumeFade = function () { - - this._beginFade(); - } - - // Pseudo-private members - - Fadomatic.prototype._beginFade = function () { - - this.haltFade(); - var objref = this; - this._intervalId = setInterval(function() { objref._tickFade(); },Fadomatic.INTERVAL_MILLIS); - } - - Fadomatic.prototype._tickFade = function () { - - if (this._isFadeOut) { - this._opacity -= this._rate; - if (this._opacity < this._minOpacity) { - this._opacity = this._minOpacity; - this.haltFade(); - } - } else { - this._opacity += this._rate; - if (this._opacity > this._maxOpacity ) { - this._opacity = this._maxOpacity; - this.haltFade(); - } - } - - this._updateOpacity(); - } - - Fadomatic.prototype._updateVisibility = function () { - - if (this._opacity > 0) { - this._element.style.visibility = 'visible'; - } else { - this._element.style.visibility = 'hidden'; - } - } - - Fadomatic.prototype._updateOpacityW3c = function () { - - this._element.style.opacity = this._opacity/100; - this._updateVisibility(); - } - - Fadomatic.prototype._updateOpacityMSIE = function () { - - this._element.filters.alpha.opacity = this._opacity; - this._updateVisibility(); - } - - Fadomatic.prototype._updateOpacity = null; - - - - //Do this on load - function initEvents() { - if(document.getElementById("heading") == null){ - document.getElementById("bodyNode").style.marginTop = "5px"; - } - - if(isDebug == false) { - document.getElementById("debug").style.display = "none"; - } - - - alignChat(true); - } - //Debugging function - function trace(msg) { - var node = document.createElement("div"); - var debugCon = document.getElementById("debug"); - node.innerHTML = msg; - debugCon.appendChild(node); - } - - - //Appending new content to the message view - function appendMessage(html) { - var shouldScroll = nearBottom(); - - //Remove any existing insertion point - var insert = document.getElementById("insert"); - - if(insert) insert.parentNode.removeChild(insert); - - //Append the new message to the bottom of our chat block - var chat = document.getElementById("Chat"); - var range = document.createRange(); - range.selectNode(chat); - var documentFragment = range.createContextualFragment(html); - var myFrag = chat.appendChild(documentFragment); - - // Don't do the fadomatic, it's too slow - /* - var frag1 = document.getElementById("insert"); - if (frag1) { - var frag= frag1.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; - - try { - var fader = new Fadomatic(frag, 9, 0, 0, 95); - } catch(e) { - trace(e); - } - fader.fadeIn(); - } - */ - - alignChat(shouldScroll); - } - - - function appendNextMessage(html){ - var shouldScroll = nearBottom(); - - //Locate the insertion point - var insert = document.getElementById("insert"); - - //make new node - range = document.createRange(); - range.selectNode(insert.parentNode); - newNode = range.createContextualFragment(html); - - //swap - var pointer = insert.parentNode; - insert.parentNode.replaceChild(newNode,insert); - var els = pointer.getElementsByTagName("div"); - - alignChat(shouldScroll); - } - - - //Auto-scroll to bottom. Use nearBottom to determine if a scrollToBottom is desired. - function nearBottom() { - return ( document.body.scrollTop >= ( document.body.offsetHeight - ( window.innerHeight * 1.2 ) ) ); - } - - var intervall_scroll; - function scrollToBottom() { - //document.body.scrollTop = (document.body.scrollHeight-window.innerHeight); - //return; - if( intervall_scroll ) clearInterval( intervall_scroll ); - intervall_scroll = setInterval( function() { - var target_scroll = (document.body.scrollHeight-window.innerHeight) - 1; - var scrolldiff = target_scroll - document.body.scrollTop; - if ( document.body.scrollTop != target_scroll ) { - var saved_scroll = document.body.scrollTop; - document.body.scrollTop += scrolldiff / 5 + ( scrolldiff >= 0 ? (scrolldiff != 0 ) : -1 ); - } else { - saved_scroll = -1; - clearInterval( intervall_scroll ); - } - } , 10 ); - return; - } - - - //Dynamically exchange the active stylesheet - function setStylesheet( id, url ) { - var code = "<style id=\"" + id + "\" type=\"text/css\" media=\"screen,print\">"; - if( url.length ) code += "@import url( \"" + url + "\" );"; - code += "</style>"; - var range = document.createRange(); - var head = document.getElementsByTagName( "head" ).item(0); - range.selectNode( head ); - documentFragment = range.createContextualFragment( code ); - head.removeChild( document.getElementById( id ) ); - head.appendChild( documentFragment ); - } - - //Align our chat to the bottom of the window. If true is passed, view will also be scrolled down - function alignChat(shouldScroll) { - - var windowHeight = window.innerHeight; - - if(windowHeight > 0) { - var contentElement = document.getElementById('Chat'); - var contentHeight = contentElement.offsetHeight; - if (windowHeight - contentHeight > 0) { - contentElement.style.position = 'relative'; - contentElement.style.top = '0px'; - } else { - contentElement.style.position = 'static'; - } - } - - if(shouldScroll) scrollToBottom(); - } - - function windowDidResize() { - alignChat(true/*nearBottom()*/); //nearBottom buggy with inavtive tabs - } - - window.onresize = windowDidResize; - //]]> - </script> - - <style id="mainStyle" type="text/css" media="screen,print"> @import url( "%@" ); </style> - -</head> -<body style="==bodyBackground==" id="bodyNode" onload="initEvents()"> -%@ -<div id="Chat"> -</div> -%@ -<div id="debug"></div> -</body> +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="qrc:///themes/Default/main.css"/> + <!--<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'--> + <style id="text-resize-style"> + </style> + </head> + <body> + <div class="container"> + <div class="colour-block"></div> + <div class="message-block"> + <div id="insert"></div> + </div> + </div> + </body> </html> |