Browse Source

separate results view for search

Andrew Dolgov 1 month ago
parent
commit
811cd8406e
4 changed files with 72 additions and 54 deletions
  1. 1 1
      css/default.css
  2. 52 42
      css/default.less
  3. 7 1
      index.php
  4. 12 10
      js/tt-irc.js

File diff suppressed because it is too large
+ 1 - 1
css/default.css


+ 52 - 42
css/default.less

@@ -59,7 +59,7 @@ div#errorBox textarea {
 		padding: 0px 0px 0px 4px;
 		overflow : hidden;
 	}
-	
+
 	.emoticon-preview {
 		position : absolute;
 		width : 30%;
@@ -117,7 +117,7 @@ div#errorBox textarea {
 		overflow : auto;
 		padding : 4px;
 	}
-	
+
 }
 
 #emoticons {
@@ -228,7 +228,7 @@ div#errorBox textarea {
 	span.conn-img.connected {
 		background : #B8F2B8;
 	}
-	
+
 	span.conn-img {
 		display : block;
 		vertical-align : middle;
@@ -243,11 +243,11 @@ div#errorBox textarea {
 		margin-top : 4px;
 		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
 	}
-	
+
 	li.selected span.close-img {
 		color : gray;
 	}
-	
+
 	span.close-img {
 		display : block;
 		vertical-align : middle;
@@ -259,7 +259,7 @@ div#errorBox textarea {
 		position : relative;
 		top : -2px;
 	}
-	
+
 	span.unread {
 		display : block;
 		float : right;
@@ -268,7 +268,7 @@ div#errorBox textarea {
 		font-weight : normal;
 		line-height : 21px;
 	}
-	
+
 	li {
 		font-family : @fonts-ui;
 		text-align : left;
@@ -282,33 +282,33 @@ div#errorBox textarea {
 		border: 1px solid transparent;
 		border-right-width: 0px;
 	}
-	
+
 	li.offline {
 		color : #aaa;
 	}
-	
+
 	li div {
 		overflow : hidden;
 		margin-right : 5px;
 	}
-	
+
 	li div.indented {
 		padding-left : 10px;
 		text-overflow : ellipsis;
 	}
-	
+
 	li.attention {
 		color : red;
 	}
-	
+
 	li.muted {
 		font-style : italic;
 	}
-	
+
 	li.highlight {
 		color : blue;
 	}
-	
+
 	li.selected {
 		color : black ! important;
 		background : @panel-bg;
@@ -370,7 +370,7 @@ body.main.active #tabs-list li.selected span.unread {
 		white-space : nowrap;
 		color : #555;
 	}
-	
+
 	#topic-input-real {
 		width : 100%;
 		height : 24px;
@@ -383,7 +383,7 @@ body.main.active #tabs-list li.selected span.unread {
 		position : absolute;
 		z-index : 2;
 	}
-	
+
 	#topic-input-real.expanded {
 		position : absolute;
 		height : 120px;
@@ -392,22 +392,34 @@ body.main.active #tabs-list li.selected span.unread {
 		transition: height 0.1s ease;
 		padding : 4px;
 	}
-	
+
 	#topic-input img {
 		max-height : 100%;
 		height : auto;
 		width : auto;
 	}
-	
+
 	#topic-input.disabled {
 		background : #f0f0f0;
 	}
-	
+
 	div.wrapper {
 		padding-right : 1px;
 	}
 }
 
+#search-results-box {
+	max-height : 300px;
+	overflow-y : auto;
+	margin-top : 8px;
+
+	ul {
+		list-style-type : none;
+		margin : 0px;
+		padding : 0px;
+	}
+}
+
 #log {
 	position : absolute;
 	top : 35px;
@@ -425,35 +437,35 @@ body.main.active #tabs-list li.selected span.unread {
 	  margin : 0px;
 	  padding : 0px;
 	}
-	
+
 	span.timestamp {
 		color : #999;
 	}
-	
+
 	span.pvt-sender, #log span.pvt-sender-out {
 		color : black;
 	}
-	
+
 	span.sender {
 		color : green;
 	}
-	
+
 	.lt, .gt {
 		color : blue;
 	}
-	
+
 	span.message {
 		color : black;
 	}
-	
+
 	span.sys-message {
 		color : @panel-border;
 	}
-	
+
 	span.action {
 		color : gray;
 	}
-	
+
 	.row {
 		border: 0px solid #ddd;
 		border-bottom-width: 1px;
@@ -487,7 +499,7 @@ body.main.active #tabs-list li.selected span.unread {
 		display : inline-block;
 		white-space : normal;
 		margin-right : 8px;
-		
+
 		img {
 			margin-right : 8px;
 			max-width : 96px;
@@ -531,23 +543,23 @@ body.main.active #tabs-list li.selected span.unread {
 	.row .sender {
 		white-space : nowrap;
 	}
-	
+
 	.row .timestamp {
 		padding-right : 3px;
 	}
-	
+
 	.row.HL { /*, .row.HL:nth-child(even) { */
 		background-color : #fff7d5;
 		border-color : #e7d796;
 	}
-	
+
 	/*.row:nth-child(even) {
 		background : #fafafa;
 	}  */
-	
+
 	.row.LV {
 		border-bottom: 1px dashed #ff3333;
-	}	
+	}
 }
 
 #userlist {
@@ -565,15 +577,15 @@ body.main.active #tabs-list li.selected span.unread {
 		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
 		background : #f0f0f0;
 	}
-	
+
 	span.user-img.voice {
 		background : #EDE4B6;
 	}
-	
+
 	span.user-img.op {
 		background : #B8F2B8;
 	}
-	
+
 }
 
 body.dark #log .message pre {
@@ -671,12 +683,12 @@ ul.scrollable {
 	li {
 		margin : 4px;
 	}
-	
+
 	li > input[type="checkbox"] {
 		margin-top : 0px;
 		margin-left : 4px;
 	}
-	
+
 	li > a {
 		vertical-align : middle;
 	}
@@ -704,13 +716,13 @@ ul.emoticons-long {
 		text-align : center;
 		cursor : pointer;
 	}
-	
+
 	.wrapper {
 		width : 48px;
 		height : 48px;
 		margin : 0 auto;
 	}
-	
+
 	.wrapper img {
 		max-width : 48px;
 		max-height : 48px;
@@ -740,5 +752,3 @@ ul.emoticons-long {
 #users-list {
 	height : 250px;
 }
-
-

+ 7 - 1
index.php

@@ -156,9 +156,15 @@
 							<button class="btn btn-default" type="button" data-toggle='modal' data-target='#searchBox' onclick="channel_search_clear()">Clear</button>
 						</span>
 					</div>
+
+					<div id="search-results-box" data-bind="with: activeChannel" >
+						<ul class="" data-bind="foreach: displaySearchResults()">
+							<li data-bind="html: format, attr: { rowid: $data.id, ident: $data.ident, ts: $data.unixts }, css: { _row: true, HL: is_hl, LV: is_lv }"> </li>
+						</ul>
+					</div>
 				</div>
 				<div class="modal-footer">
-					<button class="btn btn-primary" type="submit" data-toggle='modal' data-target='#searchBox'">
+					<button class="btn btn-primary" type="submit">
 						<?php echo __('Search') ?></button>
 					<button class="btn btn-default" data-toggle='modal' data-target='#searchBox'>
 						<?php echo __('Close') ?></button>

+ 12 - 10
js/tt-irc.js

@@ -99,12 +99,13 @@ const Connection = function(data) {
 	self.searchQuery = ko.observable("");
 
 	self.displayLines = ko.computed(function() {
+		return self.lines()
+			.slice(-BUFFER_MAX_LINES);
+	});
+
+	self.displaySearchResults = ko.computed(function() {
 		if (self.searchQuery())
 			return self.lines().filter((msg) => msg.message.match(self.searchQuery()))
-				.slice(-BUFFER_MAX_LINES);
-		else
-			return self.lines()
-				.slice(-BUFFER_MAX_LINES);
 	});
 
 	self.update = function(data) {
@@ -429,20 +430,21 @@ const Channel = function(connection_id, title, tab_type) {
 	self.history_requested = ko.observable(false);
 	self.searchQuery = ko.observable("");
 
-	self.displayLines = ko.computed(function() {
+	self.displaySearchResults = ko.computed(function() {
 		if (self.searchQuery()) {
 			const query = self.searchQuery().toLowerCase();
 
 			return self.lines().filter((msg) => (msg.sender() && msg.sender().toLowerCase().match(query)) ||
 					(msg.userhost() && msg.userhost().toLowerCase().match(query)) ||
-					msg.message().toLowerCase().match(query))
-				.slice(-BUFFER_MAX_LINES);
-		} else {
-			return self.lines()
-				.slice(-BUFFER_MAX_LINES);
+					msg.message().toLowerCase().match(query));
 		}
 	});
 
+	self.displayLines = ko.computed(function() {
+		return self.lines()
+			.slice(-BUFFER_MAX_LINES);
+	});
+
 	self.getHistory = function(offset) {
 		if (self.history_requested() || self.history_complete() || self.lines().length >= BUFFER_MAX_LINES)
 			return;