Skip to content

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

fixes #1091 

We no longer need inverse.css
parent f582fdad
Expand all Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 9147 deletions
CHANGES.md
View file @ fa849b3d
......@@ -8,6 +8,7 @@
- #194 Include entity capabilities in outgoing presence stanzas
- #337 API call to update a VCard
- #968 Use nickname from VCard when joining a room
- #1091 There's now only one CSS file for all view modes.
- #1094 Show room members who aren't currently online
- It's now also possible to edit your VCard via the UI
- Automatically grow/shrink input as text is entered/removed
......
Makefile
View file @ fa849b3d
......@@ -134,10 +134,7 @@ dev: stamp-bundler stamp-npm
## Builds
.PHONY: css
css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/inverse.css css/inverse.min.css css/fonts.css
css/inverse.css:: dev sass sass
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse.scss css/inverse.css
css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/fonts.css
css/converse.css:: dev sass
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse.scss css/converse.css
......
css/converse.css
View file @ fa849b3d
......@@ -3,7 +3,7 @@
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
* Copyright (c) 2013-2018, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@font-face {
......@@ -8060,6 +8060,108 @@ body.reset {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs.converse-fullscreen #controlbox {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin: 0; }
@media (min-width: 768px) {
#conversejs.converse-fullscreen #controlbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 1200px) {
#conversejs.converse-fullscreen #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#conversejs.converse-fullscreen #controlbox.logged-out {
flex: 0 0 100%;
max-width: 100%; }
#conversejs.converse-fullscreen #controlbox .controlbox-pane {
border-radius: 0; }
#conversejs.converse-fullscreen #controlbox .flyout {
border-radius: 0; }
#conversejs.converse-fullscreen #controlbox #converse-login-panel {
border-radius: 0; }
#conversejs.converse-fullscreen #controlbox #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs.converse-fullscreen #controlbox .toggle-register-login {
line-height: 24px; }
#conversejs.converse-fullscreen #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%;
text-align: center; }
#conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading {
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: #387592; }
#conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-subtitle {
font-size: 90%;
padding: 0.5em; }
@media screen and (max-width: 480px) {
#conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } }
#conversejs.converse-fullscreen #controlbox.logged-out {
flex: 0 0 100%;
max-width: 100%;
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
width: 100%; }
#conversejs.converse-fullscreen #controlbox.logged-out .box-flyout {
width: 100%; }
#conversejs.converse-fullscreen #controlbox .box-flyout {
border: 0;
width: 100%;
z-index: 1;
background-color: #578EA9; }
#conversejs.converse-fullscreen #controlbox .box-flyout .controlbox-head {
display: none; }
#conversejs.converse-fullscreen #controlbox #converse-register, #conversejs.converse-fullscreen #controlbox #converse-login {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; }
@media (min-width: 576px) {
#conversejs.converse-fullscreen #controlbox #converse-register, #conversejs.converse-fullscreen #controlbox #converse-login {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; } }
@media (min-width: 768px) {
#conversejs.converse-fullscreen #controlbox #converse-register, #conversejs.converse-fullscreen #controlbox #converse-login {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
margin-left: 16.6666666667%; } }
@media (min-width: 992px) {
#conversejs.converse-fullscreen #controlbox #converse-register, #conversejs.converse-fullscreen #controlbox #converse-login {
flex: 0 0 50%;
max-width: 50%;
margin-left: 25%; } }
#conversejs.converse-fullscreen #controlbox #converse-register .title, #conversejs.converse-fullscreen #controlbox #converse-register .instructions, #conversejs.converse-fullscreen #controlbox #converse-login .title, #conversejs.converse-fullscreen #controlbox #converse-login .instructions {
margin: 1em 0; }
#conversejs.converse-fullscreen #controlbox #converse-register input[type=submit],
#conversejs.converse-fullscreen #controlbox #converse-register input[type=button], #conversejs.converse-fullscreen #controlbox #converse-login input[type=submit],
#conversejs.converse-fullscreen #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs .list-container {
text-align: left;
padding: 0.3em 0; }
......@@ -8603,6 +8705,14 @@ body.reset {
#conversejs .chatbox.headlines .chat-content {
height: 100%; }
#conversejs.converse-fullscreen .chatbox.headlines .box-flyout {
background-color: #E7A151; }
#conversejs.converse-fullscreen .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; }
#conversejs.converse-fullscreen .chatbox.headlines .flyout {
border: 1.2em solid #E7A151;
border-top: 0.8em solid #E7A151; }
#conversejs .message.date-separator {
height: 2em;
margin: 0;
......
css/inverse.css deleted 100644 → 0
View file @ f582fdad
This diff is collapsed.
dev.html
View file @ fa849b3d
......@@ -10,7 +10,7 @@
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script src="node_modules/requirejs/require.js"></script>
<script src="src/config.js"></script>
</head>
......
docs/source/configuration.rst
View file @ fa849b3d
......@@ -376,7 +376,7 @@ For example::
blacklisted_plugins
-------------------
* Default: ``[]`` (``['converse-minimize', 'converse-dragresize']`` for inVerse)
* Default: ``[]``
A list of plugin names that are blacklisted and will therefore not be
initialized once ``converse.initialize`` is called, even if the same plugin is
......@@ -698,7 +698,7 @@ If set to ``true``, then don't show offline users.
hide_open_bookmarks
-------------------
* Default: ``false`` (``true`` for inVerse).
* Default: ``false`` (``true`` when the ``view_mode`` is set to ``fullscreen``).
This setting applies to the ``converse-bookmarks`` plugin and specfically the
list of bookmarks shown in the ``Rooms`` tab of the control box.
......@@ -1163,7 +1163,7 @@ Specifies whether chat state (online, dnd, away) HTML5 desktop notifications sho
show_controlbox_by_default
--------------------------
* Default: ``false`` (``true`` for inVerse)
* Default: ``false`` (``true`` when the ``view_mode`` is set to ``fullscreen``)
The "controlbox" refers to the special chatbox containing your contacts roster,
status widget, chatrooms and other controls.
......@@ -1280,7 +1280,7 @@ See also `trusted`_.
sticky_controlbox
-----------------
* Default: ``false`` (``true`` for inVerse).
* Default: ``false`` (``true`` when the ``view_mode`` is set to ``fullscreen``).
If set to ``true``, the control box (which includes the login, registration,
contacts and rooms tabs) will not be closeable. It won't have a close button at
......@@ -1468,6 +1468,9 @@ Since version 3.3.0, the ``inverse.js`` and ``converse-mobile.js`` builds no
longer exist. Instead the standard ``converse.js`` build is used, together with
the appropriate ``view_mode`` value.
Since verseion 4.0.0, there is now also only one CSS file to be used for all
the different view modes, ``converse.css``.
The ``converse-muc-embedded.js`` build is still kept, because it's smaller than
``converse.js`` due to unused code being removed. It doesn't however contain
any new code, so the full ``converse.js`` build could be used instead, as long
......@@ -1476,19 +1479,6 @@ as ``view_mode`` is set to ``embedded``.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins
when switching view modes.
.. note::
Although the ``view_mode`` setting has removed the need for different
JavaScript builds, you'll still need to use different CSS files depending
on the view mode.
* For ``embedded`` you need to use ``./css/converse-muc-embedded.css``
* For ``fullscreen`` you need ``./css/inverse.css``
* For ``mobile`` you need to use both ``./css/converse.css`` and ``./css/mobile.css``
* For ``overlayed`` this is ``./css/converse.css``
Hopefully in a future release the CSS files will be combined and you'll
only need ``converse.css``
.. _`whitelisted_plugins`:
......
docs/source/quickstart.rst
View file @ fa849b3d
......@@ -34,8 +34,6 @@ via the *script* and *link* tags:
<script src="https://cdn.conversejs.org/dist/converse.min.js" charset="utf-8"></script>
.. note:: For the fullscreen :ref:`view_mode` version of converse.js, replace ``converse.min.css`` with ``inverse.min.css``.
.. note:: Instead of always loading the latest version of Converse.js via the
CDN, it's generally better to load a specific version (preferably the
latest one), to avoid breakage when new backwards-incompatible versions are
......@@ -111,19 +109,13 @@ split up into two parts, with the UI part dropped for this build.
Fullscreen version
------------------
Converse.js also comes in a fullscreen version (often referred to as Inverse).
Converse.js also comes in a fullscreen version.
A hosted version is available online at `inverse.chat <https://inverse.chat>`_.
Originally this version was available as a separate build file, but
as of version 4.0.0 and higher, the difference between the "overlay" and the
"fullscreen" versions of converse.js is simply a matter of configuring the
:ref:`view_mode` and including the right CSS file.
For the default "overlay" version, ``converse.css`` is used, and for the
"fullscreen" version ``inverse.css`` is used.
We'd like to eventually not require two different CSS files, and to allow you
to seamlessly switch between the different view modes.
:ref:`view_mode`.
To generate the headless build, run ``make dist/converse-headless.js`` and/or
``make dist/converse-headless.min.js``.
......
fullscreen.html
View file @ fa849b3d
......@@ -3,11 +3,11 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>inVerse</title>
<title>Converse</title>
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<script type="text/javascript" src="inverse-analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
<link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
<script src="dist/converse.js"></script>
</head>
......
mockup/chatbox.html
View file @ fa849b3d
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
</head>
<body class="reset">
......
mockup/chatroom.html
View file @ fa849b3d
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatroom Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
</head>
<body class="reset">
......
mockup/fullscreen-login.html
View file @ fa849b3d
......@@ -6,7 +6,7 @@
<title>Login Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
</head>
<body>
......
sass/_controlbox.scss
View file @ fa849b3d
......@@ -444,3 +444,106 @@
}
}
}
#conversejs.converse-fullscreen {
#controlbox {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
&.logged-out {
@include make-col(12);
}
margin: 0;
.controlbox-pane {
border-radius: 0;
}
.flyout {
border-radius: 0;
}
#converse-login-panel {
border-radius: 0;
.converse-form {
padding: 3em 2em 3em;
}
}
.toggle-register-login {
line-height: $line-height-huge;
}
.brand-heading-container {
@include make-col(12);
text-align: center;
.brand-heading {
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: $blue;
}
.brand-subtitle {
font-size: 90%;
padding: 0.5em;
}
@media screen and (max-width: $mobile-portrait-length) {
.brand-heading {
font-size: 400%;
}
}
}
&.logged-out {
@include make-col(12);
@include fade-in;
width: 100%;
.box-flyout {
width: 100%;
}
}
.box-flyout {
border: 0;
width: 100%;
z-index: 1;
background-color: $controlbox-head-color;
.controlbox-head {
display: none;
}
}
#converse-register, #converse-login {
@include make-col-ready();
@include make-col(8);
@include make-col-offset(2);
@include media-breakpoint-up(sm) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(md) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(lg) {
@include make-col(6);
@include make-col-offset(3);
}
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
input[type=button] {
width: auto;
}
}
}
}
sass/_headline.scss
View file @ fa849b3d
......@@ -18,3 +18,20 @@
}
}
#conversejs.converse-fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: $headline-head-color;
}
.chat-head {
&.chat-head-chatbox {
background-color: $headline-head-color;
}
}
.flyout {
border: $flyout-padding solid $headline-head-color;
border-top: 0.8em solid $headline-head-color;
}
}
}
sass/converse.scss
View file @ fa849b3d
......@@ -2,7 +2,7 @@
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
* Copyright (c) 2013-2018, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "font-awesome";
......
sass/inverse.scss
View file @ fa849b3d
......@@ -42,13 +42,10 @@
@import "profile";
@import "chatbox";
@import "controlbox";
@import "inverse/controlbox";
@import "roster";
@import "roomslist";
@import "inverse/roster";
@import "bookmarks";
@import "roster";
@import "chatrooms";
@import "headline";
@import "inverse/headline";
@import "messages";
@import "awesomplete"
@import "bookmarks";
@import "awesomplete";
sass/inverse/_controlbox.scss deleted 100644 → 0
View file @ f582fdad
#conversejs.fullscreen {
#controlbox {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
&.logged-out {
@include make-col(12);
}
margin: 0;
.controlbox-pane {
border-radius: 0;
}
.flyout {
border-radius: 0;
}
#converse-login-panel {
border-radius: 0;
.converse-form {
padding: 3em 2em 3em;
}
}
.toggle-register-login {
line-height: $line-height-huge;
}
.brand-heading-container {
@include make-col(12);
text-align: center;
.brand-heading {
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: $blue;
}
.brand-subtitle {
font-size: 90%;
padding: 0.5em;
}
@media screen and (max-width: $mobile-portrait-length) {
.brand-heading {
font-size: 400%;
}
}
}
&.logged-out {
@include make-col(12);
@include fade-in;
width: 100%;
.box-flyout {
width: 100%;
}
}
.box-flyout {
border: 0;
width: 100%;
z-index: 1;
background-color: $controlbox-head-color;
.controlbox-head {
display: none;
}
}
#converse-register, #converse-login {
@include make-col-ready();
@include make-col(8);
@include make-col-offset(2);
@include media-breakpoint-up(sm) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(md) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(lg) {
@include make-col(6);
@include make-col-offset(3);
}
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
input[type=button] {
width: auto;
}
}
}
}
sass/inverse/_headline.scss deleted 100644 → 0
View file @ f582fdad
#conversejs.fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: $headline-head-color;
}
.chat-head {
&.chat-head-chatbox {
background-color: $headline-head-color;
}
}
.flyout {
border: $flyout-padding solid $headline-head-color;
border-top: 0.8em solid $headline-head-color;
}
}
}
sass/inverse/_minimized_chats.scss deleted 100644 → 0
View file @ f582fdad
#conversejs.fullscreen {
#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 {
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/_roster.scss deleted 100644 → 0
View file @ f582fdad
#conversejs {
#converse-roster {
padding-bottom: 3em;
}
}
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