feat: the folder properties button sits inside the path field

This commit is contained in:
redtea committed 2026-10-14 19:37:25 +03:00
1 parent 65359f5497
commit 21436d5c73
1 file changed
+9 -2
+9 -2
View File
@@ -17,6 +17,11 @@
background:#0c0f13; border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:#0c0f13; border:1px solid var(--border); border-radius:8px; padding:8px 12px;
flex:1; min-width:200px; height:34px; box-sizing:border-box; } flex:1; min-width:200px; height:34px; box-sizing:border-box; }
input.fm-path:focus { outline:none; border-color:var(--accent); color:var(--text); } input.fm-path:focus { outline:none; border-color:var(--accent); color:var(--text); }
/* The path field, with the folder's properties button inside it on the right. */
.fm-pathbox { position:relative; flex:1; min-width:200px; display:flex; }
.fm-pathbox input.fm-path { width:100%; min-width:0; padding-right:40px; }
.fm-bar .fm-pathbox .btn.sq { position:absolute; right:3px; top:3px; width:28px; height:28px; border:1px solid transparent; }
.fm-bar .fm-pathbox .btn.sq:hover { border-color:var(--border); background:#151a21; }
.spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); .spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent);
border-radius:50%; animation:spin .7s linear infinite; display:none; } border-radius:50%; animation:spin .7s linear infinite; display:none; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes spin { to { transform:rotate(360deg); } }
@@ -59,7 +64,7 @@
table.fm .c-act { width:1%; } table.fm .c-act { width:1%; }
table.fm td, table.fm th { padding:7px 4px; } table.fm td, table.fm th { padding:7px 4px; }
.ic { margin-right:4px; } .ic { margin-right:4px; }
.fm-bar input.fm-path { flex:1 1 100%; order:-1; } .fm-bar .fm-pathbox { flex:1 1 100%; order:-1; }
} }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--border); dialog { background:var(--panel); color:var(--text); border:1px solid var(--border);
border-radius:12px; padding:0; max-width:900px; width:92vw; } border-radius:12px; padding:0; max-width:900px; width:92vw; }
@@ -215,9 +220,11 @@
<div class="wrap" style="max-width:1100px"> <div class="wrap" style="max-width:1100px">
<div class="fm-bar"> <div class="fm-bar">
<button class="btn ghost small" id="up">↑ Вверх</button> <button class="btn ghost small" id="up">↑ Вверх</button>
<div class="fm-pathbox">
<input class="fm-path" id="path" value="/" spellcheck="false" autocapitalize="off" autocomplete="off"> <input class="fm-path" id="path" value="/" spellcheck="false" autocapitalize="off" autocomplete="off">
<button type="button" class="busy" id="busy" title=""><span class="spinner" id="spin"></span><span id="uppct"></span></button>
<button class="btn ghost small icon sq" id="dirprops" title="Свойства папки" aria-label="Свойства папки"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4"/></svg></button> <button class="btn ghost small icon sq" id="dirprops" title="Свойства папки" aria-label="Свойства папки"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4"/></svg></button>
</div>
<button type="button" class="busy" id="busy" title=""><span class="spinner" id="spin"></span><span id="uppct"></span></button>
<button class="btn ghost small" id="refresh">Обновить</button> <button class="btn ghost small" id="refresh">Обновить</button>
</div> </div>
<div class="fm-bar"> <div class="fm-bar">