Skip to content

C
converse.js
Commit 0b710b80 authored by JC Brand's avatar JC Brand
Browse files
Options

Update mockup with new theme and fix css

parent d1aead81
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 65 deletions
css/converse.css
View file @ 0b710b80
...@@ -406,6 +406,12 @@ you can use the generic selector below, but it's slower: ...@@ -406,6 +406,12 @@ you can use the generic selector below, but it's slower:
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
#conversejs div {
box-sizing: border-box;
}
#conversejs ul li {
height: auto;
}
#conversejs div, #conversejs div,
#conversejs span, #conversejs span,
#conversejs h1, #conversejs h1,
...@@ -535,11 +541,10 @@ span.spinner.hor_centered { ...@@ -535,11 +541,10 @@ span.spinner.hor_centered {
height: auto; height: auto;
} }
#conversejs #offscreen-chatboxes .box-flyout .chat-head { #conversejs #offscreen-chatboxes .box-flyout .chat-head {
margin: 0;
font-size: 100%; font-size: 100%;
border-radius: 4px; border-radius: 4px;
padding: 3px 0 0 5px; padding: 3px 0 0 5px;
margin-bottom: 2px; margin: 0 0 2px 2px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px; height: 24px;
} }
...@@ -555,11 +560,11 @@ span.spinner.hor_centered { ...@@ -555,11 +560,11 @@ span.spinner.hor_centered {
} }
#conversejs .chat-head { #conversejs .chat-head {
color: #ffffff; color: #ffffff;
margin: 0;
font-size: 100%; font-size: 100%;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
padding: 3px 0 0 3px; padding: 2px 2px 2px 4px;
margin: 0;
} }
#conversejs .chat-head-chatbox { #conversejs .chat-head-chatbox {
background-color: #2D617A; background-color: #2D617A;
...@@ -571,18 +576,9 @@ span.spinner.hor_centered { ...@@ -571,18 +576,9 @@ span.spinner.hor_centered {
background-color: white; background-color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
height: 289px;
border-top: 0; border-top: 0;
} }
#conversejs .chatbox .chat-body {
height: -moz-calc(62%);
height: -o-calc(62%);
height: calc(62%);
}
#conversejs .chatroom .chat-body {
height: -moz-calc(62%);
height: -o-calc(62%);
height: calc(62%);
}
#conversejs .chatroom .chat-area { #conversejs .chatroom .chat-area {
float: left; float: left;
width: 200px; width: 200px;
...@@ -590,12 +586,12 @@ span.spinner.hor_centered { ...@@ -590,12 +586,12 @@ span.spinner.hor_centered {
} }
#conversejs .chatroom .participants { #conversejs .chatroom .participants {
float: left; float: left;
height: 100%;
background-color: white; background-color: white;
overflow: auto; overflow: auto;
border-left: 1px solid #AAA; border-left: 1px solid #AAA;
max-width: 98px; width: 100px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
height: 289px;
} }
#conversejs .participants ul.participant-list li { #conversejs .participants ul.participant-list li {
overflow: hidden; overflow: hidden;
...@@ -702,12 +698,11 @@ input.error { ...@@ -702,12 +698,11 @@ input.error {
margin-right: 6px; margin-right: 6px;
} }
#conversejs .chat-title { #conversejs .chat-title {
padding: 1px 0;
color: white; color: white;
font-weight: bold; font-weight: bold;
line-height: 15px; line-height: 15px;
display: block; display: block;
margin-top: 2px;
margin-right: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -732,6 +727,7 @@ input.error { ...@@ -732,6 +727,7 @@ input.error {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding: 1px 0;
} }
#conversejs div.chat-head-chatbox a.user-custom-message { #conversejs div.chat-head-chatbox a.user-custom-message {
color: white; color: white;
...@@ -1159,6 +1155,9 @@ select#select-xmpp-status { ...@@ -1159,6 +1155,9 @@ select#select-xmpp-status {
resize: none; resize: none;
height: 62px; height: 62px;
} }
#conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0;
}
#conversejs ul.chat-toolbar { #conversejs ul.chat-toolbar {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
...@@ -1329,16 +1328,19 @@ input.custom-xmpp-status { ...@@ -1329,16 +1328,19 @@ input.custom-xmpp-status {
z-index: 22; z-index: 22;
} }
#conversejs .box-flyout { #conversejs .box-flyout {
position: absolute; border-radius: 4px;
display: block;
bottom: 6px; bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
border-radius: 4px; display: block;
height: 324px; height: 324px;
position: absolute;
} }
#conversejs .box-flyout.minimized { #conversejs .box-flyout.minimized {
height: auto; height: auto;
} }
#conversejs .box-flyout.minimized .chat-head {
border-radius: 4px;
}
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
width: 200px; width: 200px;
} }
......
index.html
View file @ 0b710b80
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
<meta name="description" content="Converse.js: A free chat client for your website" /> <meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="screen" /> <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
<link href="css/converse.css" rel="stylesheet" type="text/css" media="screen" /> <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script data-main="main" src="components/requirejs/require.js"></script> <script data-main="main" src="components/requirejs/require.js"></script>
</head> </head>
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
</section> </section>
<!-- Core JavaScript Files --> <!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../components/jquery/dist/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Custom Theme JavaScript --> <!-- Custom Theme JavaScript -->
......
less/converse.less
View file @ 0b710b80
...@@ -416,6 +416,14 @@ you can use the generic selector below, but it's slower: ...@@ -416,6 +416,14 @@ you can use the generic selector below, but it's slower:
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
#conversejs div {
box-sizing: border-box;
}
#conversejs ul li {
height: auto;
}
#conversejs div, #conversejs div,
#conversejs span, #conversejs span,
#conversejs h1, #conversejs h1,
...@@ -560,11 +568,10 @@ span.spinner.hor_centered { ...@@ -560,11 +568,10 @@ span.spinner.hor_centered {
} }
#conversejs #offscreen-chatboxes .box-flyout .chat-head { #conversejs #offscreen-chatboxes .box-flyout .chat-head {
margin: 0;
font-size: 100%; font-size: 100%;
border-radius: 4px; border-radius: 4px;
padding: 3px 0 0 5px; padding: 3px 0 0 5px;
margin-bottom: 2px; margin: 0 0 2px 2px;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4); box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
height: 24px; height: 24px;
} }
...@@ -584,11 +591,11 @@ span.spinner.hor_centered { ...@@ -584,11 +591,11 @@ span.spinner.hor_centered {
#conversejs .chat-head { #conversejs .chat-head {
color: #ffffff; color: #ffffff;
margin: 0;
font-size: 100%; font-size: 100%;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
padding: 3px 0 0 3px; padding: 2px 2px 2px 4px;
margin: 0;
} }
#conversejs .chat-head-chatbox { #conversejs .chat-head-chatbox {
...@@ -603,21 +610,10 @@ span.spinner.hor_centered { ...@@ -603,21 +610,10 @@ span.spinner.hor_centered {
background-color: white; background-color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
height: 289px;
border-top: 0; border-top: 0;
} }
#conversejs .chatbox .chat-body {
height: -moz-calc(100% - 38px);
height: -o-calc(100% - 38px);
height: calc(100% - 38px);
}
#conversejs .chatroom .chat-body {
height: -moz-calc(100% - 38px);
height: -o-calc(100% - 38px);
height: calc(100% - 38px);
}
#conversejs .chatroom .chat-area { #conversejs .chatroom .chat-area {
float: left; float: left;
width: 200px; width: 200px;
...@@ -626,12 +622,12 @@ span.spinner.hor_centered { ...@@ -626,12 +622,12 @@ span.spinner.hor_centered {
#conversejs .chatroom .participants { #conversejs .chatroom .participants {
float: left; float: left;
height: 100%;
background-color: white; background-color: white;
overflow: auto; overflow: auto;
border-left: 1px solid #AAA; border-left: 1px solid #AAA;
max-width: 98px; width: 100px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
height: 289px;
} }
#conversejs .participants ul.participant-list li { #conversejs .participants ul.participant-list li {
...@@ -761,12 +757,11 @@ input.error { ...@@ -761,12 +757,11 @@ input.error {
} }
#conversejs .chat-title { #conversejs .chat-title {
padding: 1px 0;
color: white; color: white;
font-weight: bold; font-weight: bold;
line-height: 15px; line-height: 15px;
display: block; display: block;
margin-top: 2px;
margin-right: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -794,6 +789,7 @@ input.error { ...@@ -794,6 +789,7 @@ input.error {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding: 1px 0;
} }
#conversejs div.chat-head-chatbox a.user-custom-message { #conversejs div.chat-head-chatbox a.user-custom-message {
...@@ -1293,6 +1289,10 @@ select#select-xmpp-status { ...@@ -1293,6 +1289,10 @@ select#select-xmpp-status {
height: 62px; height: 62px;
} }
#conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0;
}
#conversejs ul.chat-toolbar { #conversejs ul.chat-toolbar {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
...@@ -1498,18 +1498,22 @@ input.custom-xmpp-status { ...@@ -1498,18 +1498,22 @@ input.custom-xmpp-status {
} }
#conversejs .box-flyout { #conversejs .box-flyout {
position: absolute; border-radius: 4px;
display: block;
bottom: 6px; bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4); box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
border-radius: 4px; display: block;
height: 324px; height: 324px;
position: absolute;
} }
#conversejs .box-flyout.minimized { #conversejs .box-flyout.minimized {
height: auto; height: auto;
} }
#conversejs .box-flyout.minimized .chat-head {
border-radius: 4px;
}
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
width: 200px; width: 200px;
} }
......
mockup/index.html
View file @ 0b710b80
...@@ -4,12 +4,13 @@ ...@@ -4,12 +4,13 @@
<title id="pageTitle">Converse.js: Mockup</title> <title id="pageTitle">Converse.js: Mockup</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Chat Client for Websites" /> <meta name="description" content="Converse.js: Mockup" />
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css"> <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
<link type="text/css" rel="stylesheet" href="../converse.css"> <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script> <script src="../components/jquery/dist/jquery.min.js"></script>
</head> </head>
<body> <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- HEADER --> <!-- HEADER -->
<div id="header_wrap" class="outer"> <div id="header_wrap" class="outer">
<header class="inner"> <header class="inner">
...@@ -201,7 +202,7 @@ ...@@ -201,7 +202,7 @@
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a> <a class="toggle-chatbox-button icon-minus"></a>
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas> <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> <div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user"> <a href="http://opkode.com" target="_blank" class="user">
JC Brand JC Brand
...@@ -438,12 +439,10 @@ $(document).ready(function () { ...@@ -438,12 +439,10 @@ $(document).ready(function () {
$tab_panel = $($tab.attr('href')), $tab_panel = $($tab.attr('href')),
$sibling_panel = $($sibling.attr('href')); $sibling_panel = $($sibling.attr('href'));
$sibling_panel.fadeOut('fast', function () { $sibling_panel.hide();
$sibling.removeClass('current'); $sibling.removeClass('current');
$tab.addClass('current'); $tab.addClass('current');
$tab_panel.fadeIn('fast', function () { $tab_panel.show();
});
});
} }
$(function() { $(function() {
...@@ -459,7 +458,7 @@ $(document).ready(function () { ...@@ -459,7 +458,7 @@ $(document).ready(function () {
$('.toggle-chatbox-button').click(function(ev) { $('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent(); var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.find('.chat-body').slideToggle(300); $grandparent.find('.chat-body').slideToggle('fast');
var flyout = $grandparent.find('.box-flyout'); var flyout = $grandparent.find('.box-flyout');
if (flyout.hasClass('minimized')) { if (flyout.hasClass('minimized')) {
flyout.removeClass('minimized'); flyout.removeClass('minimized');
......
mockup/minimized.html
View file @ 0b710b80
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Chat Client for Websites" /> <meta name="description" content="Converse.js: Chat Client for Websites" />
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css"> <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
<link type="text/css" rel="stylesheet" href="../converse.css"> <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/jquery.min.js"></script> <script src="../components/jquery/dist/jquery.min.js"></script>
</head> </head>
<body> <body>
<!-- HEADER --> <!-- HEADER -->
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class="chat-head-message-count" style="display:block">3</div> <div class="chat-head-message-count" style="display:block">3</div>
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a> <a class="toggle-chatbox-button icon-minus"></a>
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas> <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> <div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user"> <a href="http://opkode.com" target="_blank" class="user">
JC Brand JC Brand
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7