Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

Commit1e21d1c

Browse files
committed
[feat] hover styles and inline actions for file tree
1 parentf7300bd commit1e21d1c

File tree

5 files changed

+195
-10
lines changed

5 files changed

+195
-10
lines changed

‎src/routes/tutorial/[slug]/File.svelte‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,31 @@
7272
</script>
7373

7474
{#if!editing}
75-
<button
76-
class:selected={file===$selected}
77-
on:click={()=>select(file)}
78-
on:contextmenu|preventDefault={open_menu}
79-
>
80-
{file.basename}
81-
</button>
75+
<divclass="file-row">
76+
<divclass="file-highlight" />
77+
<button
78+
class:selected={file===$selected}
79+
on:click={()=>select(file)}
80+
on:contextmenu|preventDefault={open_menu}
81+
>
82+
{file.basename}
83+
</button>
84+
<divclass="file-actions">
85+
{#ifcan_create&&can_remove}
86+
<button
87+
aria-label="Rename"
88+
class="icon rename"
89+
on:click={()=> {
90+
new_name=file.basename;
91+
editing=true;
92+
}}
93+
/>
94+
{/if}
95+
{#ifcan_remove}
96+
<buttonaria-label="Delete"class="icon delete"on:click={()=>remove(file)} />
97+
{/if}
98+
</div>
99+
</div>
82100
{:else}
83101
<!-- svelte-ignore a11y-autofocus -->
84102
<inputtype="text"autofocusbind:value={new_name}on:blur={done}on:keyup={done} />
@@ -118,4 +136,51 @@
118136
outline:none;
119137
border:2pxsolidvar(--flash);
120138
}
139+
140+
.file-row {
141+
position:relative;
142+
height:2.5rem;
143+
z-index:1;
144+
}
145+
146+
.file-actions {
147+
position:absolute;
148+
right:0;
149+
top:0;
150+
display:none;
151+
background-color:var(--back-light);
152+
}
153+
.file-row:hover.file-actions {
154+
display:block;
155+
}
156+
157+
.file-highlight {
158+
display:none;
159+
position:absolute;
160+
right:-10rem;
161+
left:-20rem;
162+
height:2.5rem;
163+
background:var(--back-light);
164+
z-index:-1;
165+
}
166+
.file-row:hover.file-highlight {
167+
display:block;
168+
}
169+
170+
.icon {
171+
margin-top:0.2rem;
172+
height:2.5rem;
173+
width:1.5rem;
174+
padding:0;
175+
background-size:1.4rem1.4rem;
176+
background-repeat:no-repeat;
177+
}
178+
179+
.rename {
180+
background-image:url(./file-edit.svg);
181+
}
182+
183+
.delete {
184+
background-image:url(./delete.svg);
185+
}
121186
</style>

‎src/routes/tutorial/[slug]/Folder.svelte‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,39 @@
117117
</script>
118118

119119
{#ifstate!=='edit_folder'}
120-
<buttondata-folderclass:expandedon:click={toggle}on:contextmenu|preventDefault={open_menu}
121-
>{name}</button
122-
>
120+
<divclass="folder-row">
121+
<divclass="folder-highlight" />
122+
<buttondata-folderclass:expandedon:click={toggle}on:contextmenu|preventDefault={open_menu}
123+
>{name}</button
124+
>
125+
<divclass="folder-actions">
126+
{#ifcan_create}
127+
<buttonaria-label="New file"class="icon file-new"on:click={()=> (state='add_file')} />
128+
<button
129+
aria-label="New folder"
130+
class="icon folder-new"
131+
on:click={()=> (state='add_folder')}
132+
/>
133+
{/if}
134+
{#ifcan_create&&can_remove}
135+
<button
136+
aria-label="Rename"
137+
class="icon rename"
138+
on:click={()=> {
139+
new_name=name;
140+
state='edit_folder';
141+
}}
142+
/>
143+
{/if}
144+
{#ifcan_remove}
145+
<button
146+
aria-label="Delete"
147+
class="icon delete"
148+
on:click={()=>remove(/**@type{import('$lib/types').DirectoryStub}*/ (file))}
149+
/>
150+
{/if}
151+
</div>
152+
</div>
123153
{/if}
124154

125155
{#ifstate==='edit_folder'}
@@ -206,4 +236,56 @@
206236
li {
207237
padding:0;
208238
}
239+
240+
.folder-row {
241+
position:relative;
242+
height:2.5rem;
243+
z-index:1;
244+
}
245+
246+
.folder-actions {
247+
position:absolute;
248+
right:0;
249+
top:0;
250+
display:none;
251+
background-color:var(--back-light);
252+
}
253+
.folder-row:hover.folder-actions {
254+
display:block;
255+
}
256+
257+
.folder-highlight {
258+
display:none;
259+
position:absolute;
260+
right:-10rem;
261+
left:-20rem;
262+
height:2.5rem;
263+
background:var(--back-light);
264+
z-index:-1;
265+
}
266+
.folder-row:hover.folder-highlight {
267+
display:block;
268+
}
269+
270+
.icon {
271+
height:2.5rem;
272+
width:1.5rem;
273+
padding:0;
274+
}
275+
276+
.rename {
277+
background-image:url(./file-edit.svg);
278+
}
279+
280+
.file-new {
281+
background-image:url(./plus.svg);
282+
}
283+
284+
.folder-new {
285+
background-image:url(./folder-new.svg);
286+
}
287+
288+
.delete {
289+
background-image:url(./delete.svg);
290+
}
209291
</style>
Lines changed: 14 additions & 0 deletions
Loading
Lines changed: 13 additions & 0 deletions
Loading
Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp