Add new mockup specifically for minimized chats

891f291c · JC Brand · 6a421af9 · 891f291c · 891f291c · 891f291c
Commit 891f291c authored Feb 28, 2014 by JC Brand
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 309 additions and 15 deletions

converse.css converse.css +30 -9

mockup/index.html mockup/index.html +5 -6

mockup/minimized.html mockup/minimized.html +274 -0

No files found.
--- a/converse.css
+++ b/converse.css
@@ -657,6 +657,27 @@ form.search-xmpp-contact input {
    padding: 3px 0 0 0;
 }

+.chat-head-message-count {
+    font-weight: bold;
+    position: absolute;
+    left: -6px;
+    top: -6px;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
+    background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
+    border: 3px solid rgb(79, 106, 114);
+    text-shadow: 1px 1px 0 #ccc;
+    color: darkred;
+    border-radius: 20%;
+    padding: 2px 10px;
+    font-size: 18px;
+    text-align: center;
+}
+
+.chat-head-chatroom .chat-head-message-count {
+    border: 3px solid #2D617A;
+}
+
 a.configure-chatroom-button,
 a.toggle-chatbox-button,
 a.close-chatbox-button {
@@ -668,8 +689,8 @@ a.close-chatbox-button {
    -moz-box-shadow:inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
    box-shadow:inset 0 1px 0 0 #ffffff;
-    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
-    background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
+    background:-moz-linear-gradient(center top, #ffffff 5%, #f6f6f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
@@ -957,7 +978,7 @@ select#select-xmpp-status {

 /* single tab */
 .chat-head #controlbox-tabs li {
-    float:left;
+    float: left;
    list-style: none;
    padding-left: 0;
    text-shadow: white 0 1px 0;
@@ -965,16 +986,16 @@ select#select-xmpp-status {
 }

 ul#controlbox-tabs li a {
-    display:block;
-    font-size:12px;
+    display: block;
+    font-size: 12px;
    height: 34px;
-    line-height:34px;
+    line-height: 34px;
    margin: 0;
-    text-align:center;
-    text-decoration:none;
+    text-align: center;
+    text-decoration: none;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
-    color:#666;
+    color: #666;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }


--- a/mockup.html
+++ b/mockup.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title id="pageTitle">Converse: Mockup</title>
+    <title id="pageTitle">Converse.js: Mockup</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
-
-    <link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
-    <link type="text/css" rel="stylesheet" href="converse.css">
-    <script src="components/jquery/jquery.min.js"></script>
+    <meta name="description" content="Converse.js: Chat Client for Websites" />
+    <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
+    <link type="text/css" rel="stylesheet" href="../converse.css">
+    <script src="../components/jquery/jquery.min.js"></script>
 </head>
 <body>
 <!-- HEADER -->

--- a/mockup/minimized.html
+++ b/mockup/minimized.html