Переглянути джерело

[fileBrowser] Fix closable style, don't collapse folder by default when filtering

Clément Espeute 3 місяців тому
батько
коміт
babb419abf
4 змінених файлів з 34 додано та 45 видалено
  1. 9 14
      bin/style.css
  2. 16 24
      bin/style.less
  3. 5 3
      hide/comp/FancyClosable.hx
  4. 4 4
      hide/view/FileBrowser.hx

+ 9 - 14
bin/style.css

@@ -4478,7 +4478,8 @@ fancy-toolbar {
   padding-left: 0.25em;
   padding-right: 0.25em;
 }
-fancy-toolbar.shadow {
+fancy-toolbar.shadow,
+fancy-closable.shadow {
   position: relative;
   background-color: #272727;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
@@ -4973,19 +4974,6 @@ fancy-icon.fi-close {
 fancy-icon.fi-search {
   mask-image: url("res/icons/svg/search.svg");
 }
-fancy-closable {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #333;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
-  margin-bottom: 2px;
-  overflow: hidden;
-  height: 0px;
-}
-fancy-closable * {
-  box-sizing: border-box;
-}
 fancy-search {
   position: relative;
   flex: 1 1;
@@ -5426,3 +5414,10 @@ fancy-image {
 fancy-breadcrumbs fancy-breadcrumbs-separator {
   padding: 0.5em;
 }
+fancy-closable {
+  overflow: hidden;
+  height: 0px;
+}
+fancy-closable * {
+  box-sizing: border-box;
+}

+ 16 - 24
bin/style.less

@@ -5323,17 +5323,17 @@ fancy-toolbar {
 	padding-top: 2px;
 	padding-bottom: 2px;
 
-	&.shadow {
-		position: relative;
-		background-color: #272727;
-		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-		z-index: 1;
-	}
-
 	padding-left: 0.25em;
 	padding-right: 0.25em;
 }
 
+fancy-toolbar.shadow, fancy-closable.shadow {
+	position: relative;
+	background-color: #272727;
+	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+	z-index: 1;
+}
+
 fancy-button {
 	position: relative;
 	--size: 28px;
@@ -5943,22 +5943,6 @@ fancy-icon {
 	&.fi-search 			{ mask-image: url("res/icons/svg/search.svg"); }
 }
 
-fancy-closable {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	* {
-		box-sizing: border-box;
-	}
-
-	background-color: #333;
-	box-shadow: 1px 1px 1px rgba(0,0,0,0.33);
-	margin-bottom: 2px;
-
-	overflow: hidden;
-	height: 0px;
-}
 
 fancy-search {
 	position: relative;
@@ -6541,4 +6525,12 @@ fancy-breadcrumbs {
 	fancy-breadcrumbs-separator {
 		padding: 0.5em;
 	}
-}
+}
+
+fancy-closable {
+	* {
+		box-sizing: border-box;
+	}
+	overflow: hidden;
+	height: 0px;
+}

+ 5 - 3
hide/comp/FancyClosable.hx

@@ -9,14 +9,16 @@ class FancyClosable extends hide.comp.Component {
 
 	public override function new(parent: Element = null, target: Element = null) {
 		var el = new hide.Element('
-			<fancy-closable>
-				<fancy-button class="quieter close-btn"><fancy-icon class="medium fi-close"></fancy-icon></fancy-button>
+			<fancy-closable class="shadow">
+				<fancy-toolbar class="fancy-small">
+					<fancy-button class="quieter close-btn"><fancy-icon class="medium fi-close"></fancy-icon></fancy-button>
+				</fancy-toolbar>
 			</fancy-closable>
 		');
 		if (target != null) {
 			var children = target.children();
 			target.replaceWith(el);
-			children.insertBefore(el.children().first());
+			children.insertBefore(el.find("fancy-toolbar").children().first());
 		}
 		super(parent, el);
 

+ 4 - 4
hide/view/FileBrowser.hx

@@ -139,14 +139,14 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 
 			function rec(files: Array<FileEntry>) {
 				for (file in files) {
-					if (file.kind == Dir) {
+					if (file.kind == Dir && (collapseSubfolders || searchString.length > 0)) {
 						if (file.children == null) {
 							populateChildren(file);
 						}
 						rec(file.children);
 					}
 					else {
-						if (filterEnabled) {
+						if (filterEnabled && file.kind == File) {
 							var ext = file.name.split(".").pop().toLowerCase();
 
 							if (!exts.contains(ext)) {
@@ -212,11 +212,11 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 						</fancy-button>
 						<fancy-separator></fancy-separator>
 
-						<fancy-button class="btn-filter">
+						<fancy-button class="btn-filter" title="Filter file by type">
 							<span class="ico ico-filter"></span>
 						</fancy-button>
 
-						<fancy-button class="compact bnt-filter-dropdown">
+						<fancy-button class="compact bnt-filter-dropdown" title="Choose filters">
 							<span class="ico ico-chevron-down"></span>
 						</fancy-button>