Initial work on merging mockup markup into the dragresize mockup
This commit is contained in:
JC Brand
parent
c3a513a15c
commit
296c6e605f
180
dragresize.html
180
dragresize.html
@ -1,17 +1,19 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||
<title>Converse.js Drag/Resize Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="converse.css">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
|
||||
<link type="text/css" rel="stylesheet" href="converse.css">
|
||||
<link rel="stylesheet" type="text/css" href="dragresize/dragresize.css">
|
||||
|
||||
<script src="components/jquery/jquery.min.js"></script>
|
||||
<script data-main="main" src="components/requirejs/require.js"></script>
|
||||
<script type="text/javascript" src="dragresize/dragresize.js"></script>
|
||||
<title>Converse.js Drag/Resize Demo</title>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* converse.css overrides */
|
||||
#chatpanel {
|
||||
@ -32,13 +34,6 @@
|
||||
height: calc(100% - 125px);
|
||||
}
|
||||
|
||||
div.controlbox-panes,
|
||||
div#login-dialog {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form.sendXMPPMessage {
|
||||
width: 100%;
|
||||
}
|
||||
@ -102,80 +97,103 @@
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div id="chatpanel" class="drsElement" style="width: 100%;">
|
||||
<div id="controlbox" class="chatbox drsElement" style="opacity: 1; display: inline;">
|
||||
<div class="chat-head oc-chat-head drsMoveHandle">
|
||||
<ul id="controlbox-tabs">
|
||||
<li><a class="current" href="#login">Sign in</a></li>
|
||||
</ul>
|
||||
<a class="close-chatbox-button icon-close"></a></div>
|
||||
<div class="controlbox-panes">
|
||||
<div id="login-dialog">
|
||||
<form id="converse-login">
|
||||
<label>XMPP/Jabber Username:</label><input type="text" id="jid">
|
||||
<label>Password:</label><input type="password" id="password">
|
||||
<input class="login-submit" type="submit" value="Log In">
|
||||
</form>
|
||||
<div id="conversejs">
|
||||
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="nub-flyout drsElement">
|
||||
<div class="chat-head oc-chat-head drsMoveHandle">
|
||||
<ul id="controlbox-tabs">
|
||||
<li><a class="current" href="#login">Sign in</a></li>
|
||||
</ul>
|
||||
<a class="close-chatbox-button icon-close"></a></div>
|
||||
<div class="controlbox-panes">
|
||||
<div id="login-dialog">
|
||||
<form id="converse-login">
|
||||
<label>XMPP/Jabber Username:</label><input type="text" id="jid">
|
||||
<label>Password:</label><input type="password" id="password">
|
||||
<input class="login-submit" type="submit" value="Log In">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox drsElement" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline-block;">
|
||||
<div class="chat-head chat-head-chatbox drsMoveHandle">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title"> JC Brand </div>
|
||||
</a>
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
<p></p>
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="nub-flyout drsElement">
|
||||
<div class="chat-head chat-head-chatbox drsMoveHandle">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="minimize-chatbox-button icon-minus"></a>
|
||||
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title"> JC Brand </div>
|
||||
</a>
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="chat-content">
|
||||
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
|
||||
<div class="chat-error">This is an error message</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">09:35 me: </span>
|
||||
<span class="chat-message-content">
|
||||
Hello world
|
||||
<span class="icon-smiley"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-them">19:25 Benedict-John: </span>
|
||||
<span class="chat-message-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:39 me: </span>
|
||||
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-event">JC Brand is busy</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-me">19:43 me: </span>
|
||||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley icon-happy" title="Insert a smilery">
|
||||
<ul>
|
||||
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
||||
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
||||
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
||||
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
||||
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
||||
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
||||
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
||||
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
||||
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
||||
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
||||
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
||||
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
||||
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="icon-unlocked"></span>
|
||||
<ul>
|
||||
<li><a href="#">Start private conversation</a></li>
|
||||
<li><a href="#">End private conversation</a></li>
|
||||
<li><a href="#">Authenticate buddy</a></li>
|
||||
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="chat-content">
|
||||
<div class="chat-info"><strong>/help</strong>:Show this menu</div>
|
||||
<div class="chat-info"><strong>/me</strong>:Write in the third person</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">09:35 me: </span>
|
||||
<span class="chat-message-content">Hello world</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-them">19:25 Benedict-John: </span>
|
||||
<span class="chat-message-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:39 me: </span>
|
||||
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-event">JC Brand is busy</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-me">19:43 me: </span>
|
||||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<!--
|
||||
<li class="icon-happy" title="Insert a smilery"></li>
|
||||
<li class="icon-camera-2" title="Enable video chat"></li>
|
||||
<li class="icon-newspaper" title="Fetch and show this user's vCard"></li>
|
||||
-->
|
||||
<li class="toggle-otr not-private" title="Turn on 'off-the-record' chat encryption">
|
||||
<span class="chat-toolbar-text">Not private</span>
|
||||
<span class="icon-unlocked"></span>
|
||||
<ul>
|
||||
<li><a href="#">Start private conversation</a></li>
|
||||
<li><a href="#">End private conversation</a></li>
|
||||
<li><a href="#">Authenticate buddy</a></li>
|
||||
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
/* Required CSS classes: must be included in all pages using this script */
|
||||
/* Apply the element you want to drag/resize */
|
||||
/* Apply the element you want to drag/resize
|
||||
.drsElement {
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
The main mouse handle that moves the whole element.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user