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