From e2e2a80a2db88701a37e65ce4ee5d94254a90795 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 19 Jan 2014 13:37:26 +0200 Subject: [PATCH] Add the dragresize code to the static mockup and tweak it a bit Removed unused css and html files. --- converse.css | 28 +++- dragresize.html | 199 ----------------------------- dragresize/dragresize.css | 64 ---------- dragresize/dragresize_commented.js | 26 +--- mockup.html | 73 +++++++++-- 5 files changed, 88 insertions(+), 302 deletions(-) delete mode 100644 dragresize.html delete mode 100644 dragresize/dragresize.css diff --git a/converse.css b/converse.css index a6d13b345..8ad8747b5 100644 --- a/converse.css +++ b/converse.css @@ -447,12 +447,18 @@ ul.participant-list li.moderator { padding: 4px; font-size: 13px; color: rgb(79, 79, 79); - height:190px; - width: 192px; overflow-y:auto; border: 0; background-color: #ffffff; line-height: 1.3em; + box-sizing: border-box; + -moz-box-sizing: border-box; + + /* FIXME */ + height: -webkit-calc(100% - 125px); + height: -moz-calc(100% - 125px); + height: -o-calc(100% - 125px); + height: calc(100% - 125px); } .chat-info { @@ -1263,7 +1269,7 @@ form.add-xmpp-contact input { display: block; } -.nub-flyout { +.box-flyout { position: absolute; display: block; bottom: 0; @@ -1271,10 +1277,22 @@ form.add-xmpp-contact input { border-radius: 4px; } -.chatbox .nub-flyout { +.chatbox .box-flyout { width: 200px; } -.chatroom .nub-flyout { +.chatroom .box-flyout { width: 300px; } + +.dragresize { + position: absolute; + width: 200px; + height: 5px; + background: transparent; + border: 0; + top: 0; + margin-left: 0; + cursor: n-resize; + z-index: 20; +} diff --git a/dragresize.html b/dragresize.html deleted file mode 100644 index b65eb3578..000000000 --- a/dragresize.html +++ /dev/null @@ -1,199 +0,0 @@ - - - - Converse.js Drag/Resize Demo - - - - - - - - - - - - - - - - - - - - -
-
-

Converse.js

-

Drag and drop

-
-
- -
- -
-
-
- -
-
-
-
- - - -
-
-
-
-
- -
-
-
- - - - - -
JC Brand
- -

10000ft in the air

-

-
-
-
/help:This is an info message
-
This is an error message
-
- 09:35 me:  - - Hello world - - -
-
- 19:25 Benedict-John:  - Dagsê -
-
- 19:39 me:  - This is a relatively long message to check that wrapping works as expected. -
-
- 19:42 me:  - Supercalifragilisticexpialidociousstillnotlongenough -
-
JC Brand is busy
-
- 19:43 me:  - Another message to check that scrolling works. -
-
-
- - -
-
-
- -
- - diff --git a/dragresize/dragresize.css b/dragresize/dragresize.css deleted file mode 100644 index 0766c9037..000000000 --- a/dragresize/dragresize.css +++ /dev/null @@ -1,64 +0,0 @@ -/* Required CSS classes: must be included in all pages using this script */ -/* Apply the element you want to drag/resize -.drsElement { - position: relative; -} -*/ - -/* - The main mouse handle that moves the whole element. - You can apply to the same tag as drsElement if you want. -*/ -.drsMoveHandle { - cursor: move; -} - -/* - The DragResize object name is automatically applied to all generated - corner resize handles, as well as one of the individual classes below. -*/ -.dragresize { - position: absolute; - width: 5px; - height: 5px; - font-size: 1px; - background: #EEE; - border: 1px solid #333; -} - -/* - Individual corner classes - required for resize support. - These are based on the object name plus the handle ID. -*/ -.dragresize-tl { - top: -8px; - left: -8px; - cursor: nw-resize; -} - -.dragresize-tm { - top: -8px; - left: 50%; - margin-left: -4px; - cursor: n-resize; -} - -.dragresize-tr { - top: -8px; - right: -8px; - cursor: ne-resize; -} - -.dragresize-ml { - top: 50%; - margin-top: -4px; - left: -8px; - cursor: w-resize; -} - -.dragresize-mr { - top: 50%; - margin-top: -4px; - right: -8px; - cursor: e-resize; -} diff --git a/dragresize/dragresize_commented.js b/dragresize/dragresize_commented.js index 50874ef7f..2fc90a853 100644 --- a/dragresize/dragresize_commented.js +++ b/dragresize/dragresize_commented.js @@ -112,9 +112,8 @@ DragResize.prototype.select = function(newElement) { // Activate and record our new dragging element. if (newElement && (newElement != element) && enabled) { element = newElement; - // Elevate it and give it resize handles. + // Elevate it element.style.zIndex = ++zIndex; - if (this.resizeHandleSet) this.resizeHandleSet(element, true); // Record element attributes for mouseMove(). elmX = parseInt(element.style.left); elmY = parseInt(element.style.top); @@ -134,7 +133,6 @@ DragResize.prototype.deselect = function(delHandles) { if (delHandles) { if (ondragblur) this.ondragblur(); - if (this.resizeHandleSet) this.resizeHandleSet(element, false); element = null; } handle = null; @@ -238,7 +236,6 @@ DragResize.prototype.mouseMove = function(e) { with (this) { } if (ondragmove) this.ondragmove(isResize); - // Stop a normal drag event. cancelEvent(e); }}; @@ -253,27 +250,6 @@ DragResize.prototype.mouseUp = function(e) { with (this) { deselect(false); }}; -/* Resize Code -- can be deleted if you're not using it. */ -DragResize.prototype.resizeHandleSet = function(elm, show) { with (this) { - // Either creates, shows or hides the resize handles within an element. - - // If we're showing them, and no handles have been created, create 4 new ones. - if (!elm._handle_tr) { - for (var h = 0; h < handles.length; h++) { - // Create 4 news divs, assign each a generic + specific class. - var hDiv = document.createElement('div'); - hDiv.className = myName + ' ' + myName + '-' + handles[h]; - elm['_handle_' + handles[h]] = elm.appendChild(hDiv); - } - } - - // We now have handles. Find them all and show/hide. - for (var h = 0; h < handles.length; h++) { - elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden'; - } -}}; - - DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this) { // Passed the mouse movement amounts. This function checks to see whether the // drag is from a resize handle created above; if so, it changes the stored diff --git a/mockup.html b/mockup.html index d8c97057d..6fc528d5f 100644 --- a/mockup.html +++ b/mockup.html @@ -1,19 +1,72 @@ - Converse - + Converse: Mockup + + + + + + +
+
+

Converse.js

+

Static Mockup

+
+
-
+
+
-
+
+
-
+
+
@@ -264,7 +319,8 @@
-
+
+
@@ -338,7 +394,8 @@
-
+
+
@@ -363,7 +420,6 @@ Toggle chat
-