Skip to content

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

Combine inverse/converse chatrooms css 

updates #1091
parent 63f65932
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 174 deletions
css/converse.css
View file @ a8540162
......@@ -8208,7 +8208,7 @@ body.reset {
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: #f6ccc1;
font-size: 16px;
font-size: 14px;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
......@@ -8455,15 +8455,69 @@ body.reset {
width: 100%;
border: 1px solid #999; }
#conversejs .chatbox.chatroom {
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed .chatbox.chatroom {
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .box-flyout {
#conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title .chatroom-description {
font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout,
#conversejs.converse-mobile .chatroom .box-flyout {
background-color: #E77051;
border: 1.2em solid #E77051;
border-top: 0.8em solid #E77051;
width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title {
flex: 0 0 75%;
max-width: 75%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title .chatroom-description,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title .chatroom-description {
font-size: 70%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 4px;
min-width: auto; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 4px;
padding: 1em; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 16px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
font-size: 12px; }
#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body {
......
css/inverse.css
View file @ a8540162
This diff is collapsed.
dev.html
View file @ a8540162
......@@ -26,14 +26,14 @@
// 'prosody@conference.prosody.im',
// 'jdev@conference.jabber.org'
// ],
// websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
view_mode: 'fullscreen',
archived_messages_page_size: '500',
allow_public_bookmarks: true,
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],
// bosh_service_url: 'http://chat.example.org:5280/http-bind/',
bosh_service_url: 'http://chat.example.org:5280/http-bind/',
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_archiving: 'always',
debug: true
......
mockup/chatroom.html
View file @ a8540162
......@@ -23,7 +23,7 @@
<div class="chatbox chatroom" id="chatroom">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9">
<div class="chatbox-title">
<div class="chat-title">Capulet's orchard</div>
<p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
......
sass/_chatrooms.scss
View file @ a8540162
......@@ -12,7 +12,7 @@
.chatroom-description {
color: lighten($chatroom-head-color, 25%);
font-size: $font-size-large;
font-size: $font-size;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
......@@ -291,3 +291,96 @@
}
}
}
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed {
.chatbox {
&.chatroom {
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
}
.chatbox-title {
@include make-col(8);
.chatroom-description {
font-size: 80%;
}
}
.chatroom-body {
.occupants {
.chatroom-features {
.feature {
font-size: $font-size-small;
}
}
}
}
}
}
}
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
width: 100%;
.chatbox-title {
@include make-col(9);
.chatroom-description {
font-size: 70%;
}
}
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chatroom-form-container {
border-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;
}
&.full {
max-width: 100%;
.new-msgs-indicator {
max-width: 100%;
}
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $occupants-padding;
.occupants-heading {
font-size: $font-size-large;
}
ul {
&.occupant-list {
li {
font-size: $font-size-small;
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}
sass/_variables.scss
View file @ a8540162
......@@ -63,6 +63,8 @@ $message-them-color: $green !default;
$roster-height: 194px !default;
$flyout-padding: 1.2em;
$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
......@@ -110,10 +112,11 @@ $font-path: "../fonticons/fonts/" !default;
$normal-font: "Helvetica", "Arial", sans-serif;
$heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$chatroom-color-light: $light-red !default;
$chatroom-head-color: $red !default;
$chatroom-message-them-color: $green !default;
$chatroom-width: 400px !default;
$headline-head-color: $orange !default;
......@@ -124,3 +127,17 @@ $box-close-button-padding-right: 4px !default;
$chatbox-button-size: 14px !default;
$fullpage-chatbox-button-size: 16px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$line-height-huge: 24px !default;
$occupants-padding: 1em;
sass/converse.scss
View file @ a8540162
......@@ -49,7 +49,6 @@
@import "roomslist";
@import "roster";
@import "chatrooms";
@import "converse/chatrooms";
@import "headline";
@import "messages";
@import "converse/minimized_chats";
......
sass/converse/_chatrooms.scss deleted 100644 → 0
View file @ 63f65932
#conversejs {
.chatbox {
&.chatroom {
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
}
.chatroom-body {
.occupants {
.chatroom-features {
.feature {
font-size: $font-size-small;
}
}
}
}
}
}
}
sass/converse/_variables.scss
View file @ a8540162
......@@ -10,17 +10,5 @@ $controlbox-head-height: 55px !default;
$chatbox-hover-height: 1em !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$chat-width: 250px !default;
$chat-height: 450px !default;
$chatroom-width: 400px !default;
sass/inverse.scss
View file @ a8540162
......@@ -51,7 +51,6 @@
@import "inverse/roster";
@import "bookmarks";
@import "chatrooms";
@import "inverse/chatrooms";
@import "headline";
@import "inverse/headline";
@import "messages";
......
sass/inverse/_chatrooms.scss deleted 100644 → 0
View file @ 63f65932
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chat-head-chatroom {
height: $chatroom-head-height;
font-size: 20px;
.chat-title {
.chatroom-description {
font-size: 65%;
}
}
}
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
width: 100%;
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chatroom-form-container {
border-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;
}
&.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;
}
ul {
&.occupant-list {
li {
font-size: $font-size-small;
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}
sass/inverse/_variables.scss
View file @ a8540162
......@@ -3,8 +3,6 @@ $emoji-picker-height: 150px !default;
$roster-item-height: 30px !default;
$flyout-padding: 1.2em;
$chat-head-height: 62px !default;
$controlbox-dropdown-height: 30px !default;
......@@ -14,21 +12,5 @@ $rounded-border-radius: 4px !default;
$chatbox-hover-height: 6px !default;
$font-size-small: 14px !default;
$font-size: 16px !default;
$font-size-large: 18px !default;
$font-size-huge: 26px !default;
$legend-font-size: 18px !default;
$line-height-small: 20px !default;
$line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 30px !default;
$chat-width: 100% !default;
$chat-height: 100%;
$padding: 1em;
$chatroom-head-height: 62px !default;
$chatroom-width: 300px !default;
src/templates/chatroom_head.html
View file @ a8540162
<div class="col">
<div class="chatbox-title">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
{{{ o.name }}}
......
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