Work on replacing PHP with JS
This commit is contained in:
JC Brand
parent
294be90a02
commit
d51d2beac2
13
mockup.html
13
mockup.html
|
|
@ -4,19 +4,24 @@
|
|||
<head>
|
||||
<title>Converse.js Live Mockup</title>
|
||||
<meta name="description" content="Converse.js: A chat client for your website" />
|
||||
<link rel="stylesheet" type="text/css" href="../components/jasmine/src/html/jasmine.css">
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
|
||||
<script src="converse.js"></script>
|
||||
<script data-main="mockup/main" src="components/requirejs/require.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
|
||||
<h2 id="project_tagline">Live Mockup</h2>
|
||||
<h2 id="project_tagline">Mockups</h2>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="/mockup/bs4/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
|
||||
<li><a href="/mockup/bs4/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
|
||||
<li><a href="/mockup/bs4/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
|
||||
<li><a href="/mockup/bs4/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
|
||||
<li><a href="/mockup/bs4/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<?php include('head.html'); ?>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php include('menu.html'); ?>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
|
|
@ -13,8 +18,8 @@
|
|||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-3">
|
||||
<?php include('sidebar.html'); ?>
|
||||
<?php include('user-panel.html'); ?>
|
||||
<div class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,7 +142,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?php include('modals.html'); ?>
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||
<script type="text/javascript" src="sidebar.js"></script>
|
||||
<script type="text/javascript" src="user-panel.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
162
mockup/bs4/chatroom.html
Normal file
162
mockup/bs4/chatroom.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-3">
|
||||
<div class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<div class="form-control">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
</div>
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||
<script type="text/javascript" src="sidebar.js"></script>
|
||||
<script type="text/javascript" src="user-panel.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<?php include('head.html'); ?>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php include('menu.html'); ?>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-3">
|
||||
<?php include('sidebar.html'); ?>
|
||||
<?php include('user-panel.html'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<div class="form-control">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
</div>
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include('modals.html'); ?>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +1,24 @@
|
|||
<?php include('head.html'); ?>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>inVerse Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php include('menu.html'); ?>
|
||||
|
||||
<div id="conversejs" class="chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<?php include('sidebar.html'); ?>
|
||||
<?php include('user-panel.html'); ?>
|
||||
<div class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -276,6 +281,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?php include('modals.html'); ?>
|
||||
<div class="modals"></div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||
|
||||
<script type="text/javascript" src="sidebar.js"></script>
|
||||
<script type="text/javascript" src="user-panel.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
7
mockup/bs4/css/bootstrap.min.css
vendored
7
mockup/bs4/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
4
mockup/bs4/css/font-awesome.min.css
vendored
4
mockup/bs4/css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +0,0 @@
|
|||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.fs2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,278 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?uikzla');
|
||||
src: url('fonts/icomoon.eot?uikzla#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?uikzla') format('truetype'),
|
||||
url('fonts/icomoon.woff?uikzla') format('woff'),
|
||||
url('fonts/icomoon.svg?uikzla#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-save:before {
|
||||
content: "\f0c7";
|
||||
}
|
||||
.icon-idcard-dark:before {
|
||||
content: "\f2c2";
|
||||
}
|
||||
.icon-idcard:before {
|
||||
content: "\f2c3";
|
||||
}
|
||||
.icon-snowflake:before {
|
||||
content: "\f2dc";
|
||||
}
|
||||
.icon-globe:before {
|
||||
content: "\f0ac";
|
||||
}
|
||||
.icon-legal:before {
|
||||
content: "\f0e3";
|
||||
}
|
||||
.icon-group:before {
|
||||
content: "\f0c0";
|
||||
}
|
||||
.icon-database:before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
.icon-xa:before {
|
||||
content: "\e602";
|
||||
}
|
||||
.icon-conversejs:before {
|
||||
content: "\e600";
|
||||
}
|
||||
.icon-closed:before {
|
||||
content: "\25ba";
|
||||
}
|
||||
.icon-opened:before {
|
||||
content: "\25bc";
|
||||
}
|
||||
.icon-checkmark:before {
|
||||
content: "\2713";
|
||||
}
|
||||
.icon-home:before {
|
||||
content: "\e000";
|
||||
}
|
||||
.icon-pencil:before {
|
||||
content: "\270e";
|
||||
}
|
||||
.icon-music:before {
|
||||
content: "\266b";
|
||||
}
|
||||
.icon-phone:before {
|
||||
content: "\260f";
|
||||
}
|
||||
.icon-phone-hang-up:before {
|
||||
content: "\260e";
|
||||
}
|
||||
.icon-address-book:before {
|
||||
content: "\270f";
|
||||
}
|
||||
.icon-notebook:before {
|
||||
content: "\2710";
|
||||
}
|
||||
.icon-pushpin:before {
|
||||
content: "\e012";
|
||||
}
|
||||
.icon-online:before {
|
||||
content: "\25fc";
|
||||
}
|
||||
.icon-away:before {
|
||||
content: "\25fb";
|
||||
}
|
||||
.icon-bubbles:before {
|
||||
content: "\e015";
|
||||
}
|
||||
.icon-bubbles2:before {
|
||||
content: "\e016";
|
||||
}
|
||||
.icon-bubbles3:before {
|
||||
content: "\e017";
|
||||
}
|
||||
.icon-user:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
.icon-hide-users:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
.icon-show-users:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
.icon-users:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
.icon-quotes-left:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
.icon-spinner:before {
|
||||
content: "\231b";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\e021";
|
||||
}
|
||||
.icon-cogs:before {
|
||||
content: "\e022";
|
||||
}
|
||||
.icon-wrench:before {
|
||||
content: "\e024";
|
||||
}
|
||||
.icon-unlocked:before {
|
||||
content: "\e025";
|
||||
}
|
||||
.icon-lock-2:before {
|
||||
content: "\e027";
|
||||
}
|
||||
.icon-key:before {
|
||||
content: "\e028";
|
||||
}
|
||||
.icon-zoomout:before {
|
||||
content: "\e02a";
|
||||
}
|
||||
.icon-zoomin:before {
|
||||
content: "\e02b";
|
||||
}
|
||||
.icon-cog:before {
|
||||
content: "\e02f";
|
||||
}
|
||||
.icon-remove:before {
|
||||
content: "\e02d";
|
||||
}
|
||||
.icon-eye:before {
|
||||
content: "\e030";
|
||||
}
|
||||
.icon-eye-blocked:before {
|
||||
content: "\e031";
|
||||
}
|
||||
.icon-attachment:before {
|
||||
content: "\e032";
|
||||
}
|
||||
.icon-heart:before {
|
||||
content: "\2764";
|
||||
}
|
||||
.icon-happy:before {
|
||||
content: "\263b";
|
||||
}
|
||||
.icon-thumbs-up:before {
|
||||
content: "\261d";
|
||||
}
|
||||
.icon-smiley:before {
|
||||
content: "\263a";
|
||||
}
|
||||
.icon-tongue:before {
|
||||
content: "\e038";
|
||||
}
|
||||
.icon-sad:before {
|
||||
content: "\2639";
|
||||
}
|
||||
.icon-wink:before {
|
||||
content: "\e03a";
|
||||
}
|
||||
.icon-wondering:before {
|
||||
content: "\2369";
|
||||
}
|
||||
.icon-confused:before {
|
||||
content: "\2368";
|
||||
}
|
||||
.icon-shocked:before {
|
||||
content: "\2364";
|
||||
}
|
||||
.icon-evil:before {
|
||||
content: "\261f";
|
||||
}
|
||||
.icon-angry:before {
|
||||
content: "\e03f";
|
||||
}
|
||||
.icon-cool:before {
|
||||
content: "\e040";
|
||||
}
|
||||
.icon-grin:before {
|
||||
content: "\e041";
|
||||
}
|
||||
.icon-info:before {
|
||||
content: "\2360";
|
||||
}
|
||||
.icon-notification:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\26a0";
|
||||
}
|
||||
.icon-spell-check:before {
|
||||
content: "\e045";
|
||||
}
|
||||
.icon-bold:before {
|
||||
content: "\e04d";
|
||||
}
|
||||
.icon-underline:before {
|
||||
content: "\e04e";
|
||||
}
|
||||
.icon-italic:before {
|
||||
content: "\e04f";
|
||||
}
|
||||
.icon-strikethrough:before {
|
||||
content: "\e050";
|
||||
}
|
||||
.icon-newtab:before {
|
||||
content: "\e053";
|
||||
}
|
||||
.icon-close:before {
|
||||
content: "\2715";
|
||||
}
|
||||
.icon-blocked:before {
|
||||
content: "\2718";
|
||||
}
|
||||
.icon-cancel-circle:before {
|
||||
content: "\e058";
|
||||
}
|
||||
.icon-minus:before {
|
||||
content: "\e05a";
|
||||
}
|
||||
.icon-plus:before {
|
||||
content: "\271a";
|
||||
}
|
||||
.icon-checkbox-checked:before {
|
||||
content: "\2611";
|
||||
}
|
||||
.icon-checkbox-unchecked:before {
|
||||
content: "\2b27";
|
||||
}
|
||||
.icon-checkbox-partial:before {
|
||||
content: "\2b28";
|
||||
}
|
||||
.icon-radio-checked:before {
|
||||
content: "\2b26";
|
||||
}
|
||||
.icon-radio-unchecked:before {
|
||||
content: "\2b25";
|
||||
}
|
||||
.icon-room-info:before {
|
||||
content: "\e059";
|
||||
}
|
||||
.icon-newspaper:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.icon-image:before {
|
||||
content: "\2b14";
|
||||
}
|
||||
.icon-offline:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.icon-busy:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.icon-exit:before {
|
||||
content: "\e601";
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,10 +1,16 @@
|
|||
<?php include('head.html'); ?>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php include('menu.html'); ?>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!-- User Profile Modal -->
|
||||
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
|
||||
<!-- User Profile Modal -->
|
||||
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change status Modal -->
|
||||
<div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
|
||||
<!-- Change status Modal -->
|
||||
<div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -64,10 +64,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add contact Modal -->
|
||||
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
||||
<!-- Add contact Modal -->
|
||||
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chatrooms Modal -->
|
||||
<div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
|
||||
<!-- Chatrooms Modal -->
|
||||
<div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -119,10 +119,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -139,4 +139,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
17
mockup/bs4/modals.js
Normal file
17
mockup/bs4/modals.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/*global Backbone, _, window */
|
||||
const Modals = Backbone.NativeView.extend({
|
||||
el: 'div.modals',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'modals.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
<?php include('head.html'); ?>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php include('menu.html'); ?>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
||||
</div>
|
||||
|
||||
<div id="conversejs" class="login">
|
||||
|
|
@ -17,7 +23,7 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="brand-heading">
|
||||
<i class="icon-conversejs"></i> inVerse</h1>
|
||||
<i class="icon-conversejs"></i> Converse.js</h1>
|
||||
<p>
|
||||
<a href="https://conversejs.org">Open Source</a><br />XMPP chat client</p>
|
||||
</div>
|
||||
|
|
@ -1,22 +1,10 @@
|
|||
<div class="sidebar">
|
||||
<a class="hamburger chatbox-btn fa fa-bars"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
<div class="bottom">
|
||||
<!-- <div class="sidebar"> -->
|
||||
<a class="hamburger chatbox-btn fa fa-bars"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
<div class="bottom">
|
||||
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
||||
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||
<a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('.hamburger').click(function(){
|
||||
if ( $('#conversejs').hasClass('sidebar-open') ) {
|
||||
$('#conversejs').removeClass('sidebar-open');
|
||||
$(this).removeClass('fa-times').addClass('fa-bars');
|
||||
} else {
|
||||
$('#conversejs').addClass('sidebar-open');
|
||||
$(this).removeClass('fa-bars').addClass('fa-times');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- </div> -->
|
||||
|
|
|
|||
35
mockup/bs4/sidebar.js
Normal file
35
mockup/bs4/sidebar.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*global Backbone, _, window */
|
||||
const Sidebar = Backbone.NativeView.extend({
|
||||
el: 'div.sidebar',
|
||||
|
||||
events: {
|
||||
'click .hamburger': 'onHamburgerClicked'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
onHamburgerClicked () {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const converse_el = document.querySelector('#conversejs');
|
||||
if (_.includes(converse_el.classList, 'sidebar-open')) {
|
||||
converse_el.classList.remove('sidebar-open');
|
||||
hamburger.classList.remove('fa-times');
|
||||
hamburger.classList.remove('fa-bars');
|
||||
} else {
|
||||
converse_el.addClass('sidebar-open');
|
||||
hamburger.classList.remove('fa-bars');
|
||||
hamburger.classList.add('fa-times');
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'sidebar.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="users" class="controlbox-pane">
|
||||
<div class="userinfo">
|
||||
<!-- <div id="users" class="controlbox-pane"> -->
|
||||
<div class="userinfo">
|
||||
<div class="d-flex">
|
||||
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
|
||||
<span class="username w-100 align-self-center">Walter White</span>
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
<span class="fa fa-circle"></span> Online</span>
|
||||
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="converse-roster">
|
||||
<div id="converse-roster">
|
||||
<div id="chatrooms">
|
||||
<div class="d-flex">
|
||||
<span class="w-100">Chatrooms</span>
|
||||
|
|
@ -143,5 +143,5 @@
|
|||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
|
|
|||
17
mockup/bs4/user-panel.js
Normal file
17
mockup/bs4/user-panel.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/*global Backbone, _, window */
|
||||
const UserPanel = Backbone.NativeView.extend({
|
||||
el: 'div#users',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'user-panel.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user