Browse Source

new design for Kaiwa to distinguish from Slack

redesign
Sébastien Hut 6 years ago
parent
commit
89c0fe23ac
22 changed files with 309 additions and 305 deletions
  1. +6
    -6
      clientapp/templates.js
  2. +12
    -9
      clientapp/templates/body.jade
  3. +1
    -0
      clientapp/templates/includes/contactListItem.jade
  4. +0
    -1
      clientapp/templates/includes/mucListItem.jade
  5. +1
    -2
      clientapp/templates/pages/chat.jade
  6. +0
    -1
      clientapp/templates/pages/groupchat.jade
  7. +0
    -4
      clientapp/templates/pages/settings.jade
  8. +1
    -0
      clientapp/views/contactListItem.js
  9. +1
    -1
      dev_config.json
  10. +1
    -0
      public/css/_mixins.styl
  11. +19
    -12
      public/css/_variables.styl
  12. +151
    -152
      public/css/client.css
  13. +0
    -0
      public/css/client.styl
  14. +1
    -1
      public/css/components/layout.styl
  15. +0
    -1
      public/css/pages/aux.styl
  16. +35
    -42
      public/css/pages/chat.styl
  17. +4
    -5
      public/css/pages/header.styl
  18. +6
    -6
      public/css/pages/me.styl
  19. +64
    -44
      public/css/pages/roster.styl
  20. +3
    -15
      public/css/pages/settings.styl
  21. +2
    -2
      server.js
  22. +1
    -1
      views/layout.jade

+ 6
- 6
clientapp/templates.js View File

@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg id="settingssvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently&nbsp;<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>');
buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg id="settingssvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><div class="viewport"><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Contacts</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></div><section id="kaiwaNotice"><img src="/images/logo.png" alt="Kaiwa"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently&nbsp;<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>');
}
return buf.join("");
};
@ -113,7 +113,7 @@ exports.includes.call = function anonymous(locals) {
exports.includes.contactListItem = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>");
buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><img class="avatar"/><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>");
}
return buf.join("");
};
@ -320,7 +320,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
exports.includes.mucListItem = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><span class="prefix">#</span><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>");
buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>");
}
return buf.join("");
};
@ -539,7 +539,7 @@ exports.misc.growlMessage = function anonymous(locals) {
exports.pages.chat = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button><div class="contactState"></div></div></section></section>');
buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><div class="contactState"></div><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button></div></section></section>');
}
return buf.join("");
};
@ -548,7 +548,7 @@ exports.pages.chat = function anonymous(locals) {
exports.pages.groupchat = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<section class="page chat"><section class="group conversation"><header class="online"><div class="title"><span class="prefix">#</span><span class="name"></span><i class="channel_actions fa fa-comments-o"></i><span contenteditable="true" spellcheck="false" class="status"></span></div></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><ul class="autoComplete"></ul><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
buf.push('<section class="page chat"><section class="group conversation"><header class="online"><div class="title"><span class="name"></span><i class="channel_actions fa fa-comments-o"></i><span contenteditable="true" spellcheck="false" class="status"></span></div></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><ul class="autoComplete"></ul><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
}
return buf.join("");
};
@ -557,7 +557,7 @@ exports.pages.groupchat = function anonymous(locals) {
exports.pages.settings = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<section class="page main"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 30 30" height="30" width="30"><g transform="scale(0.5)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div id="ldapSettings"><h4>LDAP settings</h4><ul id="ldapUsers"></ul><input type="text" placeholder="add a ldap user" id="newLdapUser"/></div><div><button class="disconnect">Disconnect</button><button class="primary logout">Logout</button></div></section>');
buf.push('<section class="page main"><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div id="ldapSettings"><h4>LDAP settings</h4><ul id="ldapUsers"></ul><input type="text" placeholder="add a ldap user" id="newLdapUser"/></div><div><button class="disconnect">Disconnect</button><button class="primary logout">Logout</button></div></section>');
}
return buf.join("");
};


+ 12
- 9
clientapp/templates/body.jade View File

@ -11,15 +11,18 @@ body
g(transform='scale(0.4)')
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
section#bookmarks
h1 Rooms
nav
input(type="text", class="inline", placeholder="add a room")#joinmuc
section#roster
h1 Direct messages
ul#contactrequests
nav
input(type="text", class="inline", placeholder="add a contact")#addcontact
div.viewport
section#bookmarks
h1 Rooms
nav
input(type="text", class="inline", placeholder="add a room")#joinmuc
section#roster
h1 Contacts
ul#contactrequests
nav
input(type="text", class="inline", placeholder="add a contact")#addcontact
section#kaiwaNotice
img(src="/images/logo.png", alt="Kaiwa")
header#topbar
#connectionStatus
p


+ 1
- 0
clientapp/templates/includes/contactListItem.jade View File

@ -3,6 +3,7 @@ li.contact.joined
i.remove.fa.fa-times-circle
i.presence.fa.fa-circle
.user
img.avatar
span.name=contact.displayName
span.idleTime=contact.idleSince
.unread=contact.unreadCount

+ 0
- 1
clientapp/templates/includes/mucListItem.jade View File

@ -2,6 +2,5 @@ li.contact
.wrap
i.remove.fa.fa-times-circle
i.join.fa.fa-sign-in
span.prefix #
.unread=contact.unreadCount
span.name=contact.displayName

+ 1
- 2
clientapp/templates/pages/chat.jade View File

@ -2,7 +2,6 @@ section.page.chat
section.conversation
header
.title
span.prefix @
span.name
i.user_presence.fa.fa-circle
span.status
@ -19,7 +18,7 @@ section.page.chat
button.mute Mute
button.unmute Unmute
.chatBox
.contactState
form.formwrap
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
button.primary.small.call Call
.contactState

+ 0
- 1
clientapp/templates/pages/groupchat.jade View File

@ -2,7 +2,6 @@ section.page.chat
section.group.conversation
header.online
.title
span.prefix #
span.name
i.channel_actions.fa.fa-comments-o
span.status(contenteditable="true", spellcheck="false")


+ 0
- 4
clientapp/templates/pages/settings.jade View File

@ -1,9 +1,5 @@
section.page.main
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 30 30", height="30", width="30")
g(transform='scale(0.5)')
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
h1#title Settings
div#avatarChanger


+ 1
- 0
clientapp/views/contactListItem.js View File

@ -22,6 +22,7 @@ module.exports = HumanView.extend({
displayUnreadCount: '.unread'
},
srcBindings: {
avatar: '.avatar'
},
events: {
'click': 'handleClick',


+ 1
- 1
dev_config.json View File

@ -14,7 +14,7 @@
"domain": "example.com",
"wss": "wss://example.com:5281/xmpp-websocket/",
"muc": "chat.example.com",
"startup": "room%40chat.example.com",
"startup": "groupchat/room%40chat.example.com",
"admin": "admin"
},
"ldap": {


+ 1
- 0
public/css/_mixins.styl View File

@ -41,6 +41,7 @@ avatar()
width: 36px
height: 36px
roundall(0.2rem)
border-radius: 50%
// this if for the content flash and hardware acceleration bugs in webkit
webkit-transition-fix()


+ 19
- 12
public/css/_variables.styl View File

@ -25,7 +25,7 @@ $pink-lighter = #fce8f1
// Greens
$green = #4C9689
$green = #41A564
$green-light = lighten($green, 70%)
$green-lighter = lighten($green, 94%)
$green-lighterer = #B2D5C9
@ -65,25 +65,32 @@ $black = #3D3C40
// Style
$sidebarTopAndBottomBg = #1A233F
$topbarBg = #3D486B
$topbarFg = #fff
$meUsernameColor = #fff
$sidebarTopAndBottomBg = #2B3556
$sidebarOrgaName = #fff
$sidebarBorder = #121A33
$sidebarBg = #3D486B
$sidebarText = #ABB6DA
$sidebarBg = #E5E5E5
$sidebarText = #565656
$sidebarSectionTitleColor = #8E8E8E
$sidebarNames = #C1DCEC
$sidebarNames = #919191
$sidebarInputBg = $sidebarBg
$sidebarInputBorder = #626F9C
$sidebarInputBorder = #BBBBBB
$sidebarInputText = $sidebarNames
$sidebarSelectionBg = #94B021
$sidebarSelectionText = #fff
$sidebarSelectionBg = #AEAEAE
$sidebarSelectionText = #000
$sidebarUnreadBg = $sidebarSelectionBg
$sidebarUnreadText = $sidebarSelectionText
$sidebarUnreadText = #000
$sidebarHover = $sidebarTopAndBottomBg
$sidebarHover = $sidebarSelectionBg
$sidebarHoverText = #fff
$sidebarRequestBg = $sidebarHover
$sidebarRequestBorder = $sidebarHover
@ -91,8 +98,8 @@ $sidebarRequestBorder = $sidebarHover
$sidebarStatusText = $sidebarNames
$sidebarStatusBorder = $sidebarInputBorder
$settingsBg = $sidebarBg
$settingsText = #fff
$settingsBg = transparent
$settingsText = #B5B5B5
$settingsHoverBg = #fff
$settingsHoverText = $sidebarSelectionBg


public/css/otalk.css → public/css/client.css View File


public/css/otalk.styl → public/css/client.styl View File


+ 1
- 1
public/css/components/layout.styl View File

@ -27,6 +27,6 @@ a
position: absolute
top: 0px
right: 0px
left: 220px
left: 230px
height: 100%
borderbox()

+ 0
- 1
public/css/pages/aux.styl View File

@ -1,5 +1,4 @@
.aux
background: lighten($gray-light, 93%)
header
margin-top: 8%


+ 35
- 42
public/css/pages/chat.styl View File

@ -23,9 +23,9 @@
position: fixed
top: 0px
right: 0px
left: 220px
left: 230px
right: 200px
height: 55px
height: 42px
z-index: 101
.title
@ -34,7 +34,7 @@
top: 0px
white-space: nowrap
display: inline-block
height: 53px
height: 42px
.prefix, .name, .user_presence, .channel_actions, .status
display: inline-block
@ -43,13 +43,13 @@
text-rendering: optimizelegibility
top: 0px
vertical-align: middle
line-height: 42px
.prefix
color: $gray
font-size: $font-size-h2
font-weight: $font-weight-classic
margin-left: 25px
line-height: 53px
cursor: default
.name
@ -57,14 +57,13 @@
font-weight: $font-weight-bolder
overflow: hidden
text-overflow: ellipsis
padding-left: 3px
line-height: 53px
padding-left: 20px
cursor: default
color: $topbarFg
.user_presence, .channel_actions
color: $gray
padding-left: 8px
line-height: 53px
cursor: default
.user_presence
@ -106,7 +105,6 @@
font-size: $font-size-h3
line-height: 18px
margin-left: 15px
padding-top: 5px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
@ -194,8 +192,7 @@
bottom: 0px
position: fixed
right: 0px
left: 221px
height: 4rem
left: 230px
z-index: 302
transition: none
-webkit-transition: none
@ -204,7 +201,7 @@
display: none
position: fixed
left: 245px
bottom: 64px
bottom: 46px
border: 2px solid #ddd
border-bottom: 0
border-radius: 0.25rem 0.25rem 0 0
@ -235,30 +232,24 @@
transition: none
-webkit-transition: none
position: relative
height:38px
left: 24px
margin-right: 50px
textarea
display: inline-block
vertical-align: middle
background: none repeat scroll 0% 0% padding-box #fff
font-size: 13px
border-width: 2px
border-style: solid
border-color: $gray-lighter
border-image: none
border-radius: 0px 0.2rem 0.2rem 0px
border: 0
border-top: 2px solid $gray-lighter
border-radius: 0
font-family: "Lato",sans-serif
margin: 0
color: #3D3C40
overflow-y: auto
box-shadow: none
outline: 0px none
position: absolute
bottom: 0px
height: 38px
padding: 9px 5px 9px 8px
height: 44px;
padding: 13px 24px
max-height: 102px
resize: none !important
@ -285,8 +276,8 @@
position: absolute
top: 0px
right: 0px
bottom: 4rem
margin-top: 54px
bottom: 59px
margin-top: 43px
width: 100%
borderbox()
-webkit-overflow-scrolling: touch
@ -295,14 +286,13 @@
display: block
background: none repeat scroll 0% 0% #fff
font-size: 1rem
color: #555459
font-weight: 900
text-align: center
color: $gray-light
text-align: right
cursor: default
clear: both
position: relative
line-height: 1.2rem
margin: 1.5rem 0px
margin: 10px 0 30px
padding: 0
min-height: 0
@ -312,14 +302,13 @@
top: 0.6rem
margin: 0px
border-width: 1px 0px 0px 0px
border-style: solid none
border-style: dotted none
border-color: #ddd
.day_divider_name
background: none repeat scroll 0% 0% #fff
text-transform: capitalize
text-align: center
padding: 0px 1rem
padding-left: 1rem
display: inline-block
margin: 0px auto
position: relative
@ -376,24 +365,24 @@
padding: 0px 0px 12px 15px
width: 99%
vertical-align: top
position: relative
.message_header
.name
display: inline-block
margin-right: 0.25rem
font-weight: $font-weight-bolder
font-size: $font-size-message
color: $black
line-height: 22px
cursor: pointer
font-size: $font-size-small
line-height: 16px
color: $gray
font-weight: bold
&:empty
margin-right: 0
.nickname
display: inline-block
font-weight: $font-weight-classic
font-size: $font-size-base
font-size: $font-size-small
color: $gray
line-height: 22px
cursor: pointer
@ -409,13 +398,15 @@
width: 60px
line-height: 22px
text-transform: uppercase
cursor: pointer
text-aligne: right
position: absolute
right: 0
.message
font-size: $font-size-message
line-height: 22px
line-height: 20px
color: $black
margin: 0px 0px 2px 0px
margin: 0
display: block
min-width: 20px
width: 100%
@ -502,11 +493,13 @@
*/
#members_toggle
position: absolute
top: 60px
right: 20px
top: 50px
right: 27px
cursor: pointer
color: $gray
font-size: $font-size-h3
background: #fff
padding: 5px
&:hover
color: #439FE0


+ 4
- 5
public/css/pages/header.styl View File

@ -2,7 +2,6 @@
@import '../_mixins'
#topbar.connected
background-color: rgb(247, 247, 247)
z-index: 100
#connectionStatus
display: none
@ -11,16 +10,16 @@
position: fixed
right: 0px
top: 0px
height: 55px
height: 42px
width: 100%
background-color: lighten($sidebarTopAndBottomBg, 60%)
background-color: $topbarBg
z-index: 102
noselect()
color: #fff
color: $topbarFg
#connectionStatus
width: 340px
margin: 9px auto
margin: 2px auto
background-color: transparent
p


+ 6
- 6
public/css/pages/me.styl View File

@ -7,7 +7,7 @@
display: none
position: fixed
right: 0
padding: 8px 5px 5px 5px
padding: 1px 0px 5px 5px
width: 175px
.avatar
@ -18,6 +18,7 @@
background-color: transparent
vertical-align: middle
margin: 3px 0.5rem 0px 0px;
border-radius: 50%;
.name,
.status
@ -28,19 +29,18 @@
text-align: right
.name
color: $gray-dark
font-size: $font-size-large
color: $meUsernameColor
font-size: $font-size-base
font-weight: $font-weight-bolder
margin-top: 3px;
.status
color: $gray
font-weight: normal
font-size: $font-size-base
line-height: $font-size-base
font-size: $font-size-small
border-width: 0px
margin: 0px
padding: 0px
line-height: 18px
height: 18px
white-space: nowrap
transition: all .25s


+ 64
- 44
public/css/pages/roster.styl View File

@ -6,33 +6,30 @@
top: 0px
bottom: 0px
left: 0px
width: 220px
width: 230px
background-color: $sidebarBg
color: $sidebarText
border-right: 1px solid $sidebarBorder
z-index: 300
overflow-y: auto;
overflow-x: hidden;
webkit-transition-fix()
noselect()
#organization
width: 220px
width: 230px
height: 42px
margin-bottom: 10px
background: $sidebarTopAndBottomBg
#orga_name
color: $sidebarOrgaName
color: $topbarFg
font-size: $font-size-large
font-weight: $font-weight-bolder
line-height: 53px;
line-height: 42px;
vertical-align: middle
margin-left: 20px
.settings
position: relative
height: 30px
left: 0px
height: 28px;
left: 5px;
background-color: $settingsBg
color: $settingsText
transition: none
@ -54,6 +51,17 @@
svg
fill: $settingsHoverText
.viewport
position: absolute
top: 42px
bottom: 22px
left: 0
right: 0
overflow-y: auto
overflow-x: hidden
padding-top: 20px
padding-bottom: 10px
.main
margin: 10px 0 0 0
text-align: center
@ -76,14 +84,15 @@
position: relative
h1
font-size: $font-size-base
font-size: $font-size-message
margin: 0
padding: 4px 20px
text-transform: uppercase
margin-bottom: 7px;
color: $sidebarSectionTitleColor
#roster,
#bookmarks
margin-right: 20px
margin-bottom: 25px
#contactrequests
@ -126,11 +135,9 @@
li
list-style-type: none
padding: 4px 10px
margin: 0px 0px 0px 10px
border-radius: 0.25rem
padding: 3px 10px
padding-right: 15px
position: relative
height: 25px
font-size: $font-size-base
cursor: pointer
width: 100%
@ -139,6 +146,7 @@
&:hover
background: $sidebarHover
color: $sidebarHoverText
&.joined
&:hover:not(.hasUnread) .remove
@ -150,7 +158,7 @@
&.hasUnread, &.hasUnread .prefix
font-weight: $font-weight-bolder
color: #fff
color: $sidebarUnreadText
&:not(.activeContact).offline,
&:not(.activeContact).chat
@ -170,16 +178,13 @@
&.activeContact, &.offline.activeContact
background: $sidebarSelectionBg
.prefix
color: $green-lighterer
opacity: 1
&:not(.dnd):not(.away):not(.online) .presence
color: $brown-darkerer
opacity: 1
.remove, .join
color: #fff
color: $sidebarSelectionText
.name
color: #fff
color: $sidebarSelectionText
&:not(.activeContact).online
.presence
@ -221,17 +226,17 @@
display: inline-block
margin-top: -10px
vertical-align: middle
opacity: 0.5
position: absolute;
right: 28px;
top: 21px;
.user
display: inline-block
width: 120px
line-height: 100%
width: 170px
overflow: hidden
text-overflow: ellipsis
height: $font-size-base+3
height: $font-size-base+6
font-style: italic
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
.status
font-size: $font-size-small
@ -245,16 +250,24 @@
font-size: $font-size-small
color: darken($brown-light, 50%)
.avatar
width: 16px
height: 16px
roundall(0.2rem)
border-radius: 50%
margin: 0
padding: 0
margin-right: 5px
margin-top: 4px
.name
width: 100%
line-height: 100%
overflow: hidden
text-overflow: ellipsis
height: $font-size-base+3
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
position: absolute
left: 22px
max-width: 140px
line-height: 23px
height: 23px
position: absolute
.unread
display: none
@ -264,8 +277,8 @@
roundall(5px)
position: absolute
padding-top:2px
right: 5px
top: 3px
right: 15px
top: 6px
font-size: $font-size-smaller
font-weight: $font-weight-bold
text-align: center
@ -276,20 +289,13 @@
.remove, .join
position: absolute
right: 7px
top: 5px
right: 10px
top: 8px
font-size: $font-size-base
display: inline-block
font-family: FontAwesome
visibility: hidden
.prefix
font-weight: 300
opacity: 0.5
position: relative
left: -15px
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
button
margin: -15px 0px 0px 5px
@ -308,11 +314,13 @@
#roster
.wrap
padding-left: 0px
padding-left: 14px
height: 23px;
#bookmarks
.wrap
padding-left: 14px
height: 23px
@keyframes pulsate
0%
@ -321,3 +329,15 @@
opacity: 0.5
100%
opacity: 1.0
#kaiwaNotice
position: absolute
bottom: 5px
left: 50%
width: 50px
margin-left: -25px
img
width: 100%
display: block
opacity: .4

+ 3
- 15
public/css/pages/settings.styl View File

@ -4,24 +4,12 @@
// Settings
.main
svg
position: absolute
top: 24px
left: 16px
margin: 0px
margin-top: -13px
fill: $gray
z-index: 101
h1
color: $gray-dark
padding: 0
color: #fff
padding: 6px 12px
margin: 0
position: fixed
top: 14px
left: 266px
right: 200px
z-index: 101
position: fixed
#ldapSettings
display: none


+ 2
- 2
server.js View File

@ -352,7 +352,7 @@ var clientApp = new Moonboots({
debug: false
},
stylesheets: [
__dirname + '/public/css/otalk.css',
__dirname + '/public/css/client.css',
__dirname + '/public/css/jquery.oembed.css',
__dirname + '/public/css/jquery-impromptu.css'
],
@ -400,5 +400,5 @@ clientApp.on('ready', function () {
//}, app).listen(config.http.port);
app.listen(config.http.port, function () {
console.log('Otalk running at: ' + config.http.baseUrl);
console.log('Kaiwa running at: ' + config.http.baseUrl);
});

+ 1
- 1
views/layout.jade
File diff suppressed because it is too large
View File


Loading…
Cancel
Save