summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--locales/en.json3
-rw-r--r--media/img/header.pngbin3736 -> 0 bytes
-rw-r--r--media/less/style/chat/browser.less34
-rw-r--r--media/less/style/chat/client.less39
-rw-r--r--media/less/style/chat/rooms.less145
-rw-r--r--media/less/style/chat/tabs.less16
-rw-r--r--templates/chat.html27
-rw-r--r--templates/includes/js/room.html157
8 files changed, 190 insertions, 231 deletions
diff --git a/locales/en.json b/locales/en.json
index 1d3ed70..05ab161 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -78,5 +78,6 @@
"Toggle Navigation": "Toggle Navigation",
"Home": "Home",
"Toggle Sidebar": "Toggle Sidebar",
- "Close": "Close"
+ "Close": "Close",
+ "Transcript for": "Transcript for"
} \ No newline at end of file
diff --git a/media/img/header.png b/media/img/header.png
deleted file mode 100644
index af23923..0000000
--- a/media/img/header.png
+++ /dev/null
Binary files differ
diff --git a/media/less/style/chat/browser.less b/media/less/style/chat/browser.less
index 3024a0f..f1e654d 100644
--- a/media/less/style/chat/browser.less
+++ b/media/less/style/chat/browser.less
@@ -9,37 +9,11 @@
.flex(1);
.flex-display;
.flex-direction(column);
-}
-
-.lcb-rooms-browser-header {
- min-height: @roomBrowserHeader;
- max-height: @roomBrowserHeader;
- padding: 8px 12px;
- border-bottom: 1px #ddd solid;
- position: relative;
- box-shadow: 0 4px 5px -5px rgba(0, 0, 0, .1);
- .flex-display;
- .flex-direction(row);
-}
-
-.lcb-rooms-browser-heading {
- color: #777;
- text-transform: uppercase;
- font-weight: 400;
- padding: 0;
- margin: 0;
- margin-right: 10px;
- @media (max-width: @screen-xs-max) {
- display: none;
+ .lcb-room-meta {
+ .flex(initial);
}
}
-.lcb-rooms-browser-new {
- position: absolute;
- top: 8px;
- right: 12px;
-}
-
.lcb-rooms-list,
.lcb-rooms-list-item {
display: block;
@@ -145,6 +119,9 @@
color: #aaa;
.flex-display;
.flex(1);
+ @media (max-width: @screen-xs-max) {
+ font-size: 18px;
+ }
}
.lcb-rooms-browser-filter-label {
@@ -152,6 +129,7 @@
}
.lcb-rooms-browser-filter-input {
+ background: none;
border: none;
.flex(1);
&:focus {
diff --git a/media/less/style/chat/client.less b/media/less/style/chat/client.less
index 74f1ca6..abf9336 100644
--- a/media/less/style/chat/client.less
+++ b/media/less/style/chat/client.less
@@ -69,7 +69,7 @@
}
.lcb-sidebar {
- background: #222;
+ background: #272727;
width: 200px;
min-width: 200px;
height: 100%;
@@ -78,15 +78,6 @@
z-index: 1;
.flex-display;
.flex-direction(column);
- &:after {
- background: #000;
- width: 1px;
- height: 100%;
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- }
@media (max-width: @screen-xs-max) {
height: 100%;
position: absolute;
@@ -100,19 +91,10 @@
.flex-display;
}
-.lcb-pane {
- margin: 10px;
- border: 1px #111 solid;
- border-radius: 2px;
- @media (max-width: @screen-xs-max) {
- margin: 3px;
- }
-}
-
.lcb-account-button {
- background: #222 url('../img/header.png');
- height: 42px;
- line-height: 45px;
+ background: #222;
+ height: 45px;
+ line-height: 48px;
color: #bbb;
padding: 0 6px;
display: block;
@@ -133,7 +115,7 @@
.lcb-account-button-avatar {
.size(32px);
position: absolute;
- top: 5px;
+ top: 6px;
left: 5px;
}
@@ -143,7 +125,7 @@
margin-right: 15px;
.text-overflow;
line-height: 18px;
- padding-top: 5px;
+ padding-top: 6px;
font-size: 18px;
}
@@ -197,15 +179,12 @@
}
.lcb-version {
- bottom: 0;
- right: 0;
+ bottom: 1px;
+ right: 4px;
+ .opacity(0.4);
.lcb-status-text;
}
-lcb-version-number {
- margin: 0 3px;
-}
-
.lcb-avatar {
border-radius: 100%;
}
diff --git a/media/less/style/chat/rooms.less b/media/less/style/chat/rooms.less
index b9f3f4f..5225ff3 100644
--- a/media/less/style/chat/rooms.less
+++ b/media/less/style/chat/rooms.less
@@ -2,9 +2,15 @@
* Rooms
*********************/
-.lcb-room {
+.lcb-room,
+.lcb-room-chat,
+.lcb-room-main {
.flex(1);
.flex-display;
+}
+
+.lcb-room {
+ .flex-direction(column);
-webkit-transition: -webkit-transform .1s ease;
-moz-transition: -moz-transform .1s ease;
-ms-transition: -ms-transform .1s ease;
@@ -16,84 +22,75 @@
}
}
+.lcb-room-chat {
+ .flex-direction(column);
+}
+
+.lcb-room-main {
+ .flex-direction(row);
+}
+
.lcb-room-header {
- background: #fff;
- min-height: 46px;
- padding: 10px;
+ background: #f3f3f3;
+ height: 60px;
+ line-height: 60px;
+ padding: 0 15px;
border-bottom: 1px #ddd solid;
position: relative;
- border-radius: 2px 2px 0 0;
box-shadow: 0 4px 5px -5px rgba(0, 0, 0, .1);
- z-index: 1000;
- @media (max-width: @screen-xs-max) {
- padding: 5px 8px;
- }
- .lcb-room-sidebar-opened & {
- border-radius: 2px 0 0 0;
- }
+ z-index: 1;
+ .flex-display;
+ .flex-direction(row);
}
-.lcb-room-header-actions {
- position: absolute;
- top: 5px;
- right: 10px;
- a {
- color: #777;
- }
- @media (max-width: @screen-xs-max) {
- top: 3px;
- }
+.lcb-room-meta {
+ padding-right: 15px;
+ .text-overflow;
+ .flex(1);
}
.lcb-room-heading {
- line-height: 100%;
- padding-right: 35px;
+ font-size: 24px;
+ font-weight: 300;
+ color: #555;
+ line-height: inherit;
margin: 0;
- .flex-display;
+ margin-right: 5px;
+ display: inline;
@media (max-width: @screen-xs-max) {
font-size: 20px;
}
- .name,
- .slug {
- max-width: 50%;
- .text-overflow;
- }
- .slug {
- font-size: 24px;
- font-weight: 300;
- color: #aaa;
- margin-left: 10px;
- margin-right: 10px;
- }
- .btn {
- color: #aaa;
- line-height: 30px;
- padding-top: 0;
- padding-bottom: 0;
- padding-left: 5px;
- padding-right: 5px;
-
- &:active {
- box-shadow: none;
- }
- }
.password {
font-size: 14px;
cursor: default;
}
- .btn:hover {
- color: #666;
- }
+}
+
+.lcb-room-heading-loud {
+ text-transform: uppercase;
}
.lcb-room-description {
- .text-overflow;
- color: #777;
+ font-weight: 300;
+ color: #9f9f9f;
+ margin: 0;
+ display: inline;
@media (max-width: @screen-xs-max) {
font-size: 12px;
}
}
+.lcb-room-header-actions {
+ .btn-action {
+ background: #eee;
+ color: #777;
+ border-color: #ddd;
+ &:hover {
+ background: #f7f7f7;
+ }
+ }
+}
+
.lcb-room-participants {
.text-overflow;
color: #777;
@@ -102,14 +99,8 @@
}
}
-
-.lcb-room-chat {
- .flex(1);
- .flex-display;
- .flex-direction(column);
-}
-
.lcb-entry {
+ background: #fff;
height: 70px;
min-height: 70px;
border-top: 1px #eee solid;
@@ -123,7 +114,6 @@
max-height: 100%;
padding: 15px;
border: none;
- border-radius: 0 0 0 2px;
resize: none;
.flex(1);
&:focus {
@@ -149,32 +139,38 @@
}
.lcb-entry-button {
- padding-left: 20px;
- padding-right: 20px;
+ background: none;
+ color: #777;
+ border: none;
+ outline: none;
+ padding: 0 25px;
border-radius: 0;
- border-radius: 0 0 2px 0;
- .lcb-room-sidebar-opened & {
- border-radius: 0;
+ &:hover {
+ color: #999;
+ }
+ &:active {
+ color: #555;
}
}
.lcb-room-toggle-sidebar {
- min-width: 30px;
- font-size: 30px;
- display: block;
- .transition(all .3s ease-in);
.lcb-room-sidebar-opened & {
- .rotateY(180deg);
+ background: #fefefe;
+ }
+ .fa {
+ .transition(all .2s ease-in);
+ .lcb-room-sidebar-opened & {
+ .rotateY(180deg);
+ }
}
}
.lcb-room-sidebar {
- background: #f2f2f2;
+ background: #f7f7f7;
width: 20%;
min-width: 160px;
max-width: 240px;
border-left: 1px #ddd solid;
- border-radius: 0 3px 3px 0;
.flex-display;
.flex-direction(column);
@media (max-width: @screen-sm-max) {
@@ -208,7 +204,6 @@
min-height: inherit;
line-height: 36px;
padding: 0 10px;
- border-radius: 3px 3px 0 0;
border-bottom: 1px #ddd solid;
position: relative;
}
diff --git a/media/less/style/chat/tabs.less b/media/less/style/chat/tabs.less
index 1839905..85f2f7e 100644
--- a/media/less/style/chat/tabs.less
+++ b/media/less/style/chat/tabs.less
@@ -18,18 +18,13 @@
}
.lcb-tabs {
- border: 1px #333 solid;
- border-top-color: #111;
- border-left: none;
- border-right: none;
+ margin: 20px 0;
}
.lcb-tab {
height: 36px;
line-height: 36px;
- font-size: 14px;
- border: 1px #111 solid;
- border-top-color: #333;
+ font-size: 12px;
display: block;
position: relative;
z-index: 1;
@@ -62,10 +57,7 @@
}
}
&.selected {
- background: #222;
- padding-right: 1px;
- margin-right: -1px;
- border-right-color: transparent;
+ background: #323232;
&:after {
background: rgba(255, 255, 255, .9);
}
@@ -119,7 +111,7 @@
color: #ccc;
position: absolute;
top: 0;
- right: 7px;
+ right: 8px;
.transition(opacity .07s linear);
.opacity(0);
&:hover {
diff --git a/templates/chat.html b/templates/chat.html
index 572679e..76476f3 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -77,7 +77,7 @@
</span>
</div>
<div class="lcb-version">
- <span>v <$ version $></span>
+ v <$ version $>
</div>
<div class="lcb-tabs-outer">
<ul class="lcb-tabs">
@@ -91,19 +91,28 @@
</section>
<section class="lcb-panes">
<div class="lcb-rooms-browser lcb-pane hide" data-id="list">
- <header class="lcb-rooms-browser-header">
- <h2 class="lcb-rooms-browser-heading">
- <$ __('All Rooms') $>
- </h2>
+ <header class="lcb-room-header">
+ <div class="lcb-room-meta">
+ <h2 class="lcb-room-heading lcb-room-heading-loud"><$ __('All Rooms') $></h2>
+ </div>
<div class="lcb-rooms-browser-filter">
<label class="lcb-rooms-browser-filter-label" for="lcb-rooms-browser-filter-input">
<i class="fa fa-search" aria-label="<$ __('Search') $>"></i>
</label>
- <input id="lcb-rooms-browser-filter-input" class="lcb-rooms-browser-filter-input" type="search" autofocus />
+ <input id="lcb-rooms-browser-filter-input" class="lcb-rooms-browser-filter-input" type="search" autofocus placeholder="Find a room..."/>
+ </div>
+ <div class="lcb-room-header-actions">
+ <a class="btn btn-success lcb-rooms-browser-new" data-toggle="modal" data-target="#lcb-add-room" href="#!/rooms/add">
+ <i class="fa fa-plus" aria-label="<$ __('Add Room') $>"></i>
+ </a>
</div>
- <a class="btn btn-success lcb-rooms-browser-new" data-toggle="modal" data-target="#lcb-add-room" href="#!/rooms/add">
- <i class="fa fa-plus" aria-label="<$ __('Add Room') $>"></i>
- </a>
+ </header>
+ <header class="lcb-rooms-browser-header hide">
+ <h2 class="lcb-rooms-browser-heading">
+ <$ __('All Rooms') $>
+ </h2>
+
+
</header>
<ul class="lcb-rooms-list"></ul>
<% include 'includes/modals/add-room.html' %>
diff --git a/templates/includes/js/room.html b/templates/includes/js/room.html
index af58015..9f2c44d 100644
--- a/templates/includes/js/room.html
+++ b/templates/includes/js/room.html
@@ -1,74 +1,79 @@
<script type="text/x-handlebars-template" id="template-room">
<div class="lcb-room lcb-pane lcb-pane-{{id}} {{#if sidebar}}lcb-room-sidebar-opened{{/if}} hide" data-id="{{id}}">
- <div class="lcb-room-chat ">
- <div class="lcb-room-header">
- <div class="lcb-room-meta">
- <h2 class="lcb-room-heading">
- <span class="name">{{name}}</span>
- <span class="slug">#{{slug}}</span>
- {{#if hasPassword}}
- <span class="fa fa-lock btn password" title="<$ __('This room requires password to enter') $>" aria-label="<$ __('This room requires password to enter') $>"></span>
- {{/if}}
- {{#if iCanEdit}}
- <a class="btn hidden-xs show-edit-room"
- title="<$ __('Edit Room') $>" aria-label="<$ __('Edit Room') $>">
- <i class="fa fa-edit"></i>
- </a>
- {{/if}}
- <a class="btn hidden-xs" title="<$ __('Chat History') $>" aria-label="<$ __('Chat History') $>"
- href="./transcript?room={{ id }}" target="_blank">
- <i class="fa fa-history"></i>
+ <header class="lcb-room-header">
+ <div class="lcb-room-meta">
+ <h2 class="lcb-room-heading">
+ <span class="slug">#{{slug}}</span>
+ {{#if hasPassword}}
+ <span class="fa fa-lock btn password" title="<$ __('This room requires password to enter') $>" aria-label="<$ __('This room requires password to enter') $>"></span>
+ {{/if}}
+ </h2>
+ <p class="lcb-room-description">{{description}}</p>
+ </div>
+ <div class="lcb-room-header-actions">
+ <div class="btn-group">
+ {{#if iCanEdit}}
+ <a class="btn btn-action hidden-xs show-edit-room"
+ title="<$ __('Edit Room') $>" aria-label="<$ __('Edit Room') $>">
+ <i class="fa fa-edit"></i>
</a>
- <% if settings.files.enable %>
- <a class="btn hidden-xs lcb-upload-trigger" title="<$ __('Upload Files') $>" aria-label="<$ __('Upload Files') $>" href="#">
- <i class="fa fa-upload"></i>
- </a>
- <% endif %>
- <% if settings.giphy.enable %>
- <a class="btn hidden-xs lcb-giphy" href="#lcb-giphy" title="<$ __('Giphy') $>" aria-label="<$ __('Giphy') $>" data-toggle="modal">
- <i class="fa fa-gift"></i>
- </a>
- <% endif %>
- </h2>
- <div class="lcb-room-description">
- <p>{{description}}</p>
- </div>
- </div>
- <div class="lcb-room-header-actions">
- <a class="lcb-room-toggle-sidebar" href="#">
- <i class="fa fa-chevron-left" aria-label="<$ __('Toggle Sidebar') $>"></i>
+ {{/if}}
+ <a class="btn btn-action hidden-xs" title="<$ __('Chat History') $>" aria-label="<$ __('Chat History') $>"
+ href="./transcript?room={{ id }}" target="_blank">
+ <i class="fa fa-history"></i>
</a>
</div>
- </div><!-- lcb-room-header end -->
- <ul class="lcb-messages" aria-live="polite"></ul>
- <form class="lcb-entry">
- <textarea class="lcb-entry-input" placeholder="<$ __('Got something to say?') $>" autofocus></textarea>
- <button type="submit" class="btn btn-info lcb-entry-button"><$ __('Send') $></button>
- </form>
- </div><!-- lcb-chat end -->
- <div class="lcb-room-sidebar">
- <div class="lcb-room-sidebar-group lcb-room-sidebar-users">
- <header class="lcb-room-sidebar-header">
- <h3 class="lcb-room-sidebar-heading">
- <i class="fa fa-users"></i> <$ __('Who\'s Here') $> (<span class="lcb-room-sidebar-items-count"></span>)
- </h3>
- </header>
- <ul class="lcb-room-sidebar-list"></ul>
+ <div class="btn-group">
+ <% if settings.files.enable %>
+ <a class="btn btn-action hidden-xs lcb-upload-trigger" title="<$ __('Upload Files') $>" aria-label="<$ __('Upload Files') $>" href="#">
+ <i class="fa fa-upload"></i>
+ </a>
+ <% endif %>
+ <% if settings.giphy.enable %>
+ <a class="btn btn-action hidden-xs lcb-giphy" href="#lcb-giphy" title="<$ __('Giphy') $>" aria-label="<$ __('Giphy') $>" data-toggle="modal">
+ <i class="fa fa-gift"></i>
+ </a>
+ <% endif %>
+ </div>
+ <a class="btn btn-action lcb-room-toggle-sidebar" href="#">
+ <i class="fa fa-chevron-left" aria-label="<$ __('Toggle Sidebar') $>"></i>
+ </a>
</div>
- <% if settings.files.enable %>
- <div class="lcb-room-sidebar-group lcb-room-sidebar-files">
- <header class="lcb-room-sidebar-header">
- <h3 class="lcb-room-sidebar-heading">
- <i class="fa fa-file-text"></i> <$ __('Files') $>
- </h3>
- <button class="btn lcb-room-sidebar-files-add lcb-upload-trigger">
- <i class="fa fa-plus" aria-label="<$ __('Upload Files') $>"></i>
+ </header><!-- lcb-room-header end -->
+ <div class="lcb-room-main">
+ <div class="lcb-room-chat">
+ <ul class="lcb-messages" aria-live="polite"></ul>
+ <form class="lcb-entry">
+ <textarea class="lcb-entry-input" placeholder="<$ __('Got something to say?') $>" autofocus></textarea>
+ <button type="submit" class="lcb-entry-button" aria-label="<$ __('Send') $>">
+ <i class="fa fa-paper-plane"></i>
</button>
- </header>
- <ul class="lcb-room-sidebar-list"></ul>
- </div>
- <% endif %>
- </div><!-- lcb-room-sidebar end -->
+ </form>
+ </div><!-- lcb-chat end -->
+ <div class="lcb-room-sidebar">
+ <div class="lcb-room-sidebar-group lcb-room-sidebar-users">
+ <header class="lcb-room-sidebar-header">
+ <h3 class="lcb-room-sidebar-heading">
+ <i class="fa fa-users"></i> <$ __('Who\'s Here') $> (<span class="lcb-room-sidebar-items-count"></span>)
+ </h3>
+ </header>
+ <ul class="lcb-room-sidebar-list"></ul>
+ </div>
+ <% if settings.files.enable %>
+ <div class="lcb-room-sidebar-group lcb-room-sidebar-files">
+ <header class="lcb-room-sidebar-header">
+ <h3 class="lcb-room-sidebar-heading">
+ <i class="fa fa-file-text"></i> <$ __('Files') $>
+ </h3>
+ <button class="btn lcb-room-sidebar-files-add lcb-upload-trigger">
+ <i class="fa fa-plus" aria-label="<$ __('Upload Files') $>"></i>
+ </button>
+ </header>
+ <ul class="lcb-room-sidebar-list"></ul>
+ </div>
+ <% endif %>
+ </div><!-- lcb-room-sidebar end -->
+ </div>
<div class="edit-room modal fade lcb-room-edit">
<div class="modal-dialog">
<div class="modal-content">
@@ -79,41 +84,41 @@
</div>
<div class="modal-body">
<div class="form-group">
- <label class="control-label col-sm-4"><$ __('Name') $></label>
- <div class="col-sm-7">
+ <label class="control-label col-sm-6"><$ __('Name') $></label>
+ <div class="col-sm-11">
<input class="required name form-control" name=
"name" type="text" value="{{name}}">
</div>
</div>
<div class="form-group">
<label class=
- "control-label col-sm-4"><$ __('Description') $></label>
- <div class="col-sm-7">
+ "control-label col-sm-6"><$ __('Description') $></label>
+ <div class="col-sm-11">
<textarea class="form-control" name=
- "description">{{description}}</textarea>
+ "description" rows="5">{{description}}</textarea>
</div>
</div>
{{#if private}}
<div class="form-group">
<label class=
- "control-label col-sm-4"><$ __('Password') $></label>
- <div class="col-sm-7">
+ "control-label col-sm-6"><$ __('Password') $></label>
+ <div class="col-sm-11">
<input class="form-control" name=
"password" type="password" value="{{password}}">
</div>
</div>
<div class="form-group">
<label class=
- "control-label col-sm-4"><$ __('Confirm Password') $></label>
- <div class="col-sm-7">
+ "control-label col-sm-6"><$ __('Confirm Password') $></label>
+ <div class="col-sm-11">
<input class="form-control" name=
"confirmPassword" type="password" value="{{password}}">
</div>
</div>
<div class="form-group">
<label class=
- "control-label col-sm-4"><$ __('Participants') $></label>
- <div class="col-sm-7">
+ "control-label col-sm-6"><$ __('Participants') $></label>
+ <div class="col-sm-11">
<textarea class="form-control lcb-entry-participants" name=
"participants">{{participants}}</textarea>
</div>
@@ -122,7 +127,7 @@
<p class="response" style="display: none;"></p>
</div>
<div class="modal-footer">
- <button class="btn btn-success pull-right submit-edit-room" type=
+ <button class="btn btn-info pull-right submit-edit-room" type=
"submit">
<i class="icon-ok"></i> <$ __('Save') $>
</button>
generated by cgit v1.1 at 2025-05-17 15:04:32 +0000