Skip to content

C
converse.js
Commit b66ff721 authored by JC Brand's avatar JC Brand
Browse files
Options

Merge inVerse into this repo

parent 78c51394
Hide whitespace changes
Inline Side-by-side
Showing with 3642 additions and 4 deletions
.gitignore
View file @ b66ff721
......@@ -53,6 +53,7 @@ dist/converse-no-locales-no-otr.min.js
dist/converse-no-otr.js
dist/converse-no-otr.min.js
dist/converse.min.js
dist/inverse.min.js
dist/converse-no-jquery.js
dist/converse-no-jquery.min.js
dist/converse-mobile.min.js
......
Makefile
View file @ b66ff721
# You can set these variables from the command line.
BOURBON_TEMPLATES = ./node_modules/bourbon/app/assets/stylesheets/
BUILDDIR = ./docs
BUNDLE ?= ./.bundle/bin/bundle
GRUNT ?= ./node_modules/.bin/grunt
......@@ -116,18 +117,24 @@ dev: stamp-bundler stamp-npm
## Builds
.PHONY: css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
css/inverse.css:: stamp-bundler sass
$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
css/inverse.min.css:: css/inverse.css
$(CLEANCSS) css/inverse.css > css/inverse.min.css
css/converse-muc-embedded.css:: stamp-bundler sass
$(SASS) -I ./node_modules/bourbon/app/assets/stylesheets/ sass/_muc_embedded.scss css/converse-muc-embedded.css
$(SASS) -I $(BOURBON_TEMPLATES) sass/_muc_embedded.scss css/converse-muc-embedded.css
css/converse-muc-embedded.min.css:: stamp-bundler sass css/converse-muc-embedded.css
$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
css/converse.css:: stamp-bundler sass
$(SASS) -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse.scss css/converse.css
$(SASS) -I $(BOURBON_TEMPLATES) sass/converse.scss css/converse.css
css/converse.min.css:: stamp-npm sass
css/converse.min.css:: css/converse.css
$(CLEANCSS) css/converse.css > css/converse.min.css
css/theme.min.css:: stamp-npm css/theme.css
......
css/inverse.css 0 → 100644
View file @ b66ff721
This source diff could not be displayed because it is too large. You can view the blob instead.
inverse.html 0 → 100644
View file @ b66ff721
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>inVerse</title>
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
<script src="node_modules/requirejs/require.js"></script>
<script src="src/config.js"></script>
<script src="inverse.js"></script>
</head>
<body>
<div class="content">
<div class="inner-content">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p class="no-chats">
You don't have any chats open.<br/></br/>
Start a new conversation by clicking on a contact or a room in the left navigation.
</p>
</div>
</div>
<script>
require(['inverse'], function (converse) {
converse.initialize({
auto_away: 300,
i18n: 'en',
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],
whitelisted_plugins: [
'converse-inverse',
'converse-roomslist',
'converse-singleton',
],
hide_open_bookmarks: true,
blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
chatview_avatar_width: 42,
chatview_avatar_height: 42,
auto_reconnect: true,
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_carbons: true,
message_archiving: 'always',
sticky_controlbox: true,
roster_groups: true,
show_controlbox_by_default: true,
debug: true
});
});
</script>
</body>
</html>
sass/inverse/_bookmarks.scss 0 → 100644
View file @ b66ff721
#conversejs {
#controlbox {
#chatrooms {
.bookmarks-list {
dl.rooms-list.bookmarks {
dd.available-chatroom {
a {
&.open-room {
width: 80%;
}
}
}
}
}
}
}
}
sass/inverse/_chatbox.scss 0 → 100644
View file @ b66ff721
#conversejs {
.chatbox-btn {
font-size: $font-size-large;
}
.flyout {
border: 1em solid $chat-head-color;
border-top: 0.8em solid $chat-head-color;
border-radius: 0;
bottom: 0;
bottom: 0;
}
.chat-head {
font-size: 20px;
padding: 0;
.user-custom-message {
font-size: 66%;
height: auto;
line-height: $line-height;
}
.avatar {
border-radius: 25%;
}
}
.chatbox {
height: 100%;
margin: 0;
@include calc(width, '100% - #{$controlbox-width}');
margin: 0;
.box-flyout {
@include calc(width, '100% - #{$controlbox-width}');
box-shadow: none;
min-width: auto;
}
.chat-content {
padding: 0 $padding $padding $padding;
}
.chat-title {
line-height: 17px;
}
form.sendXMPPMessage {
ul {
width: 100%;
}
.toggle-smiley {
padding-left: 0.5em;
ul {
li {
padding: 0.5em;
}
}
}
}
}
}
sass/inverse/_chatrooms.scss 0 → 100644
View file @ b66ff721
#conversejs {
.chat-head-chatroom {
height: $chatroom-head-height;
font-size: 20px;
.chatroom-description {
font-size: 66%;
margin-top: 3px;
margin-top: 0.5em;
}
}
.chatroom {
@include calc(width, '100% - #{$controlbox-width}');
.box-flyout {
background-color: $chatroom-head-color;
border: 1em solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
@include calc(width, '100% - #{$controlbox-width}');
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chat-area {
border-top-left-radius: $chatbox-border-radius;
min-width: auto;
.chat-content {
border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding;
}
&.full {
max-width: 100%;
.new-msgs-indicator {
max-width: 100%;
}
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $padding;
.occupants-heading {
font-size: $font-size-large;
}
.chatroom-features {
bottom: $padding;
width: 25%;
@include calc(width, '30% - 2em');
}
.awesomplete {
ul {
padding: 0.5em;
li {
padding: 0.3em 0;
}
}
}
ul {
&.occupant-list {
@include calc(height, '100% - 212px');
li {
font-size: $font-size-small;
width: 100%;
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}
sass/inverse/_controlbox.scss 0 → 100644
View file @ b66ff721
#conversejs {
#controlbox {
min-width: $controlbox-width;
width: 200px;
float: left;
margin: 0;
#login-dialog, #register {
.brand-heading {
margin: 10% 0 0 0;
font-size: 600%;
color: #577BDD;
}
.converse-form {
margin-top: 4em;
}
}
&.fullscreen {
width: 100%;
.box-flyout {
width: 100%;
}
}
.box-flyout {
border: 0;
background-color: white;
min-width: $controlbox-width;
width: 200px;
z-index: 1;
background-color: $controlbox-head-color;
}
.controlbox-head {
height: $controlbox-head-height;
padding: 6px 0 6px 0;
margin-top: 0.2em;
}
#converse-register, #converse-login {
margin: 30%;
margin-top: 15%;
#available-chatrooms {
padding: 0 1em 2em 1em;
}
input[type=submit] {
width: auto;
margin-top: 1.5em;
}
}
#controlbox-tabs {
/* single tab */
li {
width: 50%;
a {
height: $controlbox-head-height - 1px;
line-height: $controlbox-head-height - 1px;
&.current,
&.current:hover {
height: $controlbox-head-height;
}
font-size: $font-size-large;
}
}
}
.controlbox-pane {
@include calc(height, '100% - #{$controlbox-head-height}');
}
}
}
sass/inverse/_core.scss 0 → 100644
View file @ b66ff721
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: $global-background-color;
}
div.content {
height: 100vh;
width: 100vw;
position: fixed;
background-color: $global-background-color;
.inner-content {
text-align: center;
padding: 7%;
@include calc(padding-left, '5% + #{$controlbox-width}');
.brand-heading {
font-size: 600%;
margin-left: -10%;
}
p.no-chats {
padding-right: 10%;
font-size: 120%;
}
}
}
#conversejs {
width: 100vw;
height: 100vh;
position: fixed;
bottom: 0;
color: $text-color;
direction: ltr;
display: block;
font-size: $font-size;
right: 0;
z-index: 1031; // One more than bootstrap navbar
@media screen and (max-height: $mobile-landscape-height) {
width: 100%;
width: 100vw;
}
@media screen and (max-width: $mobile-portrait-length) {
width: 100%;
width: 100vw;
}
::selection {
background-color: $highlight-color;
}
::-moz-selection {
background-color: $highlight-color;
}
.circle {
border-radius: 50%;
}
.no-text-select {
-webkit-touch-callout: none;
@include user-select(none);
}
.emoticon {
font-size: $font-size;
}
.left {
float: left;
}
.right {
float: right;
}
.centered {
text-align: center;
display: block;
margin: 5em auto;
}
.hor_centered {
text-align: center;
display: block;
margin: 0 auto;
clear: both;
}
.hidden {
display: none;
}
.locked {
padding-right: 22px;
}
@include keyframes(spin) {
from {
@include transform(rotate(0deg));
}
to {
@include transform(rotate(359deg));
}
}
.spinner {
@include animation(spin 2s infinite, linear);
display: block;
text-align: center;
margin: 5px;
&:before {
font-size: 24px;
font-family: 'Converse-js' !important;
content: "\231b";
}
}
.button-group,
.input-button-group {
display: table;
}
.button-group {
width: 100%;
}
.input-button-group button,
.input-button-group input {
display: table-cell;
}
.error {
color: red;
}
.reg-feedback {
font-size: 85%;
}
.reg-feedback,
#converse-login .conn-feedback {
display: block;
text-align: center;
width: 100%;
}
a.restore-chat {
padding: 1px 0 1px 5px;
color: $chat-head-text-color;
line-height: 15px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.restore-chat:visited {
color: $chat-head-text-color;
}
.activated {
display: block !important;
}
.pure-button {
border-radius: $button-border-radius;
}
.button-primary {
color: white;
background-color: $primary-color;
}
.button-secondary {
color: white;
background-color: $secondary-color;
}
.button-cancel {
color: white;
background-color: $warning-color;
}
form {
&.pure-form.converse-form {
background: white;
margin: 1em;
legend {
color: $text-color;
}
label {
margin-top: 1em;
}
input[type=text],
input[type=password],
input[type=number],
input[type=button],
input[type=submit] {
height: 2.2em;
}
input[type=button],
input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em;
}
input.error {
border: 1px solid red;
color: $text-color;
}
.form-help {
color: gray;
font-size: 85%;
padding-top: 0.5em;
&:hover {
color: $text-color;
}
}
}
}
.chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0;
}
.chat-textarea-chatroom-selected {
border: 2px solid $link-color;
margin: 0;
}
.dropdown dt,
.dropdown ul {
margin: 0;
padding: 0;
}
}
sass/inverse/_headline.scss 0 → 100644
View file @ b66ff721
#conversejs {
.chatbox.headlines {
.chat-head {
&.chat-head-chatbox {
background-color: $headline-head-color;
}
}
.flyout {
border: 1em solid $headline-head-color;
border-top: 0.8em solid $headline-head-color;
}
}
}
sass/inverse/_minimized_chats.scss 0 → 100644
View file @ b66ff721
#conversejs {
#minimized-chats {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color;
display: none;
float: right;
font-weight: bold;
height: 100%;
margin: 0 $chat-gutter;
padding: 0;
width: 130px;
#toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
background-color: $link-color;
color: white;
position: relative;
padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.minimized-chats-flyout {
height: auto;
bottom: $bottom-gutter-height;
.chat-head {
padding: 0.3em;
border-radius: $chatbox-border-radius;
width: $minimized-chats-width;
height: 35px;
margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
}
&.minimized {
height: auto;
}
}
.unread-message-count,
.chat-head-message-count {
font-weight: bold;
background-color: white;
border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color;
color: $warning-color;
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px;
}
}
}
sass/inverse/_normalize.scss 0 → 100644
View file @ b66ff721
#conversejs {
@import "../pure/base";
@import "../pure/forms";
@import "../pure/buttons";
@include box-sizing(border-box);
*, *:before, *:after {
@include box-sizing(border-box);
}
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
ul li { height: auto; }
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
textarea,
input[type=submit], input[type=button],
input[type=text], input[type=password],
button {
font-size: $font-size;
padding: 0.25em;
min-height: 0;
}
strong {
font-weight: 700;
}
ol, ul {
list-style: none;
}
li {
height: 10px;
}
ul, ol, dl {
font: inherit;
margin: 0;
}
a, a:visited {
text-decoration: none;
color: $link-color;
text-shadow: none;
}
}
sass/inverse/_variables.scss 0 → 100644
View file @ b66ff721
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
*/
$global-background-color: #17818B !default;
$link-color: #587BDD !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: #114327 !default;
$save-button-color: #436F64 !default;
$chat-textarea-height: 70px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: #1A9707 !default;
$roster-height: 194px !default;
$roster-item-height: 30px !default;
$chat-head-color: #F4A261 !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default;
$controlbox-head-height: 63px !default;
$chatroom-head-height: 55px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$controlbox-head-color: #577BDD !default;
$controlbox-dropdown-height: 25px !default;
$primary-color: #2AC611 !default;
$secondary-color: #83A0D6 !default;
$warning-color: #D24E2B !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
$toolbar-height: 25px !default;
$toolbar-color: #FFF5EE !default;
$moderator-color: #D24E2B !default;
$online-color: #1A9707 !default;
$error-color: #D24E2B !default;
$subdued-color: #BBB !default;
$button-border-radius: 4px !default;
$chatbox-border-radius: 0 !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$font-size-tiny: 10px !default;
$font-size-small: 14px !default;
$font-size: 15px !default;
$font-size-large: 17px !default;
$legend-font-size: 17px !default;
$line-height: 16px !default;
$controlbox-width: 250px !default;
$chat-width: 100% !default;
$chat-height: 100%;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$padding: 1em;
$mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default;
/* $font-path: "../fonticons/fonts/" !default; */
$font-path: "https://cdn.conversejs.org/fonticons/fonts/" !default;
$chatroom-width: 300px !default;
$chatroom-head-color: #E76F51 !default;
$chatroom-color-light: #FF977C !default;
$chatroom-color-dark: #D24E2B !default;
$headline-head-color: #2A9D8F !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 16px !default;
sass/inverse/inverse.scss 0 → 100644
View file @ b66ff721
/*!
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "bourbon";
@import "variables";
@import "../fonts";
@import "normalize";
@import "core";
@import "../chatbox";
@import "chatbox";
@import "../controlbox";
@import "controlbox";
@import "../roster";
@import "../bookmarks";
@import "bookmarks";
@import "../chatrooms";
@import "chatrooms";
@import "headline";
@import "../awesomplete"
src/config.js
View file @ b66ff721
......@@ -45,6 +45,7 @@ require.config({
// Converse
"converse": "src/converse",
"inverse": "src/inverse",
"converse-bookmarks": "src/converse-bookmarks",
"converse-chatview": "src/converse-chatview",
......@@ -52,6 +53,7 @@ require.config({
"converse-core": "src/converse-core",
"converse-dragresize": "src/converse-dragresize",
"converse-headline": "src/converse-headline",
"converse-inverse": "src/converse-inverse",
"converse-mam": "src/converse-mam",
"converse-minimize": "src/converse-minimize",
"converse-muc": "src/converse-muc",
......
src/converse-inverse.js 0 → 100644
View file @ b66ff721
// Converse.js (A browser based XMPP chat client)
// http://conversejs.org
//
// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2)
//
/*global Backbone, define, window */
(function (root, factory) {
define(["converse-core",
"converse-chatview",
"converse-controlbox",
"converse-muc",
"converse-singleton"
], factory);
}(this, function (converse) {
"use strict";
var $ = converse.env.jQuery,
Strophe = converse.env.Strophe,
_ = converse.env._;
converse.plugins.add('converse-inverse', {
overrides: {
// overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
// relevant objects or classes.
//
// new functions which don't exist yet can also be added.
areDesktopNotificationsEnabled: function () {
// Call with "ignore_hidden" as true, so that it doesn't check
// if the windowState is hidden.
return this.__super__.areDesktopNotificationsEnabled.call(this, true);
},
shouldNotifyOfMessage: function (message) {
var _converse = this.__super__._converse;
var result = this.__super__.shouldNotifyOfMessage.apply(this, arguments);
return result && _converse.isMessageToHiddenChat(message);
},
ControlBoxView: {
close: function (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
}
// The controlbox cannot be closed.
},
hide: function (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
}
// The controlbox cannot be hidden
},
renderContactsPanel: function () {
this.__super__.renderContactsPanel.apply(this, arguments);
this.el.classList.remove("fullscreen");
return this;
},
renderRegistrationPanel: function () {
this.__super__.renderRegistrationPanel.apply(this, arguments);
// TODO: put into template
var div = document.createElement('div');
div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
var el = document.getElementById('converse-register');
el.parentNode.insertBefore(div.firstChild, el);
return this;
},
renderLoginPanel: function () {
this.__super__.renderLoginPanel.apply(this, arguments);
this.el.classList.add("fullscreen");
// TODO: put into template
var div = document.createElement('div');
div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
var el = document.getElementById('converse-login');
el.parentNode.insertBefore(div.firstChild, el);
return this;
}
},
ChatRoomView: {
afterShown: function (focus) {
/* Make sure chat rooms are scrolled down when opened
*/
this.scrollDown();
if (focus) {
this.focus();
}
return this.__super__.afterShown.apply(this, arguments);
}
}
},
initialize: function () {
var _converse = this._converse;
this.updateSettings({
sticky_controlbox: true,
sounds_path: '/node_modules/converse.js/sounds/', // New default
notification_icon: '/node_modules/converse.js/logo/conversejs128.png', // New default
});
_converse.isMessageToHiddenChat = function (message) {
var jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
var model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) {
return model.get('hidden');
}
// Not having a chat box is assume to be practically the same
// as it being hidden.
return true;
}
}
});
}));
src/inverse.js 0 → 100644
View file @ b66ff721
/* Converse.js components configuration
*
* This file is used to tell require.js which components (or plugins) to load
* when it generates a build.
*/
if (typeof define !== 'undefined') {
/* When running tests, define is not defined. */
define("inverse", [
"converse-core",
/* START: Removable components
* --------------------
* Any of the following components may be removed if they're not needed.
*/
"converse-chatview", // Renders standalone chat boxes for single user chat
"converse-controlbox", // The control box
"converse-bookmarks", // XEP-0048 Bookmarks
"converse-roomslist", // Show currently open chat rooms
"converse-mam", // XEP-0313 Message Archive Management
"converse-muc", // XEP-0045 Multi-user chat
"converse-vcard", // XEP-0054 VCard-temp
"converse-otr", // Off-the-record encryption for one-on-one messages
"converse-register", // XEP-0077 In-band registration
"converse-ping", // XEP-0199 XMPP Ping
"converse-notification",// HTML5 Notifications
"converse-headline", // Support for headline messages
"converse-inverse", // Inverse plugin for converse.js
/* END: Removable components */
], function(converse) {
var $ = converse.env.jQuery;
window.converse = converse;
$(window).trigger('converse-loaded', converse);
return converse;
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7