From 891f291c32407ac6c86076c4dc4751bc2aa507dc Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 28 Feb 2014 22:11:06 +0200 Subject: [PATCH] Add new mockup specifically for minimized chats --- converse.css | 39 ++++- mockup.html => mockup/index.html | 11 +- mockup/minimized.html | 274 +++++++++++++++++++++++++++++++ 3 files changed, 309 insertions(+), 15 deletions(-) rename mockup.html => mockup/index.html (98%) create mode 100644 mockup/minimized.html diff --git a/converse.css b/converse.css index b3c29a5d1..4180c3680 100644 --- 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); } diff --git a/mockup.html b/mockup/index.html similarity index 98% rename from mockup.html rename to mockup/index.html index 2d8f9c47b..e18479507 100644 --- a/mockup.html +++ b/mockup/index.html @@ -1,14 +1,13 @@ - Converse: Mockup + Converse.js: Mockup - - - - - + + + + diff --git a/mockup/minimized.html b/mockup/minimized.html new file mode 100644 index 000000000..6fd39dc2c --- /dev/null +++ b/mockup/minimized.html @@ -0,0 +1,274 @@ + + + + Converse.js: Mockup of minimized chats + + + + + + + + + +
+
+

Converse.js

+

Static Mockup

+
+
+ +
+ +
+
+
+
+
3
+ + + +
+ + JC Brand + +
+

10000ft in the air

+ +
+ +
+
+ +
+
+
+
+
42
+ + + +
Chatroom
+

May the force be with you

+
+ +
+
+
+ + + +