fixes #1091

We no longer need inverse.css

CHANGES.md

@@ -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

@@ -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

@@ -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;

dev.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

-#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

-#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

-#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

-#conversejs {
-    #converse-roster {
-        padding-bottom: 3em;
-    }
-}