mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-12-23 16:18:48 -05:00
New blue style
This commit is contained in:
Sebastien Hut
parent
ba12a94c10
commit
04fada09d7
@ -122,6 +122,9 @@ module.exports = {
|
||||
// to start with the active class already before appending to DOM.
|
||||
container.append(view.render(animation === 'none').el);
|
||||
view.show(animation);
|
||||
},
|
||||
serverConfig: function () {
|
||||
return SERVER_CONFIG;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -63,7 +63,13 @@ module.exports = HumanModel.define({
|
||||
if (!this.stream) return '';
|
||||
return URL.createObjectURL(this.stream);
|
||||
}
|
||||
}
|
||||
},
|
||||
organization: {
|
||||
deps: ['orga'],
|
||||
fn: function () {
|
||||
return app.serverConfig().name || 'Otalk';
|
||||
}
|
||||
},
|
||||
},
|
||||
setActiveContact: function (jid) {
|
||||
var prev = this.getContact(this._activeContact);
|
||||
@ -125,6 +131,7 @@ module.exports = HumanModel.define({
|
||||
|
||||
app.storage.profiles.get(this.jid.bare, function (err, profile) {
|
||||
if (!err) {
|
||||
self.nick = self.jid.local;
|
||||
self.status = profile.status;
|
||||
self.avatarID = profile.avatarID;
|
||||
}
|
||||
|
||||
@ -16,6 +16,10 @@ module.exports = HumanModel.define({
|
||||
if (attrs.jid) {
|
||||
this.id = attrs.jid.full;
|
||||
}
|
||||
var self = this;
|
||||
this.resources.bind("add remove reset", function(){
|
||||
self.membersCount = self.resources.length;
|
||||
});
|
||||
},
|
||||
type: 'muc',
|
||||
props: {
|
||||
@ -32,7 +36,8 @@ module.exports = HumanModel.define({
|
||||
lastSentMessage: 'object',
|
||||
unreadCount: ['number', false, 0],
|
||||
persistent: ['bool', false, false],
|
||||
joined: ['bool', true, false]
|
||||
joined: ['bool', true, false],
|
||||
membersCount: ['number', false, 0],
|
||||
},
|
||||
derived: {
|
||||
displayName: {
|
||||
@ -52,7 +57,7 @@ module.exports = HumanModel.define({
|
||||
else
|
||||
return '99+'
|
||||
}
|
||||
return '0';
|
||||
return '';
|
||||
}
|
||||
},
|
||||
displaySubject: {
|
||||
|
||||
@ -29,7 +29,6 @@ module.exports = BasePage.extend({
|
||||
events: {
|
||||
'keydown textarea': 'handleKeyDown',
|
||||
'keyup textarea': 'handleKeyUp',
|
||||
'click .remove': 'handleRemoveClick',
|
||||
'click .call': 'handleCallClick',
|
||||
'click .accept': 'handleAcceptClick',
|
||||
'click .end': 'handleEndClick',
|
||||
@ -46,8 +45,8 @@ module.exports = BasePage.extend({
|
||||
},
|
||||
classBindings: {
|
||||
chatState: 'header',
|
||||
idle: 'header',
|
||||
show: 'header',
|
||||
idle: '.user_presence',
|
||||
show: '.user_presence',
|
||||
onCall: '.conversation'
|
||||
},
|
||||
show: function (animation) {
|
||||
@ -76,7 +75,7 @@ module.exports = BasePage.extend({
|
||||
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
|
||||
this.listenToAndRun(this.model, 'change:jingleResources', this.handleJingleResourcesChanged);
|
||||
|
||||
$(window).on('resize', _.bind(this.resizeInput, this));
|
||||
//$(window).on('resize', _.bind(this.resizeInput, this));
|
||||
|
||||
this.registerBindings(me, {
|
||||
srcBindings: {
|
||||
@ -88,11 +87,7 @@ module.exports = BasePage.extend({
|
||||
},
|
||||
handlePageLoaded: function () {
|
||||
this.staydown.checkdown();
|
||||
this.resizeInput();
|
||||
},
|
||||
handleRemoveClick: function (e) {
|
||||
me.removeContact(this.model.jid);
|
||||
app.navigate('/');
|
||||
//this.resizeInput();
|
||||
},
|
||||
handleCallClick: function (e) {
|
||||
e.preventDefault();
|
||||
@ -102,6 +97,7 @@ module.exports = BasePage.extend({
|
||||
renderCollection: function () {
|
||||
var self = this;
|
||||
this.$messageList.empty();
|
||||
this.lastDate = '';
|
||||
this.model.messages.each(function (model, i) {
|
||||
self.appendModel(model);
|
||||
});
|
||||
@ -133,7 +129,7 @@ module.exports = BasePage.extend({
|
||||
}
|
||||
},
|
||||
handleKeyUp: function (e) {
|
||||
this.resizeInput();
|
||||
//this.resizeInput();
|
||||
if (this.typing && this.$chatInput.val().length === 0) {
|
||||
this.typing = false;
|
||||
this.$chatInput.removeClass('typing');
|
||||
@ -215,10 +211,16 @@ module.exports = BasePage.extend({
|
||||
this.$('button.call').prop('disabled', !resources.length);
|
||||
},
|
||||
appendModel: function (model, preload) {
|
||||
var self = this;
|
||||
var isGrouped = model.shouldGroupWith(this.lastModel);
|
||||
var newEl, first, last;
|
||||
|
||||
var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
|
||||
if (messageDay !== this.lastDate) {
|
||||
var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
|
||||
this.staydown.append(dayDivider[0]);
|
||||
this.lastDate = messageDay;
|
||||
}
|
||||
|
||||
var isGrouped = model.shouldGroupWith(this.lastModel);
|
||||
if (isGrouped) {
|
||||
newEl = $(model.partialTemplateHtml);
|
||||
last = this.$messageList.find('li').last();
|
||||
|
||||
@ -28,18 +28,18 @@ module.exports = BasePage.extend({
|
||||
events: {
|
||||
'keydown textarea': 'handleKeyDown',
|
||||
'keyup textarea': 'handleKeyUp',
|
||||
'click .joinRoom': 'handleJoin',
|
||||
'click .leaveRoom': 'handleLeave',
|
||||
'click .status': 'clickStatusChange',
|
||||
'blur .status': 'blurStatusChange',
|
||||
'keydown .status': 'keyDownStatusChange'
|
||||
'keydown .status': 'keyDownStatusChange',
|
||||
'click #members_toggle': 'clickMembersToggle'
|
||||
},
|
||||
classBindings: {
|
||||
joined: '.controls'
|
||||
},
|
||||
textBindings: {
|
||||
displayName: 'header .name',
|
||||
subject: 'header .status'
|
||||
subject: 'header .status',
|
||||
membersCount: '#members_toggle_count'
|
||||
},
|
||||
show: function (animation) {
|
||||
BasePage.prototype.show.apply(this, [animation]);
|
||||
@ -73,7 +73,7 @@ module.exports = BasePage.extend({
|
||||
|
||||
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
|
||||
|
||||
$(window).on('resize', _.bind(this.resizeInput, this));
|
||||
//$(window).on('resize', _.bind(this.resizeInput, this));
|
||||
|
||||
this.registerBindings();
|
||||
|
||||
@ -81,6 +81,7 @@ module.exports = BasePage.extend({
|
||||
},
|
||||
renderMessages: function () {
|
||||
var self = this;
|
||||
this.lastDate = '';
|
||||
this.model.messages.each(function (model, i) {
|
||||
self.appendModel(model);
|
||||
});
|
||||
@ -91,7 +92,7 @@ module.exports = BasePage.extend({
|
||||
},
|
||||
handlePageLoaded: function () {
|
||||
this.staydown.checkdown();
|
||||
this.resizeInput();
|
||||
//this.resizeInput();
|
||||
},
|
||||
handleKeyDown: function (e) {
|
||||
if (e.which === 13 && !e.shiftKey) {
|
||||
@ -122,7 +123,7 @@ module.exports = BasePage.extend({
|
||||
}
|
||||
},
|
||||
handleKeyUp: function (e) {
|
||||
this.resizeInput();
|
||||
//this.resizeInput();
|
||||
if (this.typing && this.$chatInput.val().length === 0) {
|
||||
this.typing = false;
|
||||
this.paused = false;
|
||||
@ -208,12 +209,6 @@ module.exports = BasePage.extend({
|
||||
this.$chatInput.removeClass('editing');
|
||||
this.$chatInput.val('');
|
||||
},
|
||||
handleJoin: function () {
|
||||
this.model.join();
|
||||
},
|
||||
handleLeave: function () {
|
||||
this.model.leave();
|
||||
},
|
||||
clickStatusChange: function (e) {
|
||||
tempSubject = e.target.textContent;
|
||||
},
|
||||
@ -230,11 +225,24 @@ module.exports = BasePage.extend({
|
||||
return false;
|
||||
}
|
||||
},
|
||||
clickMembersToggle: function (e) {
|
||||
var roster = $('.groupRoster');
|
||||
if (roster.css('visibility') == 'hidden')
|
||||
roster.css('visibility', 'visible');
|
||||
else
|
||||
roster.css('visibility', 'hidden');
|
||||
},
|
||||
appendModel: function (model, preload) {
|
||||
var self = this;
|
||||
var isGrouped = model.shouldGroupWith(this.lastModel);
|
||||
var newEl, first, last;
|
||||
|
||||
var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
|
||||
if (messageDay !== this.lastDate) {
|
||||
var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
|
||||
this.staydown.append(dayDivider[0]);
|
||||
this.lastDate = messageDay;
|
||||
}
|
||||
|
||||
var isGrouped = model.shouldGroupWith(this.lastModel);
|
||||
if (isGrouped) {
|
||||
newEl = $(model.partialTemplateHtml);
|
||||
last = this.$messageList.find('li').last();
|
||||
|
||||
@ -13,7 +13,7 @@ exports.pages = {};
|
||||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="roster"><h1>Roster</h1><input type="text" id="addcontact" class="inline"/><button class="primary small addContact">Add</button><ul id="contactrequests"></ul><nav></nav></section><section id="bookmarks"><h1>Rooms</h1><input type="text" id="joinmuc" class="inline"/><button class="primary small joinMUC">Add</button><nav></nav></section></aside><header id="me"><h1><img class="avatar"/><span class="name"></span><span contenteditable="true" class="status"></span></h1><a href="/" class="button secondary settings"><svg 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>Settings</a></header></div><main id="pages"></main></body>');
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><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></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"><a href="/" class="button secondary settings"><svg 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>Settings</a></header><main id="pages"></main><div id="footer"><div id="me"><div><img class="avatar"/></div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></div></body>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
@ -37,7 +37,7 @@ exports.includes.bareMessage = function anonymous(locals) {
|
||||
}, {
|
||||
"class": true,
|
||||
id: true
|
||||
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
}) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
var urls = message.urls;
|
||||
buf.push('<section class="embeds">');
|
||||
(function() {
|
||||
@ -104,12 +104,7 @@ exports.includes.call = function anonymous(locals) {
|
||||
exports.includes.contactListItem = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li class="contact"><div class="wrap"><img' + jade.attrs({
|
||||
src: contact.avatar,
|
||||
"class": "avatar"
|
||||
}, {
|
||||
src: true
|
||||
}) + '/><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 class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : 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"><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("");
|
||||
};
|
||||
@ -127,7 +122,16 @@ exports.includes.contactListItemResource = function anonymous(locals) {
|
||||
exports.includes.contactRequest = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li><div class="jid"></div><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></li>');
|
||||
buf.push('<li><div class="jid"></div><div class="response"><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></div></li>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
||||
// dayDivider.jade compiled template
|
||||
exports.includes.dayDivider = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li class="day_divider"><hr/><div class="day_divider_name">' + jade.escape((jade.interp = day_name) == null ? "" : jade.interp) + "</div></li>");
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
@ -231,7 +235,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
|
||||
}, {
|
||||
"class": true,
|
||||
id: true
|
||||
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
}) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
var urls = message.urls;
|
||||
buf.push('<section class="embeds">');
|
||||
(function() {
|
||||
@ -289,7 +293,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
|
||||
exports.includes.mucListItem = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li class="contact"><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></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><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>");
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
@ -307,13 +311,21 @@ exports.includes.mucRosterItem = function anonymous(locals) {
|
||||
exports.includes.mucWrappedMessage = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div></div><div class="messageWrapper"><div' + jade.attrs({
|
||||
buf.push('<li><div class="sender"><a href="#" class="messageAvatar"><img' + jade.attrs({
|
||||
src: "https://gravatar.com/avatar",
|
||||
alt: message.from.resource,
|
||||
"data-placement": "below"
|
||||
}, {
|
||||
src: true,
|
||||
alt: true,
|
||||
"data-placement": true
|
||||
}) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.from.resource) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
|
||||
id: "chat" + message.cid,
|
||||
"class": "message" + " " + message.classList
|
||||
}, {
|
||||
"class": true,
|
||||
id: true
|
||||
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
}) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
var urls = message.urls;
|
||||
buf.push('<section class="embeds">');
|
||||
(function() {
|
||||
@ -379,13 +391,13 @@ exports.includes.wrappedMessage = function anonymous(locals) {
|
||||
src: true,
|
||||
alt: true,
|
||||
"data-placement": true
|
||||
}) + '/></a></div><div class="messageWrapper"><div' + jade.attrs({
|
||||
}) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.sender.displayName) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
|
||||
id: "chat" + message.cid,
|
||||
"class": "message" + " " + message.classList
|
||||
}, {
|
||||
"class": true,
|
||||
id: true
|
||||
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
}) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
|
||||
var urls = message.urls;
|
||||
buf.push('<section class="embeds">');
|
||||
(function() {
|
||||
@ -470,7 +482,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><h1><span class="status"></span><span class="name"></span><button class="primary small call">Call</button><button class="secondary small remove">Remove</button></h1><div class="tzo"></div><div class="activeCall"><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></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><h1><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></h1><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></section></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
@ -479,7 +491,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"><h1><span class="name"></span><span contenteditable="true" class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><ul class="groupRoster"></ul><div class="chatBox"><form><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"><h1><span class="prefix">#</span><span class="name"></span><i class="channel_actions fa fa-chevron-down"></i><span contenteditable="true" spellcheck="false" class="status"></span></h1></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"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
||||
@ -10,26 +10,28 @@ body
|
||||
button.primary.upgrade Upgrade
|
||||
#wrapper
|
||||
aside#menu
|
||||
section#roster
|
||||
h1 Roster
|
||||
input(type="text", class="inline")#addcontact
|
||||
button.primary.small.addContact Add
|
||||
ul#contactrequests
|
||||
nav
|
||||
section#organization
|
||||
span#orga_name
|
||||
section#bookmarks
|
||||
h1 Rooms
|
||||
input(type="text", class="inline")#joinmuc
|
||||
button.primary.small.joinMUC Add
|
||||
nav
|
||||
header#me
|
||||
h1
|
||||
img.avatar
|
||||
span.name
|
||||
span.status(contenteditable="true")
|
||||
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
|
||||
header#topbar
|
||||
a(href="/", class="button secondary settings")
|
||||
svg(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(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')
|
||||
| Settings
|
||||
main#pages
|
||||
main#pages
|
||||
#footer
|
||||
#me
|
||||
div
|
||||
img.avatar
|
||||
span.name
|
||||
span.status(contenteditable="true", spellcheck="false")
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,4 @@
|
||||
.message(id='chat'+message.cid, class=message.classList)
|
||||
span.timestamp=message.formattedTime
|
||||
p.body !{message.processedBody}
|
||||
- var urls = message.urls
|
||||
section.embeds
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
li.contact
|
||||
li.contact.joined
|
||||
.wrap
|
||||
img.avatar(src=contact.avatar)
|
||||
i.remove.fa.fa-times-circle
|
||||
i.presence.fa.fa-circle
|
||||
.user
|
||||
span.name=contact.displayName
|
||||
span.idleTime=contact.idleSince
|
||||
.unread=contact.unreadCount
|
||||
.status=contact.status
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
li
|
||||
.jid
|
||||
button.primary.small.approve Approve
|
||||
button.secondary.small.deny Deny
|
||||
.response
|
||||
button.primary.small.approve Approve
|
||||
button.secondary.small.deny Deny
|
||||
|
||||
3
clientapp/templates/includes/dayDivider.jade
Normal file
3
clientapp/templates/includes/dayDivider.jade
Normal file
@ -0,0 +1,3 @@
|
||||
li.day_divider
|
||||
hr
|
||||
div.day_divider_name #{day_name}
|
||||
@ -1,5 +1,4 @@
|
||||
.message(id='chat'+message.cid, class=message.classList)
|
||||
span.timestamp=message.formattedTime
|
||||
p.body !{message.processedBody}
|
||||
- var urls = message.urls
|
||||
section.embeds
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
li.contact
|
||||
.unread=contact.unreadCount
|
||||
.name=contact.displayName
|
||||
button.primary.small.joinRoom Join
|
||||
button.secondary.small.leaveRoom Leave
|
||||
.wrap
|
||||
i.remove.fa.fa-times-circle
|
||||
i.join.fa.fa-sign-in
|
||||
span.prefix #
|
||||
.unread=contact.unreadCount
|
||||
span.name=contact.displayName
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
li
|
||||
.sender
|
||||
.name=message.from.resource
|
||||
a.messageAvatar(href='#')
|
||||
img(src="https://gravatar.com/avatar", alt=message.from.resource, data-placement="below")
|
||||
.messageWrapper
|
||||
.message_header
|
||||
.name #{message.from.resource}
|
||||
.date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
|
||||
include mucBareMessage
|
||||
|
||||
@ -3,4 +3,7 @@ li
|
||||
a.messageAvatar(href='#')
|
||||
img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
|
||||
.messageWrapper
|
||||
.message_header
|
||||
.name #{message.sender.displayName}
|
||||
.date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
|
||||
include bareMessage
|
||||
|
||||
@ -2,12 +2,14 @@ section.page.chat
|
||||
section.conversation
|
||||
header
|
||||
h1
|
||||
span.status
|
||||
span.prefix @
|
||||
span.name
|
||||
button.primary.small.call Call
|
||||
button.secondary.small.remove Remove
|
||||
i.user_presence.fa.fa-circle
|
||||
span.status
|
||||
.tzo
|
||||
.activeCall
|
||||
ul.messages.scroll-container
|
||||
.activeCall
|
||||
.container
|
||||
video.remote(autoplay)
|
||||
video.local(autoplay, muted)
|
||||
aside.button-wrap
|
||||
@ -16,7 +18,7 @@ section.page.chat
|
||||
.button-group.outlined
|
||||
button.mute Mute
|
||||
button.unmute Unmute
|
||||
ul.messages.scroll-container
|
||||
.chatBox
|
||||
form
|
||||
form.formwrap
|
||||
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||
button.primary.small.call Call
|
||||
|
||||
@ -2,13 +2,15 @@ section.page.chat
|
||||
section.group.conversation
|
||||
header.online
|
||||
h1
|
||||
span.prefix #
|
||||
span.name
|
||||
span.status(contenteditable="true")
|
||||
.controls
|
||||
button.primary.small.joinRoom Join
|
||||
button.secondary.small.leaveRoom Leave
|
||||
i.channel_actions.fa.fa-chevron-down
|
||||
span.status(contenteditable="true", spellcheck="false")
|
||||
ul.messages
|
||||
a#members_toggle
|
||||
i.fa.fa-user
|
||||
span#members_toggle_count
|
||||
ul.groupRoster
|
||||
.chatBox
|
||||
form
|
||||
form.formwrap
|
||||
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||
|
||||
@ -19,20 +19,27 @@ module.exports = HumanView.extend({
|
||||
},
|
||||
textBindings: {
|
||||
displayName: '.name',
|
||||
status: '.status',
|
||||
displayUnreadCount: '.unread'
|
||||
},
|
||||
srcBindings: {
|
||||
avatar: '.avatar'
|
||||
},
|
||||
events: {
|
||||
'click': 'handleClick'
|
||||
'click': 'handleClick',
|
||||
'click .remove': 'handleRemoveContact'
|
||||
},
|
||||
render: function () {
|
||||
this.renderAndBind({contact: this.model});
|
||||
return this;
|
||||
},
|
||||
handleClick: function () {
|
||||
app.navigate('chat/' + this.model.jid);
|
||||
if (me.contacts.get(this.model.jid)) {
|
||||
app.navigate('chat/' + this.model.jid);
|
||||
}
|
||||
},
|
||||
handleRemoveContact: function() {
|
||||
me.removeContact(this.model.jid);
|
||||
if (app.history.fragment === 'chat/' + this.model.jid) {
|
||||
app.navigate('/');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -24,9 +24,7 @@ module.exports = HumanView.extend({
|
||||
'click .embed': 'handleEmbedClick',
|
||||
'click .reconnect': 'handleReconnect',
|
||||
'click .logout': 'handleLogout',
|
||||
'click .addContact': 'handleAddContact',
|
||||
'keydown #addcontact': 'keyDownAddContact',
|
||||
'click .joinMUC': 'handleJoinMUC',
|
||||
'keydown #joinmuc': 'keyDownJoinMUC',
|
||||
'blur #me .status': 'handleStatusChange',
|
||||
'keydown .status': 'keyDownStatus'
|
||||
@ -47,7 +45,8 @@ module.exports = HumanView.extend({
|
||||
this.registerBindings(me, {
|
||||
textBindings: {
|
||||
displayName: '#me .name',
|
||||
status: '#me .status'
|
||||
status: '#me .status',
|
||||
organization: '#organization #orga_name',
|
||||
},
|
||||
srcBindings: {
|
||||
avatar: '#me .avatar'
|
||||
|
||||
@ -20,8 +20,8 @@ module.exports = HumanView.extend({
|
||||
},
|
||||
events: {
|
||||
'click .name': 'handleClick',
|
||||
'click .joinRoom': 'handleJoinRoom',
|
||||
'click .leaveRoom': 'handleLeaveRoom'
|
||||
'click .join': 'handleJoinRoom',
|
||||
'click .remove': 'handleLeaveRoom'
|
||||
},
|
||||
render: function () {
|
||||
this.renderAndBind({contact: this.model});
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"secret": "shhhhhh don't tell anyone ok?"
|
||||
},
|
||||
"server": {
|
||||
"name": "Otalk",
|
||||
"domain": "localhost",
|
||||
"wss": "wss://localhost:5281/xmpp-websocket/",
|
||||
"muc": "chat.localhost",
|
||||
|
||||
@ -38,9 +38,9 @@ borderbox()
|
||||
// avatars
|
||||
|
||||
avatar()
|
||||
width: 30px
|
||||
height: 30px
|
||||
roundall(50px)
|
||||
width: 36px
|
||||
height: 36px
|
||||
roundall(0.2rem)
|
||||
|
||||
// this if for the content flash and hardware acceleration bugs in webkit
|
||||
webkit-transition-fix()
|
||||
|
||||
@ -25,9 +25,10 @@ $pink-lighter = #fce8f1
|
||||
|
||||
// Greens
|
||||
|
||||
$green = #43bb6e
|
||||
$green = #4C9689
|
||||
$green-light = lighten($green, 70%)
|
||||
$green-lighter = lighten($green, 94%)
|
||||
$green-lighterer = #B2D5C9
|
||||
|
||||
// Reds
|
||||
|
||||
@ -41,13 +42,69 @@ $orange = #f18902
|
||||
$orange-light = lighten($orange, 50%)
|
||||
$orange-lighter = lighten($orange, 85%)
|
||||
|
||||
// Brown
|
||||
|
||||
$brown = #4D394B
|
||||
$brown-light = #AB9BA9
|
||||
$brown-lighter = lighten($brown, 20%)
|
||||
$brown-dark = #3E313C
|
||||
$brown-darker = #372C36
|
||||
$brown-darkerer = #625361
|
||||
|
||||
// Gray
|
||||
|
||||
$gray-dark = #555459
|
||||
$gray = #9E9EA6
|
||||
$gray-light = #BABBBF
|
||||
$gray-lighter = #E0E0E0
|
||||
|
||||
// Black
|
||||
|
||||
$black = #3D3C40
|
||||
|
||||
|
||||
// Style
|
||||
|
||||
$sidebarTopAndBottomBg = #1A233F
|
||||
$sidebarOrgaName = #fff
|
||||
$sidebarBorder = #121A33
|
||||
$sidebarBg = #3D486B
|
||||
$sidebarText = #ABB6DA
|
||||
|
||||
$sidebarNames = #C1DCEC
|
||||
|
||||
$sidebarInputBg = $sidebarBg
|
||||
$sidebarInputBorder = #626F9C
|
||||
$sidebarInputText = $sidebarNames
|
||||
|
||||
$sidebarSelectionBg = #94B021
|
||||
$sidebarSelectionText = #fff
|
||||
|
||||
$sidebarUnreadBg = $sidebarSelectionBg
|
||||
$sidebarUnreadText = $sidebarSelectionText
|
||||
|
||||
$sidebarHover = $sidebarTopAndBottomBg
|
||||
|
||||
$sidebarRequestBg = $sidebarHover
|
||||
$sidebarRequestBorder = $sidebarHover
|
||||
|
||||
$sidebarStatusText = $sidebarNames
|
||||
$sidebarStatusBorder = $sidebarInputBorder
|
||||
|
||||
$settingsBg = #fff
|
||||
$settingsText = $sidebarBg
|
||||
$settingsHoverBg = $sidebarBg
|
||||
$settingsHoverText = #fff
|
||||
|
||||
// Font families
|
||||
|
||||
$font-family-lato = 'Lato', sans-serif
|
||||
$font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
|
||||
|
||||
// Font sizes
|
||||
|
||||
$font-size-large = 16px
|
||||
$font-size-large = 17px
|
||||
$font-size-message = 15px
|
||||
$font-size-base = 14px
|
||||
$font-size-small = 12px
|
||||
$font-size-smaller = 10px
|
||||
@ -60,4 +117,6 @@ $font-size-h4 = 12px
|
||||
$line-height-base = 18px
|
||||
$line-height-headings = 26px
|
||||
|
||||
$font-weight-bold = 800
|
||||
$font-weight-classic = 500
|
||||
$font-weight-bold = 700
|
||||
$font-weight-bolder = 900
|
||||
|
||||
@ -8,7 +8,6 @@ button
|
||||
|
||||
.button, button
|
||||
display: inline-block
|
||||
border-radius: 3px
|
||||
padding: 0 15px
|
||||
height: 35px
|
||||
background: $gray-lighter
|
||||
@ -16,7 +15,9 @@ button
|
||||
font-weight: $font-weight-bold
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
color: $gray-light
|
||||
color: $gray
|
||||
border: 1px solid $gray-light
|
||||
border-radius: 3px
|
||||
text-overflow: ellipsis
|
||||
vertical-align: middle
|
||||
user-select()
|
||||
@ -49,22 +50,22 @@ button
|
||||
color: white
|
||||
|
||||
&.primary
|
||||
background: $pink
|
||||
background: $green
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background: darken($pink, 10%)
|
||||
background: darken($green, 10%)
|
||||
|
||||
&:disabled
|
||||
background: $pink-light
|
||||
background: $green-light
|
||||
|
||||
&.secondary
|
||||
background: $blue
|
||||
background: $red
|
||||
|
||||
&:disabled
|
||||
background: $blue-light
|
||||
background: $red-light
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background: darken($blue, 10%)
|
||||
background: darken($red, 10%)
|
||||
|
||||
.button-group
|
||||
|
||||
@ -86,7 +87,7 @@ button
|
||||
border-radius: 3px
|
||||
|
||||
button, .button
|
||||
border: 1px solid lighten($gray-light, 70%)
|
||||
border: 1px solid $gray-light
|
||||
|
||||
&.primary
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ input[type=text], input[type=email], input[type=password], input[type=search], i
|
||||
display: inline-block
|
||||
width: auto
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=search],
|
||||
input[type=text], input[type=email], input[type=password], input[type=search],
|
||||
input[type=date], input[type=url], input[type=file], textarea, select, input[type=checkbox], input[type=radio]
|
||||
|
||||
&:disabled
|
||||
@ -49,10 +49,6 @@ input[type=text], input[type=email], input[type=password], input[type=search], i
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border: 1px solid $blue-light
|
||||
box-shadow: 0 0 5px $blue-light
|
||||
transition: all .3s ease-in
|
||||
-webkit-transition: all .3s ease-in
|
||||
|
||||
&:disabled
|
||||
background: lighten($gray-lighter, 60%)
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
@import '../_variables'
|
||||
@import '../_mixins'
|
||||
|
||||
html
|
||||
font-size: 100%
|
||||
|
||||
body
|
||||
background: white
|
||||
color: $gray
|
||||
font-family: $font-family-gotham
|
||||
font-family: $font-family-lato
|
||||
font-size: $font-size-base
|
||||
font-weight: 400
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
h1, h2, h3, h4
|
||||
color: darken($gray, 30%)
|
||||
|
||||
h4
|
||||
margin-top: 0
|
||||
font-size: $font-size-h4
|
||||
@ -28,6 +27,6 @@ a
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 0px
|
||||
left: 270px
|
||||
left: 220px
|
||||
height: 100%
|
||||
borderbox()
|
||||
|
||||
1121
public/css/otalk.css
1121
public/css/otalk.css
File diff suppressed because it is too large
Load Diff
@ -14,3 +14,4 @@
|
||||
@import 'pages/aux'
|
||||
@import 'pages/callbar'
|
||||
@import 'pages/header'
|
||||
@import 'pages/footer'
|
||||
|
||||
@ -14,75 +14,13 @@
|
||||
|
||||
header
|
||||
padding: 0px
|
||||
padding-left: 6px
|
||||
border-bottom: 1px solid darken($gray-lighter, 10%)
|
||||
position: fixed
|
||||
top: 40px
|
||||
top: 0px
|
||||
right: 0px
|
||||
left: 270px
|
||||
z-index: 10
|
||||
borderbox()
|
||||
background: lighten($gray-light, 93%)
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 5px
|
||||
top: 18px
|
||||
height: 4px
|
||||
width: 4px
|
||||
margin-top: -3px
|
||||
border: 1px solid transparent
|
||||
roundall(10px)
|
||||
|
||||
&.online,
|
||||
&.chat
|
||||
&:before
|
||||
background: $green
|
||||
border-color: $green
|
||||
|
||||
&.dnd:before
|
||||
background: $red
|
||||
border-color: $red
|
||||
|
||||
&.away:before,
|
||||
&.xa:before
|
||||
background: $orange
|
||||
border-color: $orange
|
||||
|
||||
&.offline:before
|
||||
background: $gray-dark
|
||||
|
||||
&.composing:before
|
||||
animation: pulsate 1.5s infinite ease-in
|
||||
-webkit-animation: pulsate 1.5s infinite ease-in
|
||||
-moz-animation: pulsate 1.5s infinite ease-in
|
||||
|
||||
&.paused:before
|
||||
background: lighten($gray-light, 30%)
|
||||
border-color: lighten($gray-light, 30%)
|
||||
|
||||
&.idle:before
|
||||
background: transparent
|
||||
|
||||
.controls
|
||||
float: right
|
||||
|
||||
.leaveRoom
|
||||
display: none
|
||||
|
||||
.joinRoom
|
||||
display: block
|
||||
|
||||
button
|
||||
margin-top: 5px
|
||||
|
||||
&.joined
|
||||
.joinRoom
|
||||
display: none
|
||||
|
||||
.leaveRoom
|
||||
display: block
|
||||
left: 220px
|
||||
right: 90px
|
||||
height: 55px
|
||||
z-index: 101
|
||||
|
||||
.avatar
|
||||
margin-right: 5px
|
||||
@ -93,48 +31,100 @@
|
||||
vertical-align: top
|
||||
|
||||
h1
|
||||
font-size: 12px
|
||||
margin: 5px
|
||||
margin-left: 10px
|
||||
padding: 0px
|
||||
margin: 0px
|
||||
top: 0px
|
||||
white-space: nowrap
|
||||
max-width: 80%
|
||||
display: inline-block
|
||||
height: 25px
|
||||
line-height: 25px
|
||||
height: 53px
|
||||
|
||||
&:hover .prefix
|
||||
color: $gray-dark
|
||||
|
||||
.prefix, .name, .user_presence, .channel_actions, .status
|
||||
display: inline-block
|
||||
color: $gray-dark
|
||||
padding: 0px
|
||||
text-rendering: optimizelegibility
|
||||
top: 0px
|
||||
vertical-align: middle
|
||||
|
||||
.prefix
|
||||
color: $gray
|
||||
font-size: $font-size-h2
|
||||
font-weight: $font-weight-classic
|
||||
margin-left: 25px
|
||||
line-height: 53px
|
||||
cursor: pointer
|
||||
|
||||
.name
|
||||
font-size: 12px
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
display: inline-block
|
||||
font-size: $font-size-h2
|
||||
font-weight: $font-weight-bolder
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
padding-left: 3px
|
||||
line-height: 53px
|
||||
cursor: pointer
|
||||
|
||||
.user_presence, .channel_actions
|
||||
font-size: $font-size-small
|
||||
color: $gray
|
||||
padding-left: 8px
|
||||
line-height: 53px
|
||||
cursor: pointer
|
||||
|
||||
.user_presence
|
||||
padding-top: 5px
|
||||
|
||||
&.online
|
||||
color: $green
|
||||
opacity: 1
|
||||
|
||||
&.offline
|
||||
color: $gray-dark
|
||||
opacity: 0.5
|
||||
|
||||
&.dnd
|
||||
color: $red
|
||||
|
||||
&.away, &.xa
|
||||
color: $orange
|
||||
|
||||
&.composing
|
||||
animation: pulsate 1.5s infinite ease-in
|
||||
-webkit-animation: pulsate 1.5s infinite ease-in
|
||||
-moz-animation: pulsate 1.5s infinite ease-in
|
||||
|
||||
&.paused:before
|
||||
color: lighten($gray-dark, 30%)
|
||||
|
||||
&.idle:before
|
||||
background: transparent
|
||||
|
||||
.channel_actions
|
||||
opacity: 1
|
||||
|
||||
.status
|
||||
font-weight: normal
|
||||
font-size: 12px
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
max-width: 80%
|
||||
padding-left: 5px
|
||||
color: $gray
|
||||
font-weight: $font-weight-classic
|
||||
font-size: $font-size-h3
|
||||
line-height: 18px
|
||||
margin-left: 15px
|
||||
padding-top: 5px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
transition: all .25s
|
||||
display: inline-block
|
||||
allowselect()
|
||||
|
||||
&:empty:before
|
||||
content: '- No subject'
|
||||
content: ''
|
||||
|
||||
&:not(:empty):before
|
||||
content: '- '
|
||||
|
||||
&:before,
|
||||
&:empty:focus:before
|
||||
content: '-'
|
||||
padding-left: 5px
|
||||
padding-right: 5px
|
||||
&:focus
|
||||
border-radius: 0.25rem
|
||||
border: 1px solid $gray
|
||||
padding: 5px
|
||||
outline: none
|
||||
|
||||
.tzo:not(:empty)
|
||||
position: absolute
|
||||
@ -155,62 +145,158 @@
|
||||
content: 'Current Time: '
|
||||
font-weight: bold
|
||||
|
||||
.call, .remove
|
||||
display: inline-block
|
||||
margin-top: -17px
|
||||
margin-left: 10px
|
||||
|
||||
.activeCall
|
||||
transition(height 250ms)
|
||||
height: 0px
|
||||
position: relative
|
||||
.call
|
||||
display: block
|
||||
width: 50px
|
||||
height: 38px
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 11px
|
||||
|
||||
.remote
|
||||
position: absolute
|
||||
top: 60px
|
||||
left: 10px
|
||||
height: 50%
|
||||
|
||||
.local
|
||||
position: absolute
|
||||
bottom: 10px
|
||||
right: 10px
|
||||
height: 20%
|
||||
border: 2px solid $gray-lighter
|
||||
transform(scaleX(-1))
|
||||
|
||||
.button-wrap
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
|
||||
.button-group
|
||||
margin-left: 5px
|
||||
|
||||
// while on video call the parent has
|
||||
// this class so we animate the height
|
||||
.activeCall
|
||||
display: none
|
||||
transition(height 250ms)
|
||||
height: 0px
|
||||
position: absolute
|
||||
bottom: 4rem
|
||||
width: 100%
|
||||
min-width: 610px
|
||||
box-sizing: border-box
|
||||
padding: 0px 73px 0px 24px
|
||||
|
||||
.container
|
||||
width: 100%
|
||||
height: 100%
|
||||
border: 1px solid $gray-lighter
|
||||
border-bottom: none
|
||||
border-radius: 0.2rem 0.2rem 0 0
|
||||
background-color: $gray-lighter
|
||||
|
||||
.remote
|
||||
position: absolute
|
||||
top: 20px
|
||||
left: 40px
|
||||
height: 65%
|
||||
border: 2px solid $gray-light
|
||||
|
||||
.local
|
||||
position: absolute
|
||||
bottom: 10px
|
||||
right: 80px
|
||||
height: 20%
|
||||
border: 2px solid $gray-light
|
||||
transform(scaleX(-1))
|
||||
|
||||
.button-wrap
|
||||
position: absolute
|
||||
left: 118px
|
||||
bottom: 26px
|
||||
|
||||
.button-group
|
||||
margin-left: 5px
|
||||
&.onCall
|
||||
.activeCall
|
||||
display: block
|
||||
height: 400px
|
||||
height: 20rem
|
||||
.messages
|
||||
bottom: 24rem
|
||||
|
||||
.chatBox
|
||||
background-color: #fff
|
||||
bottom: 0px
|
||||
position: fixed
|
||||
right: 0px
|
||||
left: 221px
|
||||
height: 4rem
|
||||
z-index: 302
|
||||
transition: none
|
||||
-webkit-transition: none
|
||||
|
||||
.formwrap
|
||||
transition: none
|
||||
-webkit-transition: none
|
||||
position: relative
|
||||
height:38px
|
||||
left: 24px
|
||||
margin-right: 93px
|
||||
|
||||
textarea
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
background: none repeat scroll 0% 0% padding-box #fff
|
||||
font-size: $font-size-base
|
||||
border-width: 2px
|
||||
border-style: solid
|
||||
border-color: $gray-lighter
|
||||
border-image: none
|
||||
border-radius: 0px 0.2rem 0.2rem 0px
|
||||
font-family: "Lato",sans-serif
|
||||
margin: 0
|
||||
color: #3D3C40
|
||||
overflow-y: hidden
|
||||
box-shadow: none
|
||||
outline: 0px none
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
height: 38px
|
||||
padding: 9px 5px 9px 8px
|
||||
max-height: 10rem
|
||||
resize: none !important
|
||||
|
||||
&.editing
|
||||
background-color: #fffcea
|
||||
border: 1px solid #efe391
|
||||
color: #d2bd2d
|
||||
&:focus
|
||||
box-shadow: none
|
||||
|
||||
.messages
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
padding: 0px 1.5rem
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 0px
|
||||
bottom: 55px
|
||||
margin-top: 75px
|
||||
bottom: 4rem
|
||||
margin-top: 54px
|
||||
width: 100%
|
||||
borderbox()
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
li.day_divider
|
||||
display: block
|
||||
background: none repeat scroll 0% 0% #fff
|
||||
font-size: 1rem
|
||||
color: #555459
|
||||
font-weight: 900
|
||||
text-align: center
|
||||
cursor: default
|
||||
clear: both
|
||||
position: relative
|
||||
line-height: 1.2rem
|
||||
margin: 1.5rem 0px
|
||||
padding: 0
|
||||
min-height: 0
|
||||
|
||||
hr
|
||||
position: absolute
|
||||
width: 100%
|
||||
top: 0.6rem
|
||||
margin: 0px
|
||||
border-width: 1px 0px 0px 0px
|
||||
border-style: solid none
|
||||
border-color: #ddd
|
||||
|
||||
.day_divider_name
|
||||
background: none repeat scroll 0% 0% #fff
|
||||
text-transform: capitalize
|
||||
text-align: center
|
||||
padding: 0px 1rem
|
||||
display: inline-block
|
||||
margin: 0px auto
|
||||
position: relative
|
||||
|
||||
li
|
||||
position: relative
|
||||
list-style: none
|
||||
@ -218,8 +304,6 @@
|
||||
width: 100%
|
||||
min-height: 50px
|
||||
display: table
|
||||
borderbox()
|
||||
border-bottom: 1px solid $gray-lighter
|
||||
display: table-row
|
||||
|
||||
&:last-of-type
|
||||
@ -227,6 +311,7 @@
|
||||
|
||||
.messageAvatar
|
||||
display: inline-block
|
||||
outline: none
|
||||
|
||||
img
|
||||
avatar()
|
||||
@ -247,15 +332,13 @@
|
||||
box-shadow: rgba(0, 0, 0, .25) 0 2px 3px
|
||||
|
||||
.sender
|
||||
display: table-cell
|
||||
font-size: 12px
|
||||
font-weight: bold
|
||||
color: $gray
|
||||
padding: 5px
|
||||
text-align: right
|
||||
border-top: 1px solid #eee
|
||||
white-space: nowrap
|
||||
vertical-align: middle
|
||||
vertical-align: top
|
||||
margin-top: 5px
|
||||
|
||||
.name
|
||||
padding-left: 10px
|
||||
@ -263,16 +346,36 @@
|
||||
|
||||
.messageWrapper
|
||||
display: table-cell
|
||||
padding: 5px
|
||||
border-top: 1px solid #eee
|
||||
padding: 0px 0px 12px 15px
|
||||
width: 99%
|
||||
vertical-align: middle
|
||||
vertical-align: top
|
||||
|
||||
.message_header
|
||||
|
||||
.name
|
||||
display: inline-block
|
||||
font-weight: $font-weight-bolder
|
||||
font-size: $font-size-message
|
||||
color: $black
|
||||
line-height: 22px
|
||||
cursor: pointer
|
||||
|
||||
.date
|
||||
display: inline-block
|
||||
margin-left: 0.25rem
|
||||
color: $gray-light
|
||||
font-size: $font-size-small
|
||||
width: 60px
|
||||
line-height: 22px
|
||||
text-transform: uppercase
|
||||
cursor: pointer
|
||||
|
||||
.message
|
||||
font-size: $font-size-small
|
||||
margin: 2px
|
||||
font-size: $font-size-message
|
||||
line-height: 22px
|
||||
color: $black
|
||||
margin: 0px 0px 2px 0px
|
||||
display: inline-block
|
||||
padding-right: 3px
|
||||
min-width: 20px
|
||||
width: 100%
|
||||
borderbox()
|
||||
@ -280,28 +383,6 @@
|
||||
&:not(.mine)
|
||||
color: $gray-dark
|
||||
|
||||
&.mine
|
||||
.timestamp
|
||||
color: darken($gray-lighter, 20%)
|
||||
|
||||
&.mine.pendingReceipt:not(.delayed)
|
||||
.timestamp:after
|
||||
content: '\26A0'
|
||||
color: $orange
|
||||
|
||||
&.delayed
|
||||
.timestamp:before
|
||||
content: '@ '
|
||||
|
||||
&.edited
|
||||
.timestamp:before
|
||||
content: 'edited '
|
||||
|
||||
&.mine.delivered
|
||||
.timestamp:after
|
||||
content: '\2713' !important
|
||||
color: $green !important
|
||||
|
||||
&.pending
|
||||
color: lighten($gray, 50%)
|
||||
|
||||
@ -349,42 +430,28 @@
|
||||
.sender
|
||||
display: block
|
||||
|
||||
.chatBox
|
||||
borderbox()
|
||||
bottom: 0px
|
||||
position: fixed
|
||||
right: 0px
|
||||
left: 270px
|
||||
z-index: 200
|
||||
transition: none
|
||||
-webkit-transition: none
|
||||
|
||||
form
|
||||
border-top: 1px solid #eee
|
||||
background: lighten($gray-light, 93%)
|
||||
padding: 11px
|
||||
transition: none
|
||||
-webkit-transition: none
|
||||
|
||||
.formwrap
|
||||
borderbox()
|
||||
width: 100%
|
||||
padding-right: 80px
|
||||
position: relative
|
||||
|
||||
textarea
|
||||
height: 30px
|
||||
padding: 6px 10px
|
||||
transition: none
|
||||
-webkit-transition: none
|
||||
|
||||
&.editing
|
||||
background-color: #fffcea
|
||||
border: 1px solid #efe391
|
||||
color: #d2bd2d
|
||||
|
||||
|
||||
.group.conversation
|
||||
h1
|
||||
.status
|
||||
&:empty:before
|
||||
content: 'No subject'
|
||||
|
||||
.chatBox .formwrap
|
||||
margin-right: 35px
|
||||
|
||||
#members_toggle
|
||||
position: absolute
|
||||
top: 60px
|
||||
right: 20px
|
||||
cursor: pointer
|
||||
color: $gray
|
||||
font-size: $font-size-h3
|
||||
|
||||
&:hover
|
||||
color: #439FE0
|
||||
|
||||
#members_toggle_count
|
||||
margin-left: 5px
|
||||
|
||||
.groupRoster
|
||||
width: 150px
|
||||
@ -393,34 +460,46 @@
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 0px
|
||||
bottom: 50px
|
||||
padding-top: 80px
|
||||
padding-bottom: 10px
|
||||
top: 80px
|
||||
right: 20px
|
||||
borderbox()
|
||||
box-shadow: 0px 2px 10px rgba(64, 54, 63, 0.25)
|
||||
-webkit-overflow-scrolling: touch
|
||||
background: lighten($gray, 95%)
|
||||
border-left: 1px solid #eee
|
||||
border: 1px solid #ddd
|
||||
border-radius: 0.25rem
|
||||
background-color: #fff
|
||||
z-index: 100
|
||||
visibility: hidden
|
||||
padding: 5px 30px 5px 5px
|
||||
|
||||
li
|
||||
padding: 3px
|
||||
margin: 0px
|
||||
font-size: 12px
|
||||
border-radius: 0.25rem
|
||||
position: relative
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: #439FE0
|
||||
|
||||
.name
|
||||
color: #fff
|
||||
|
||||
.name
|
||||
padding-left: 10px
|
||||
padding-left: 14px
|
||||
color: $gray
|
||||
font-size: 14px
|
||||
font-weight: bold
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 4px
|
||||
top: 11px
|
||||
top: 12px
|
||||
height: 4px
|
||||
width: 4px
|
||||
margin-top: -3px
|
||||
border: 1px solid transparent
|
||||
border: 2px solid transparent
|
||||
roundall(10px)
|
||||
|
||||
&.online,
|
||||
@ -428,6 +507,11 @@
|
||||
&:before
|
||||
background: $green
|
||||
border-color: $green
|
||||
&:not(:hover) .name
|
||||
color: $gray-dark
|
||||
|
||||
&:not(:hover).active .name
|
||||
color $red
|
||||
|
||||
&.dnd:before
|
||||
background: $red
|
||||
|
||||
63
public/css/pages/footer.styl
Normal file
63
public/css/pages/footer.styl
Normal file
@ -0,0 +1,63 @@
|
||||
@import '../_variables'
|
||||
@import '../_mixins'
|
||||
|
||||
#footer
|
||||
bottom: 0px
|
||||
left: 0px
|
||||
background-color: $sidebarTopAndBottomBg
|
||||
width:100%
|
||||
height: 4rem;
|
||||
position: fixed
|
||||
z-index: 301
|
||||
|
||||
#me
|
||||
border-top: 2px solid $sidebarBorder
|
||||
padding: 7px 0px 9px 8px;
|
||||
|
||||
.avatar
|
||||
float:left
|
||||
width: 48px
|
||||
height: 48px
|
||||
background: rgba(0,0,0,0)
|
||||
background-color: transparent
|
||||
vertical-align: middle
|
||||
margin: 0px 0.5rem 0px 0px;
|
||||
|
||||
.name,
|
||||
.status
|
||||
display: block
|
||||
width: 145px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.name
|
||||
color: #fff
|
||||
font-size: $font-size-large
|
||||
font-weight: $font-weight-bolder
|
||||
|
||||
.status
|
||||
color: $sidebarStatusText
|
||||
font-weight: normal
|
||||
font-size: $font-size-base
|
||||
line-height: $font-size-base
|
||||
border-width: 0px
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
line-height: 18px
|
||||
height: 18px
|
||||
white-space: nowrap
|
||||
transition: all .25s
|
||||
allowselect()
|
||||
|
||||
&:focus
|
||||
border-radius: 0.25rem
|
||||
border: 1px solid $sidebarStatusBorder
|
||||
outline: none
|
||||
padding: 2px
|
||||
|
||||
&:empty:before
|
||||
content: 'Update your status'
|
||||
|
||||
&:before,
|
||||
&:empty:focus:before
|
||||
content: ''
|
||||
@ -1,68 +1,17 @@
|
||||
@import '../_variables'
|
||||
@import '../_mixins'
|
||||
|
||||
#me
|
||||
#topbar
|
||||
position: fixed
|
||||
left: 270px
|
||||
left: 220px
|
||||
top: 0px
|
||||
height: 40px
|
||||
height: 54px
|
||||
width: 100%
|
||||
background-color: #fff
|
||||
border-bottom: 1px solid darken($gray-lighter, 10%)
|
||||
z-index: 100
|
||||
noselect()
|
||||
color: #fff
|
||||
|
||||
.avatar
|
||||
width: 30px
|
||||
height: 30px
|
||||
vertical-align: middle
|
||||
margin-right: 5px
|
||||
roundall(15px)
|
||||
|
||||
h1
|
||||
font-size: 13px
|
||||
line-height: 12px
|
||||
margin: 5px
|
||||
padding: 0px
|
||||
white-space: nowrap
|
||||
max-width: 75%
|
||||
|
||||
.status
|
||||
font-weight: normal
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
border-width: 0px
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
line-height: 20px
|
||||
height: 20px
|
||||
max-width: 75%
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
transition: all .25s
|
||||
allowselect()
|
||||
|
||||
&:empty:before
|
||||
content: '- Update your status'
|
||||
|
||||
&:before,
|
||||
&:empty:focus:before
|
||||
content: '-'
|
||||
padding-left: 5px
|
||||
padding-right: 5px
|
||||
|
||||
&:empty
|
||||
font-style: italic
|
||||
|
||||
.name,
|
||||
.status
|
||||
&:focus
|
||||
background-color: #fffcea
|
||||
border: 1px solid #efe391
|
||||
color: #d2bd2d
|
||||
|
||||
.settings
|
||||
position: fixed
|
||||
padding-left: 30px
|
||||
@ -70,9 +19,10 @@
|
||||
height: 30px
|
||||
right: 5px
|
||||
top: 5px
|
||||
background-color: #fff
|
||||
color: #12acef
|
||||
background-color: $settingsBg
|
||||
color: $settingsText
|
||||
transition: none
|
||||
border: 0
|
||||
|
||||
svg
|
||||
position: absolute
|
||||
@ -80,11 +30,11 @@
|
||||
left: 5px
|
||||
margin: 0px
|
||||
margin-top: -13px
|
||||
fill: #12acef
|
||||
fill: $settingsText
|
||||
|
||||
&:hover
|
||||
background-color: #12acef
|
||||
color: #fff
|
||||
background-color: $settingsHoverBg
|
||||
color: $settingsHoverText
|
||||
|
||||
svg
|
||||
fill: #fff
|
||||
|
||||
@ -6,15 +6,31 @@
|
||||
top: 0px
|
||||
bottom: 0px
|
||||
left: 0px
|
||||
width: 270px
|
||||
background-color: $blue-saturated-darker
|
||||
border-right: 1px solid $gray-lighter
|
||||
width: 220px
|
||||
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
|
||||
height: 53px
|
||||
background-color: $sidebarTopAndBottomBg
|
||||
border-bottom: 2px solid $sidebarBorder
|
||||
margin-bottom: 10px
|
||||
|
||||
#orga_name
|
||||
color: $sidebarOrgaName
|
||||
font-size: $font-size-large
|
||||
font-weight: $font-weight-bolder
|
||||
line-height: 53px;
|
||||
vertical-align: middle
|
||||
margin-left: 20px
|
||||
|
||||
.main
|
||||
margin: 10px 0 0 0
|
||||
text-align: center
|
||||
@ -37,19 +53,32 @@
|
||||
position: relative
|
||||
|
||||
h1
|
||||
font-size: $font-size-small
|
||||
font-size: $font-size-base
|
||||
margin: 0
|
||||
padding: 20px 10px
|
||||
color: white
|
||||
padding: 4px 20px
|
||||
text-transform: uppercase
|
||||
|
||||
#roster,
|
||||
#bookmarks
|
||||
margin-right: 20px
|
||||
margin-bottom: 25px
|
||||
|
||||
#contactrequests
|
||||
margin: 0px
|
||||
padding-left: 0px
|
||||
background: $blue-saturated
|
||||
|
||||
li
|
||||
width: 180px
|
||||
height: 68px
|
||||
margin-left: 20px
|
||||
margin-bottom: 10px
|
||||
padding-bottom: 4px
|
||||
background: $sidebarRequestBg
|
||||
border-radius: 0.25rem
|
||||
border: 2px solid $sidebarRequestBorder
|
||||
|
||||
.response
|
||||
text-align: center
|
||||
|
||||
.jid
|
||||
display: inline-block
|
||||
@ -62,79 +91,88 @@
|
||||
|
||||
#addcontact,
|
||||
#joinmuc
|
||||
margin: 0px 10px 5px 10px
|
||||
margin: 8px 20px 5px 20px
|
||||
padding: 0px 10px
|
||||
width: 178px
|
||||
height: 25px
|
||||
font-size: $font-size-small
|
||||
background-color: $sidebarInputBg
|
||||
border-radius: 0.25rem
|
||||
border: 1px solid $sidebarInputBorder
|
||||
color: $sidebarInputText
|
||||
|
||||
li
|
||||
list-style-type: none
|
||||
padding: 7px 10px 7px 10px
|
||||
padding: 4px 10px
|
||||
margin: 0px
|
||||
border-radius: 0px 0.25rem 0.25rem 0px;
|
||||
position: relative
|
||||
min-height: 40px
|
||||
font-size: $font-size-small
|
||||
color: #fff
|
||||
height: 25px
|
||||
font-size: $font-size-base
|
||||
cursor: pointer
|
||||
transition: all .3s ease-in 0
|
||||
-webkit-transition: all .3s ease-in 0
|
||||
-moz-transition: all .3s ease-in 0
|
||||
width: 100%
|
||||
borderbox()
|
||||
|
||||
.wrap
|
||||
vertical-align: middle
|
||||
padding-left: 40px
|
||||
color: $sidebarNames
|
||||
|
||||
&:hover
|
||||
background: $blue-saturated
|
||||
background: $sidebarHover
|
||||
|
||||
&.online, &.chat, &.dnd, &.away, &.xa
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 50%
|
||||
right: 15px
|
||||
height: 6px
|
||||
width: 6px
|
||||
margin-top: -4px
|
||||
border: 1px solid transparent
|
||||
roundall(10px)
|
||||
&.joined
|
||||
&:hover:not(.hasUnread) .remove
|
||||
visibility: visible
|
||||
|
||||
&.online,
|
||||
&.chat
|
||||
&:after
|
||||
background: $green
|
||||
border-color: $green
|
||||
&:not(.joined)
|
||||
&:hover:not(.hasUnread) .join
|
||||
visibility: visible
|
||||
|
||||
&.dnd
|
||||
&:after
|
||||
background: $red
|
||||
border-color: $red
|
||||
&.hasUnread, &.hasUnread .prefix
|
||||
font-weight: $font-weight-bolder
|
||||
color: #fff
|
||||
|
||||
&.away,
|
||||
&.xa
|
||||
&:after
|
||||
background: $orange
|
||||
border-color: $orange
|
||||
&:not(.activeContact).offline,
|
||||
&:not(.activeContact).chat
|
||||
.presence
|
||||
color: $brown-light
|
||||
|
||||
&.offline:not(:hover)
|
||||
.name
|
||||
color: darken($gray-light, 40%)
|
||||
&:not(.activeContact).dnd
|
||||
.presence
|
||||
color: $red
|
||||
opacity: 1
|
||||
|
||||
.status
|
||||
color: darken($gray-light, 65%)
|
||||
|
||||
img
|
||||
opacity: .25
|
||||
&:not(.activeContact).away,
|
||||
&:not(.activeContact).xa
|
||||
.presence
|
||||
color: $orange
|
||||
opacity: 1
|
||||
|
||||
&.activeContact, &.offline.activeContact
|
||||
background: white
|
||||
font-weight: $font-weight-bold
|
||||
|
||||
background: $sidebarSelectionBg
|
||||
.prefix
|
||||
color: $green-lighterer
|
||||
opacity: 1
|
||||
&:not(.dnd):not(.away):not(.online) .presence
|
||||
color: $brown-darkerer
|
||||
opacity: 1
|
||||
.remove, .join
|
||||
color: #fff
|
||||
.name
|
||||
color: $gray
|
||||
color: #fff
|
||||
|
||||
&:not(.activeContact).online
|
||||
.presence
|
||||
color: $green
|
||||
opacity: 1
|
||||
|
||||
&.online, &.dnd, &.away
|
||||
.name
|
||||
font-style : normal
|
||||
|
||||
&.activeContact
|
||||
&.online .presence,
|
||||
&.dnd .presence,
|
||||
&.away .presence
|
||||
color: #fff
|
||||
opacity: 1
|
||||
|
||||
&.composing
|
||||
&:after
|
||||
@ -154,34 +192,30 @@
|
||||
background: transparent
|
||||
|
||||
.name
|
||||
color: $gray-light
|
||||
color: $sidebarNames
|
||||
max-width: 60%
|
||||
|
||||
.user
|
||||
width: 95%
|
||||
|
||||
img
|
||||
opacity: 1
|
||||
|
||||
.avatar
|
||||
vertical-align: top
|
||||
margin-right: 5px
|
||||
margin-top: -15px
|
||||
position: absolute
|
||||
left: 10px
|
||||
top: 20px
|
||||
avatar()
|
||||
noselect()
|
||||
.presence
|
||||
font-size: 10px
|
||||
display: inline-block
|
||||
margin-top: -10px
|
||||
vertical-align: middle
|
||||
opacity: 0.5
|
||||
|
||||
.user
|
||||
color: white
|
||||
width: 100%
|
||||
display: inline-block
|
||||
width: 120px
|
||||
line-height: 100%
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
height: $font-size-base+3
|
||||
font-style: italic
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
|
||||
|
||||
.status
|
||||
color: $gray-light
|
||||
font-size: $font-size-small
|
||||
font-weight: 400
|
||||
line-height: 12px
|
||||
@ -191,35 +225,53 @@
|
||||
display: inline-block
|
||||
margin-left: 5px
|
||||
font-size: $font-size-small
|
||||
color: darken($gray-light, 50%)
|
||||
color: darken($brown-light, 50%)
|
||||
|
||||
.name
|
||||
display: inline-block
|
||||
text-overflow: ellipsis
|
||||
width: 100%
|
||||
line-height: 100%
|
||||
overflow: hidden
|
||||
|
||||
&.persistent
|
||||
.name
|
||||
color: red
|
||||
text-overflow: ellipsis
|
||||
height: $font-size-base+3
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
|
||||
position: absolute
|
||||
left: 32px
|
||||
max-width: 140px
|
||||
|
||||
.unread
|
||||
display: none
|
||||
color: white
|
||||
height: 22px
|
||||
width: 30px
|
||||
padding-top: 8px
|
||||
roundall(30px)
|
||||
color: $sidebarUnreadText
|
||||
height: 16px
|
||||
width: 18px
|
||||
roundall(5px)
|
||||
position: absolute
|
||||
top: 5px
|
||||
left: 10px
|
||||
font-size: $font-size-small
|
||||
padding-top:2px
|
||||
right: 5px
|
||||
top: 3px
|
||||
font-size: $font-size-smaller
|
||||
font-weight: $font-weight-bold
|
||||
text-align: center
|
||||
background: rgba(0, 174, 239, .8)
|
||||
background: $sidebarUnreadBg
|
||||
|
||||
.unread:not(:empty)
|
||||
display: block
|
||||
|
||||
.remove, .join
|
||||
position: absolute
|
||||
right: 7px
|
||||
top: 5px
|
||||
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
|
||||
|
||||
@ -237,15 +289,12 @@
|
||||
display: inline-block
|
||||
|
||||
#roster
|
||||
|
||||
.name
|
||||
width: 180px
|
||||
.wrap
|
||||
padding-left: 10px
|
||||
|
||||
#bookmarks
|
||||
|
||||
.name
|
||||
width: 120px
|
||||
padding: 5px 10px 5px 40px
|
||||
.wrap
|
||||
padding-left: 24px
|
||||
|
||||
@keyframes pulsate
|
||||
0%
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// Settings
|
||||
.main > div
|
||||
padding: 20px
|
||||
padding-top: 50px
|
||||
padding-top: 64px
|
||||
border-bottom: 1px solid $gray-lighter
|
||||
|
||||
&:last-of-type
|
||||
|
||||
@ -31,7 +31,8 @@ var clientApp = new Moonboots({
|
||||
__dirname + '/clientapp/libraries/jquery.js',
|
||||
__dirname + '/clientapp/libraries/ui.js',
|
||||
__dirname + '/clientapp/libraries/resampler.js',
|
||||
__dirname + '/clientapp/libraries/IndexedDBShim.min.js'
|
||||
__dirname + '/clientapp/libraries/IndexedDBShim.min.js',
|
||||
__dirname + '/clientapp/libraries/sugar-1.2.1-dates.js'
|
||||
],
|
||||
browserify: {
|
||||
debug: false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user