Added menu for filtering by staff chat, mentions and media.

musiqpad · May 13, 2016 · d0166e3 · d0166e3
1 parent f32a597
commit d0166e3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/webserver/public/index.html b/webserver/public/index.html
@@ -591,7 +591,13 @@
 					<div class="tray">
 						<div data-ng-click="prop.ci = 1; filterChat()" data-ng-class="{'active' : prop.ci == 1}" class="tab btn-mainchat" title="Chat"><div class="mdi mdi-message"></div></div>
 						<div data-ng-click="pmFuncs.changeToPMTab()" data-ng-class="{'active' : prop.ci == 2}" class="tab btn-pm" title="Private Messages" data-ng-show="isLoggedIn && checkPerm('chat.private')"><div class="mdi mdi-message-text"></div><span class="icon-info" data-ng-show="getPMUnread() > 0" data-ng-bind="getPMUnread()"></span></div>
-						<div data-ng-click="prop.ci = 3; filterChat('mentions')" data-ng-class="{'active' : prop.ci == 3}" class="tab btn-mentions" title="Mentions" data-ng-show="isLoggedIn"><span class="icon-info">@</span></div>
+						<div data-ng-click="prop.ci = 3; filterChat(filters[activeFilter].filterType)" data-ng-class="{'active' : prop.ci == 3}" class="tab-menu btn-mentions btn-{{filters[activeFilter].filterType}}" title="{{filters[activeFilter].name}}" data-ng-show="isLoggedIn">
+							<div class="{{filters[activeFilter].classes}}"><span class="icon-info" data-ng-show="filters[activeFilter].text && filters[activeFilter].text != ''" data-ng-bind="filters[activeFilter].text"></span></div>
+							<div class="chat-filter-menu">
+								<div data-ng-repeat="filter in filters" data-ng-show="filter.show()" data-ng-click="setFilter(filter.index)" data-ng-class="{'active' : prop.ci == 3 && activeFilter == filter.index}" class="tab btn-{{filter.filterType}}" title="{{filter.name}}" data-ng-show="isLoggedIn"><div class="{{filter.classes}}"><span class="icon-info" data-ng-show="filter.text && filter.text != ''" data-ng-bind="filter.text"></span></div></div>
+								<!--<div data-ng-click="prop.ci = 4; filterChat('staff')" data-ng-class="{'active' : prop.ci == 4, 'hidden' : prop.ci > 3}" class="tab btn-mentions" title="Mentions" data-ng-show="isLoggedIn"><span class="icon-info">@</span></div>-->
+							</div>
+						</div>
 					</div>
 					<div data-ng-show="(prop.ci == 1 || prop.ci == 3)" id="chat-container">
 						<div id="chat">
@@ -601,7 +607,7 @@
 							<div class="more-messages-indicator hidden">
 								More messages below.
 							</div>
-							<input id="msg-in" type="text" maxlength="255" placeholder="Type message and hit enter" autocomplete="off" data-ng-show="isLoggedIn"></input>
+							<input id="msg-in" type="text" ng-class="{'msg-staffchat': filters[activeFilter].filterType == 'staff' && prop.ci == 3}" maxlength="255" placeholder="Type message and hit enter" autocomplete="off" data-ng-show="isLoggedIn"></input>
 						</div>
 					</div>
 					<div data-ng-show="(prop.ci == 2 && isLoggedIn)" id="pm-container">
@@ -617,7 +623,7 @@
 												<span class="pm-info ng-binding" data-ng-bind="(pmFuncs.getPMGroupInfo(pmgroup).lastPM.from == user.uid ? user.un : pmgroup.user.un)"></span>
 												<span class="umsg" ng-bind-html="emojiReplace(pmFuncs.getPMGroupInfo(pmgroup).lastPM.message) | to_trusted"></span>
 											</div>
-										</div>									
+										</div>
 								</div>
 						</div>
 						<div class="btn btn-inner-pm btn-new-pm">New Message</div>

diff --git a/webserver/public/lib/css/chat.css b/webserver/public/lib/css/chat.css
@@ -23,6 +23,11 @@
     word-break: break-word;
     word-wrap: break-word;
 }
+#msg-in.msg-staffchat {
+    background: #1C1C1F url(https://i.imgur.com/LN95YWu.png) no-repeat scroll 7px 7px;
+    padding-left: 60px;
+    width: calc(100% - 70px);
+}
 #app-right .tray {
     position:absolute;
     top:0;
@@ -355,12 +360,12 @@
     border-top: 1px solid #444A59;
 	padding: 5px 0;
 }
-.tab.btn-mentions {
+.tab.btn-mentions, .tab-menu.btn-mentions {
     flex: 0.5;
     -webkit-flex: 0.5;
     -ms-flex: 0.5;
 }
-.tab.btn-mentions .icon-info {
+.tab.btn-mentions .icon-info, .tab-menu.btn-mentions .icon-info {
     font-size: 16px;
     border-radius: 16px;
     padding-bottom: 4px;
@@ -383,7 +388,7 @@
   margin: 0;
 }
 
-@keyframes flash-background {  
+@keyframes flash-background {
     from { background: rgba(244, 107, 64, .25); }
     to { background: default; }
 }

diff --git a/webserver/public/lib/css/dash.css b/webserver/public/lib/css/dash.css
@@ -117,7 +117,20 @@
     border-bottom: 3px solid #A77DC2;
     background: rgba(167,125,194,0.2);
 }
-.tab {
+.chat-filter-menu {
+    display: none;
+    background: rgba(10, 10, 10, 0.9);
+    border-right: 1px solid #444A59;
+    border-bottom: 1px solid #444A59;
+    border-left: 1px solid #444A59;
+}
+.tab-menu .tab {
+    border-top: 1px solid #444A59;
+}
+.tab-menu:hover .chat-filter-menu {
+    display: block;
+}
+.tab, .tab-menu {
     font-size: 16px;
     line-height: 40px;
     vertical-align: middle;
@@ -127,15 +140,15 @@
     color: #94959A;
     flex: 1;
     -webkit-flex: 1; /* Safari 6.1+ */
-    -ms-flex: 1; /* IE 10 */ 
+    -ms-flex: 1; /* IE 10 */
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
 }
-.tab.short {
+.tab.short, .tab-menu.short {
     flex: .5;
     -webkit-flex: .5; /* Safari 6.1+ */
-    -ms-flex: .5; /* IE 10 */ 
+    -ms-flex: .5; /* IE 10 */
 }
 .settings-tray {
     position:absolute;
@@ -275,7 +288,7 @@
 .btn-video {
     display:none;
 }
-.tab {
+.tab, .tab-menu {
     width: calc(25% - 1px);
 }
-}
+}