Updates for NodeBB 1.8.0

pichalite · Mar 23, 2018 · c9837c4 · c9837c4
1 parent 98e963f
commit c9837c4
Show file tree

Hide file tree

Showing 16 changed files with 215 additions and 55 deletions.
diff --git a/less/chat.less b/less/chat.less
@@ -109,6 +109,10 @@
 			  	cursor: pointer;
 			}
 
+			&.bg-info {
+				background: @chat-active-bg-color;
+			}
+
 			.status {
 				width: 12px;
 				height: 12px;
@@ -309,6 +313,13 @@
 		  		width: 50px;
 		  	}
 		}
+
+		[component="chat/message/remaining"] {
+			position: absolute;
+			right: 3.25em;
+			z-index: 2;
+			bottom: 10px;
+		}
 	}
 
 	.lv-avatar {
@@ -544,7 +555,7 @@
 
 	.lv-message .lv-item {
 
-		padding: 1px 0;
+		padding: 1px 5px;
 
 		&.right {
 			text-align: right;
@@ -675,7 +686,7 @@
 	    padding: 5px 10px;
 
 	    .close {
-	        margin-top: 10px;
+	        margin-top: 5px;
 	        padding: 0 10px;
 	        font-size: 18px;
 	        text-shadow: none;
@@ -702,6 +713,10 @@
 		&:hover {
 			cursor: pointer;
 		}
+
+		img {
+	    	.user-avatar(35px);
+		}
 	}
 }
 
@@ -720,7 +735,7 @@
 
 			.modal-content {
 				.modal-header {
-					padding: 5px;
+					padding: 15px 5px;
 
 					.users-tag-container {
 						max-width: ~"calc(100% - 75px)";
@@ -736,11 +751,20 @@
 					}
 
 					.chat-footer {
+						display: flex;
 						padding-top: 10px;
 						background-color: @chat-footer-bg-color;
 
-						#chat-message-send-btn:hover {
-							background-color: initial;
+						[component="chat/input"] {
+							padding-bottom: 10px;
+						}
+
+						[component="chat/message/remaining"] {
+							position: absolute;
+							right: 4.5em;
+							z-index: 2;
+							bottom: 10px;
+							color: #aaa;
 						}
 					}
 				}

diff --git a/less/skins.less b/less/skins.less
@@ -120,6 +120,7 @@ body {
         //input
         .form-control {
         	border-bottom: @form-control-border-dark;
+        	color: @body-color-dark;
         }
 
         .fg-line {
@@ -432,6 +433,10 @@ body {
         			  	background: @chat-active-bg-color-dark;
         			  	cursor: pointer;
         			}
+
+        			&.bg-info {
+        			    background: @chat-active-bg-color-dark;
+        			}
         		}
         	}
 

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "nodebb-theme-material",
   "version": "2.11.9",
   "nbbpm": {
-    "compatibility": "^1.7.0"
+    "compatibility": "^1.8.0"
   },
   "description": "Material Design theme for NodeBB",
   "main": "theme.less",

diff --git a/templates/account/edit.tpl b/templates/account/edit.tpl
@@ -64,12 +64,14 @@
 							</div>
 						</div>
 
+						<!-- IF allowWebsite -->
 						<div class="form-group">
 							<div class="fg-line">
 								<label>[[user:website]]</label>
 								<input class="form-control" type="text" id="inputWebsite" value="{website}">
 							</div>
 						</div>
+						<!-- ENDIF allowWebsite -->
 
 						<div class="form-group">
 							<div class="fg-line">
@@ -99,13 +101,16 @@
 							</div>
 						</div>
 
+						<!-- IF allowAboutMe -->
 						<div class="form-group">
 							<div class="fg-line">
 								<label>[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
 								<textarea class="form-control" id="inputAboutMe" rows="5">{aboutme}</textarea>
 							</div>
 						</div>
+						<!-- ENDIF allowAboutMe -->
 
+						<!-- IF allowSignature -->
 						<!-- IF !disableSignatures -->
 						<div class="form-group">
 							<div class="fg-line">
@@ -114,6 +119,7 @@
 							</div>
 						</div>
 						<!-- ENDIF !disableSignatures -->
+						<!-- ENDIF allowSignature -->
 
 						<input type="hidden" id="inputUID" value="{uid}"><br />
 

diff --git a/templates/account/settings.tpl b/templates/account/settings.tpl
@@ -296,6 +296,27 @@
 	            </div>
 	        </div>
 
+	        <!-- IF isAdmin -->
+	        <!-- IF isSelf -->
+	        <div class="card">
+	            <div class="card-header">
+	            	[[user:acp_language]]
+	            </div>
+	            <div class="card-body card-padding">
+	            	<div class="form-group fg-line">
+		            	<div class="select">
+							<select data-property="acpLang" class="form-control">
+								<!-- BEGIN acpLanguages -->
+								<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
+								<!-- END acpLanguages -->
+							</select>
+						</div>
+					</div>
+	            </div>
+	        </div>
+	        <!-- ENDIF isSelf -->
+	        <!-- ENDIF isAdmin -->
+
 			<!-- BEGIN customSettings -->
 			<div class="card">
 				<div class="card-header">

diff --git a/templates/chat.tpl b/templates/chat.tpl
@@ -1,26 +1,56 @@
-<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none" data-name="{roomName}">
 	<div class="modal-dialog">
 		<div class="modal-content listview lv-message">
 			<div class="modal-header">
 				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
 				<button type="button" class="close" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
- 				<div class="users-tag-container inline-block">
- 					<input class="users-tag-input form-control" type="text" placeholder="enter users here" tabindex="4"/>
- 				</div>
+				<div class="dropdown pull-right">
+					<button class="close" data-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
+					<ul class="dropdown-menu dropdown-menu-right pull-right" component="chat/controls">
+						<!-- IF users.length -->
+						<li class="dropdown-header">[[modules:chat.in-room]]</li>
+						<!-- BEGIN users -->
+						<li>
+							<a href="{config.relative_path}/uid/{../uid}">
+								<!-- IF ../picture -->
+								<img class="avatar avatar-sm" component="user/picture" src="{../picture}" itemprop="image" />
+								<!-- ELSE -->
+								<div class="avatar avatar-sm" component="user/picture" style="background-color: {../icon:bgColor};">{../icon:text}</div><!-- END -->{../username}
+							</a>
+						</li>
+						<!-- END -->
+						<li role="separator" class="divider"></li>
+						<!-- END -->
+						<li class="dropdown-header">[[modules:chat.options]]</li>
+						<li>
+							<a href="#" data-action="members"><i class="fa fa-fw fa-plus"></i> [[modules:chat.add-users-to-room]]</a>
+						</li>
+						<li>
+							<a href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
+						</li>
+						<li>
+							<a href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
+						</li>
+					</ul>
+				</div>
+
+				<h4 component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></h4>
 			</div>
 			<div class="modal-body">
 				<ul class="chat-content lv-body" component="chat/messages">
 					<!-- IMPORT partials/chats/messages.tpl -->
 				</ul>
 
-				<div class="chat-footer input-group">
+				<div component="chat/composer" class="chat-footer">
 					<div class="fg-line">
-						<textarea component="chat/input" id="chat-message-input" rows="1" placeholder="[[modules:chat.placeholder]]" name="chat-message" class="form-control" <!-- IF !canReply -->readonly<!-- ENDIF !canReply -->></textarea>
+						<textarea component="chat/input" rows="1" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap"></textarea>
 					</div>
-					<div class="input-group-btn">
-						<button id="chat-message-send-btn" class="btn btn-link btn-primary" href="#" type="button" <!-- IF !canReply -->disabled<!-- ENDIF !canReply -->>[[modules:chat.send]]</button>
+					<div>
+						<button class="btn btn-sm btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 					</div>
+					<span component="chat/message/remaining">{maximumChatMessageLength}</span>
 				</div>
+
 			</div>
 		</div>
 	</div>

diff --git a/templates/chats.tpl b/templates/chats.tpl
@@ -1,7 +1,7 @@
-<div class="chats">
+<div class="chats chats-full">
     <!-- IMPORT partials/breadcrumbs.tpl -->
     <div class="card chat-card" id="messages-main">
-        <div class="ms-menu">
+        <div component="chat/nav-wrapper" data-loaded="<!-- IF roomId -->1<!-- ELSE -->0<!-- END -->" class="ms-menu">
             <div class="listview lv-message hidden-xs">
                 <div class="lv-header-alt clearfix">
                     <div class="new-chat pull-left" title="New Chat">

diff --git a/templates/footer.tpl b/templates/footer.tpl
@@ -4,6 +4,7 @@
 	<!-- IMPORT 500-embed.tpl -->
 	</div>
 
+	<!-- IF !isSpider -->
 	<div class="topic-search hidden">
 		<div class="btn-group">
 			<button type="button" class="btn btn-default count"></button>
@@ -18,6 +19,7 @@
 			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
 		</div>
 	</div>
+	<!-- ENDIF !isSpider -->
 
 	<script defer src="{relative_path}/assets/nodebb.min.js?{config.cache-buster}"></script>
 

diff --git a/templates/partials/account/menu.tpl b/templates/partials/account/menu.tpl
@@ -9,7 +9,6 @@
 		<!-- IF showHidden -->
 		<li><a href="{config.relative_path}/user/{userslug}/settings"><i class="fa fa-fw fa-edit"></i> [[user:settings]]</a></li>
 		<li><a href="{config.relative_path}/user/{userslug}/edit"><i class="fa fa-fw fa-gear"></i> [[user:edit]]</a></li>
-		<li><a href="{config.relative_path}/user/{userslug}/info"><i class="fa fa-fw fa-lock"></i> [[user:account_info]]</a></li>
 		<!-- ENDIF showHidden -->
 
 		<!-- IF !isSelf -->
@@ -53,7 +52,7 @@
 		<!-- IF @first -->
   		<li class="divider"></li>
 		<!-- ENDIF @first -->
-		<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a href="{config.relative_path}/user/{userslug}/{profile_links.route}"><i class="fa fa-fw {profile_links.icon}"></i> {profile_links.name}</a></li>
+		<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a href="{config.relative_path}/user/{userslug}/{profile_links.route}"><!-- IF ../icon --><i class="fa fa-fw {profile_links.icon}"></i> <!-- END -->{profile_links.name}</a></li>
 		<!-- END profile_links -->
 	</ul>
 </div>
diff --git a/templates/partials/chats/message-window.tpl b/templates/partials/chats/message-window.tpl
@@ -1,7 +1,7 @@
 <!-- IF roomId -->
 <div component="chat/messages" data-roomid="{roomId}">
     <div class="listview lv-message">
-        <div class="lv-header-alt clearfix">
+        <div component="chat/header" class="lv-header-alt clearfix">
             <div id="ms-menu-trigger">
                 <div class="line-wrap">
                     <div class="line top"></div>
@@ -10,26 +10,57 @@
                 </div>
             </div>
 
-            <div class="lvh-label hidden-xs">
-                <div class="users-tag-container">
- 			        <input class="users-tag-input form-control" type="text" placeholder="enter users here" tabindex="4"/>
- 		        </div>
-            </div>
-
-            <div class="lv-actions actions">
-                <div data-action="pop-out">
+            <ul class="lv-actions actions">
+                <li class="dropdown">
+                    <span data-toggle="dropdown" component="chat/controlsToggle" aria-expanded="true"><i class="fa fa-cog"></i></span>
+                    <ul class="dropdown-menu dropdown-menu-right pull-right" component="chat/controls">
+        				<!-- IF users.length -->
+        				<li class="dropdown-header">[[modules:chat.in-room]]</li>
+        				<!-- BEGIN users -->
+        				<li>
+        					<a href="{config.relative_path}/uid/{../uid}">
+        						<!-- IF ../picture -->
+        						<img class="avatar avatar-sm" component="user/picture" src="{../picture}" itemprop="image" />
+        						<!-- ELSE -->
+        						<div class="avatar avatar-sm" component="user/picture" style="background-color: {../icon:bgColor};">{../icon:text}</div><!-- END -->{../username}
+        					</a>
+        				</li>
+        				<!-- END -->
+        				<li role="separator" class="divider"></li>
+        				<!-- END -->
+        				<li class="dropdown-header">[[modules:chat.options]]</li>
+        				<li>
+        					<a href="#" data-action="members"><i class="fa fa-fw fa-plus"></i> [[modules:chat.add-users-to-room]]</a>
+        				</li>
+        				<li>
+        					<a href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
+        				</li>
+        				<li>
+        					<a href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
+        				</li>
+        			</ul>
+                </li>
+                <li data-action="pop-out">
                     <i class="fa fa-compress"></i>
-                </div>
-            </div>
+                </li>
+            </ul>
+
+            <span class="members">
+    			[[modules:chat.chatting_with]]:
+    			<!-- BEGIN users -->
+    			<a href="{config.relative_path}/uid/{../uid}">{../username}</a><!-- IF !@last -->,<!-- END -->
+    			<!-- END -->
+    		</span>
         </div>
 
         <ul class="lv-body chat-content">
             <!-- IMPORT partials/chats/messages.tpl -->
         </ul>
 
-        <div class="lv-footer ms-reply">
+        <div component="chat/composer" class="lv-footer ms-reply">
             <textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="chat-input" <!-- IF !canReply -->readonly<!-- ENDIF !canReply -->></textarea>
             <button data-action="send" <!-- IF !canReply -->disabled<!-- ENDIF !canReply -->><i class="fa fa-send"></i></button>
+            <span component="chat/message/remaining">{maximumChatMessageLength}</span>
         </div>
     </div>
 </div>

diff --git a/templates/partials/chats/recent_room.tpl b/templates/partials/chats/recent_room.tpl
@@ -1,5 +1,4 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="lv-item media <!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
-    <i class="fa fa-times pull-right leave" component="chat/leave"></i>
     <!-- IF rooms.lastUser.uid -->
 	<div class="lv-avatar pull-left" data-username="{rooms.lastUser.username}" data-uid="{rooms.lastUser.uid}">
 		<!-- IF rooms.lastUser.picture -->
@@ -8,12 +7,11 @@
 		<div class="user-icon" style="background-color: {rooms.lastUser.icon:bgColor};">{rooms.lastUser.icon:text}</div>
 		<!-- ENDIF rooms.lastUser.picture -->
 	</div>
-    <span title="[[global:{rooms.lastUser.status}]]" class="status {rooms.lastUser.status}"></span>
+
     <!-- ELSE -->
     [[modules:chat.no-users-in-room]]
     <!-- ENDIF rooms.lastUser.uid -->
     <div class="media-body">
-        <span class="lv-title">{rooms.usernames}</span>
-	    <span class="lv-small">{rooms.teaser.user.username}: {rooms.teaser.content}</span>
+        <span component="chat/title" class="lv-title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
     </div>
 </li>