Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
converse.js
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
converse.js
Commits
e487fe4e
Commit
e487fe4e
authored
Apr 24, 2018
by
JC Brand
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update mockups and tweak margin for chatroom in responsive mode
parent
d0387a65
Changes
9
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
285 additions
and
221 deletions
+285
-221
css/converse.css
css/converse.css
+70
-68
css/inverse.css
css/inverse.css
+96
-81
mockup/chatbox.html
mockup/chatbox.html
+3
-5
mockup/chatroom.html
mockup/chatroom.html
+97
-51
mockup/user-panel.html
mockup/user-panel.html
+13
-13
sass/_chatrooms.scss
sass/_chatrooms.scss
+1
-1
sass/_controlbox.scss
sass/_controlbox.scss
+3
-0
sass/inverse/_chatrooms.scss
sass/inverse/_chatrooms.scss
+2
-1
sass/inverse/inverse.scss
sass/inverse/inverse.scss
+0
-1
No files found.
css/converse.css
View file @
e487fe4e
This diff is collapsed.
Click to expand it.
css/inverse.css
View file @
e487fe4e
This diff is collapsed.
Click to expand it.
mockup/chatbox.html
View file @
e487fe4e
...
@@ -36,13 +36,11 @@
...
@@ -36,13 +36,11 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col-3"
>
<div
class=
"chatbox-buttons row no-gutters"
>
<div
class=
"chatbox-buttons row no-gutters"
>
<a
class=
"chatbox-btn fa fa-close"
title=
"Close this chat box"
></a>
<a
class=
"chatbox-btn fa fa-close"
title=
"Close this chat box"
></a>
<a
class=
"chatbox-btn fa fa-vcard"
title=
"Contact profile"
data-toggle=
"modal"
data-target=
"#contactProfileModal"
></a>
<a
class=
"chatbox-btn fa fa-vcard"
title=
"Contact profile"
data-toggle=
"modal"
data-target=
"#contactProfileModal"
></a>
</div>
</div>
</div>
</div>
</div>
<div
class=
"chat-body"
>
<div
class=
"chat-body"
>
<div
class=
"chat-content"
>
<div
class=
"chat-content"
>
...
...
mockup/chatroom.html
View file @
e487fe4e
This diff is collapsed.
Click to expand it.
mockup/user-panel.html
View file @
e487fe4e
<!-- <div id="users" class="controlbox-pane"> -->
<!-- <div id="users" class="controlbox-pane"> -->
<div
class=
"userinfo"
>
<div
class=
"userinfo"
>
<div
class=
"d-flex"
>
<div
class=
"
profile
d-flex"
>
<canvas
height=
"
20"
width=
"20
"
class=
"avatar align-self-center"
></canvas>
<canvas
height=
"
40px"
width=
"40px
"
class=
"avatar align-self-center"
></canvas>
<span
class=
"username w-100 align-self-center"
>
Walter White
</span>
<span
class=
"username w-100 align-self-center"
>
Walter White
</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
...
@@ -23,19 +23,19 @@
...
@@ -23,19 +23,19 @@
<div
class=
"rooms-list"
>
<div
class=
"rooms-list"
>
<div
class=
"available-chatroom d-flex flex-row"
>
<div
class=
"available-chatroom d-flex flex-row"
>
<span
class=
"badge badge-info msgs-indicator"
>
1
</span>
<span
class=
"badge badge-info msgs-indicator"
>
1
</span>
<a
class=
"open-room available-room w-100"
data-room-jid=
"public@conference.test.com"
title=
"Click to open this room"
href=
"
#
"
>
public
</a>
<a
class=
"open-room available-room w-100"
data-room-jid=
"public@conference.test.com"
title=
"Click to open this room"
href=
"
chatroom.html
"
>
public
</a>
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
<a
href=
"#"
class=
"fa fa-bookmark"
title=
"Click to bookmark this room"
>
</a>
<a
href=
"#"
class=
"fa fa-bookmark"
title=
"Click to bookmark this room"
>
</a>
<a
href=
"#"
class=
"fa fa-times"
title=
"Click to leave this room"
>
</a>
<a
href=
"#"
class=
"fa fa-times"
title=
"Click to leave this room"
>
</a>
</div>
</div>
<div
class=
"available-chatroom d-flex flex-row"
>
<div
class=
"available-chatroom d-flex flex-row"
>
<a
class=
"open-room available-room w-100"
data-room-jid=
"team@conference.test.com"
title=
"Click to open this room"
href=
"
#
"
>
team
</a>
<a
class=
"open-room available-room w-100"
data-room-jid=
"team@conference.test.com"
title=
"Click to open this room"
href=
"
chatroom.html
"
>
team
</a>
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
</div>
</div>
<div
class=
"available-chatroom d-flex flex-row"
>
<div
class=
"available-chatroom d-flex flex-row"
>
<a
class=
"open-room available-room w-100"
data-room-jid=
"test@conference.test.com"
title=
"Click to open this room"
href=
"
#
"
>
test
</a>
<a
class=
"open-room available-room w-100"
data-room-jid=
"test@conference.test.com"
title=
"Click to open this room"
href=
"
chatroom.html
"
>
test
</a>
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
<a
href=
"#"
class=
"room-info fa fa-info-circle"
data-container=
"body"
data-toggle=
"popover"
title=
"Room info"
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
data-html=
"true"
data-content=
"<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"
>
</a>
</div>
</div>
...
@@ -86,17 +86,17 @@
...
@@ -86,17 +86,17 @@
<ul>
<ul>
<li
class=
"online current-xmpp-contact d-flex"
>
<li
class=
"online current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
Victor Matfield
</a>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
Victor Matfield
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
<li
class=
"away current-xmpp-contact d-flex"
>
<li
class=
"away current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle-o"
title=
"this contact is away"
></span>
William Winterbottom
</a>
<span
class=
"fa fa-circle-o"
title=
"this contact is away"
></span>
William Winterbottom
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
<li
class=
"dnd current-xmpp-contact d-flex"
>
<li
class=
"dnd current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-minus-circle"
title=
"This contact is busy"
></span>
Gary Teichmann
</a>
<span
class=
"fa fa-minus-circle"
title=
"This contact is busy"
></span>
Gary Teichmann
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
...
@@ -108,12 +108,12 @@
...
@@ -108,12 +108,12 @@
<span
class=
"fa fa-caret-down"
></span>
Family
</a>
<span
class=
"fa fa-caret-down"
></span>
Family
</a>
<ul>
<ul>
<li
class=
"away current-xmpp-contact d-flex"
>
<li
class=
"away current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle-o"
title=
"this contact is away"
></span>
Allan Donald
</a>
<span
class=
"fa fa-circle-o"
title=
"this contact is away"
></span>
Allan Donald
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
<li
class=
"offline current-xmpp-contact d-flex"
>
<li
class=
"offline current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-times-circle"
title=
"This contact is offline"
></span>
Corné Krige
</a>
<span
class=
"fa fa-times-circle"
title=
"This contact is offline"
></span>
Corné Krige
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
...
@@ -125,12 +125,12 @@
...
@@ -125,12 +125,12 @@
<span
class=
"fa fa-caret-down"
></span>
Friends
</a>
<span
class=
"fa fa-caret-down"
></span>
Friends
</a>
<ul>
<ul>
<li
class=
"online current-xmpp-contact d-flex"
>
<li
class=
"online current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
John Smit
</a>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
John Smit
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
<li
class=
"online current-xmpp-contact d-flex"
>
<li
class=
"online current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
Bakkies Botha
</a>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
Bakkies Botha
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
...
@@ -142,7 +142,7 @@
...
@@ -142,7 +142,7 @@
<span
class=
"fa fa-caret-down"
></span>
Ungrouped
</a>
<span
class=
"fa fa-caret-down"
></span>
Ungrouped
</a>
<ul>
<ul>
<li
class=
"online current-xmpp-contact d-flex"
>
<li
class=
"online current-xmpp-contact d-flex"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
#
"
>
<a
class=
"open-chat w-100"
title=
"Click to chat with this contact"
href=
"
chatbox.html
"
>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
James Small
</a>
<span
class=
"fa fa-circle"
title=
"This contact is online"
></span>
James Small
</a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
<a
class=
"remove-xmpp-contact fa fa-trash"
title=
"Click to remove this contact"
href=
"#"
></a>
</li>
</li>
...
...
sass/_chatrooms.scss
View file @
e487fe4e
#converse
-embedded-chat
,
#converse
js
.converse-embedded
,
#conversejs
{
#conversejs
{
.add-chatroom
{
.add-chatroom
{
input
[
type
=
"submit"
],
input
[
type
=
"submit"
],
...
...
sass/_controlbox.scss
View file @
e487fe4e
...
@@ -449,6 +449,9 @@
...
@@ -449,6 +449,9 @@
.chatbox
{
.chatbox
{
.box-flyout
{
.box-flyout
{
top
:
-100vh
;
margin-left
:
15px
;
// Counteracts Bootstrap margins, but
// not clear why needed...
left
:
0
;
left
:
0
;
bottom
:
0
;
bottom
:
0
;
border-radius
:
0
;
border-radius
:
0
;
...
...
sass/inverse/_chatrooms.scss
View file @
e487fe4e
#conversejs
.fullscreen
{
#conversejs
.converse-fullscreen
,
#conversejs
.converse-mobile
{
.chat-head-chatroom
{
.chat-head-chatroom
{
height
:
$chatroom-head-height
;
height
:
$chatroom-head-height
;
...
...
sass/inverse/inverse.scss
View file @
e487fe4e
...
@@ -36,7 +36,6 @@
...
@@ -36,7 +36,6 @@
@import
"bootstrap/scss/popover"
;
@import
"bootstrap/scss/popover"
;
@import
"bootstrap/scss/utilities"
;
@import
"bootstrap/scss/utilities"
;
}
}
@import
"../fonts"
;
@import
"../core"
;
@import
"../core"
;
@import
"core"
;
@import
"core"
;
@import
"../profile"
;
@import
"../profile"
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment