fix: disable select text when double click

ElonH · Jun 6, 2020 · be3d365 · be3d365
1 parent 380b46e
commit be3d365
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/app/pages/manager/breadcrumb/breadcrumb.component.ts b/src/app/pages/manager/breadcrumb/breadcrumb.component.ts
@@ -5,7 +5,7 @@ import { NavigationFlow, NavigationFlowOutNode } from '../../../@dataflow/extra'
 	selector: 'app-manager-breadcrumb',
 	template: `
 		<!-- <nav> -->
-		<ol class="breadcrumb">
+		<ol class="breadcrumb rng-noselect">
 			<li class="breadcrumb-item">
 				<a (click)="jump.emit({})"> <nb-icon icon="home-outline"></nb-icon> </a>
 			</li>

diff --git a/src/app/pages/manager/fileMode/listView/listView.component.ts b/src/app/pages/manager/fileMode/listView/listView.component.ts
@@ -51,10 +51,10 @@ import { ClipboardService } from '../../clipboard/clipboard.service';
 					></nb-icon>
 				</td>
 				<td style="padding: 0;"><img [src]="'assets/icons/' + row.TypeIcon" /></td>
-				<td>{{ row.Name }}</td>
-				<td>{{ row.SizeHumanReadable }}</td>
-				<td>{{ row.ModTimeHumanReadable }}</td>
-				<td>{{ row.MimeType }}</td>
+				<td class="rng-noselect">{{ row.Name }}</td>
+				<td class="rng-noselect">{{ row.SizeHumanReadable }}</td>
+				<td class="rng-noselect">{{ row.ModTimeHumanReadable }}</td>
+				<td class="rng-noselect">{{ row.MimeType }}</td>
 			</ng-template>
 		</ngx-table>
 	`,

diff --git a/src/app/pages/manager/homeMode/remote.component.ts b/src/app/pages/manager/homeMode/remote.component.ts
@@ -7,7 +7,7 @@ import { Component, Input, OnInit } from '@angular/core';
 			<tr>
 				<td rowspan="2" style="padding-right: 1rem;"><nb-icon icon="hard-drive"></nb-icon></td>
 				<td [attr.rowspan]="easyMode ? 2 : 1" style="width: 100%;">
-					<p>{{ title }}</p>
+					<p class="rng-noselect">{{ title }}</p>
 				</td>
 			</tr>
 			<ng-container *ngIf="!easyMode">

diff --git a/src/styles.scss b/src/styles.scss
@@ -2,8 +2,17 @@
 @import '~@nebular/theme/styles/globals';
 @import '~nebular-icons/css/nebular-icons.css';
 @import '~bootstrap/dist/css/bootstrap.min.css';
-@import "~ngx-easy-table/style.scss";
+@import '~ngx-easy-table/style.scss';
 
 @include nb-install() {
 	@include nb-theme-global();
 }
+
+.rng-noselect {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+}