Merge pull request #472 from zoff-music/feature/playlist-search-button

Added button for searching in channel

server/public/assets/css/style.css

@@ -372,6 +372,14 @@ li.disabled span {
     width: 215px;
 }
 
+.playlist-search-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    cursor: pointer;
+}
+
 .extra-button{
     margin: 0 4px !important;
     padding: 0px !important;
@@ -1152,7 +1160,7 @@ margin:-1px;
     position: absolute;
     background: #282828;
     z-index: 2;
-    width: calc(100% - 22px);
+    width: calc(100% - 18px);
     padding: 0 15px;
     top: 0;
     color: white;

server/public/assets/js/listeners.js

@@ -678,6 +678,17 @@ function addDynamicListeners() {
         document.getElementsByClassName("context-menu-root")[0].setAttribute("data-id", "");
     });
 
+    addListener("click", ".playlist-search-button", function(e) {
+        this.preventDefault();
+        Helper.toggleClass("#find_div", "hide");
+        document.getElementById("find_input").value = "";
+        document.getElementById("find_input").blur();
+        Helper.removeClass(".highlight", "highlight");
+        found_array = [];
+        found_array_index = 0;
+        find_word = "";
+    });
+
     addListener("click", ".delete-context-menu", function(e) {
         var that = e;
         if(that.classList.contains("context-menu-disabled")) {

server/public/partials/channel/tabs.handlebars

@@ -4,6 +4,11 @@
         <li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
         <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested<span class="new badge white hide suggested-badge"></span></a></li>
         <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat-container">Chat<span class="new badge white hide"></span></a></li>
+        <a href="#" class="playlist-search-button">
+            <li class="">
+                <i class="material-icons">search</i>
+            </li>
+        </a>
     </ul>
     {{/unless}}
     <div id="find_div" class="hide">