Skip to content

Commit 30881fc

Browse files
committed
Improved desktop iconview (#51)
1 parent eee39dd commit 30881fc

File tree

2 files changed

+88
-22
lines changed

2 files changed

+88
-22
lines changed

src/adapters/ui/iconview.js

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,29 @@ const view = (fileIcon, themeIcon, droppable) => (state, actions) =>
4545
}
4646
});
4747
}
48-
}, state.entries.map(entry => {
48+
}, state.entries.map((entry, index) => {
4949
return h('div', {
50-
class: 'osjs-desktop-iconview__entry',
51-
oncontextmenu: ev => actions.openContextMenu({ev, entry}),
52-
ondblclick: ev => actions.openEntry({ev, entry})
50+
class: 'osjs-desktop-iconview__entry' + (
51+
state.selected === index
52+
? ' osjs-desktop-iconview__entry--selected'
53+
: ''
54+
),
55+
oncontextmenu: ev => actions.openContextMenu({ev, entry, index}),
56+
ondblclick: ev => actions.openEntry({ev, entry, index}),
57+
onclick: ev => actions.selectEntry({ev, entry, index})
5358
}, [
54-
h('img', {
55-
src: themeIcon(fileIcon(entry).name)
56-
}),
57-
h('span', {
58-
}, entry.filename)
59+
h('div', {
60+
class: 'osjs-desktop-iconview__entry__inner'
61+
}, [
62+
h('div', {
63+
class: 'osjs-desktop-iconview__entry__icon'
64+
}, h('img', {
65+
src: themeIcon(fileIcon(entry).name)
66+
})),
67+
h('div', {
68+
class: 'osjs-desktop-iconview__entry__label'
69+
}, entry.filename)
70+
])
5971
]);
6072
}));
6173

@@ -90,6 +102,10 @@ export class DesktopIconView extends EventEmitter {
90102
* @param {object} rect Rectangle from desktop
91103
*/
92104
resize(rect) {
105+
if (!this.$root) {
106+
return;
107+
}
108+
93109
this.$root.style.top = `${rect.top}px`;
94110
this.$root.style.left = `${rect.left}px`;
95111
this.$root.style.bottom = `${rect.bottom}px`;
@@ -116,6 +132,7 @@ export class DesktopIconView extends EventEmitter {
116132
.then(entries => this.iconview.setEntries(entries));
117133

118134
this.iconview = app({
135+
selected: -1,
119136
entries: []
120137
}, {
121138
setEntries: entries => ({entries}),
@@ -134,8 +151,12 @@ export class DesktopIconView extends EventEmitter {
134151
} else {
135152
this.core.open(entry);
136153
}
154+
155+
return {selected: -1};
137156
},
138157

158+
selectEntry: ({index}) => ({selected: index}),
159+
139160
uploadEntries: files => {
140161
// TODO
141162
},
@@ -146,12 +167,16 @@ export class DesktopIconView extends EventEmitter {
146167
copy(entry, dest)
147168
.then(reload)
148169
.catch(error);
170+
171+
return {selected: -1};
149172
},
150173

151174
removeEntry: entry => {
152175
unlink(entry)
153176
.then(reload)
154177
.catch(error);
178+
179+
return {selected: -1};
155180
}
156181
}, view(fileIcon, themeIcon, droppable), this.$root);
157182

src/styles/_iconview.scss

Lines changed: 54 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,69 @@
3232
position: absolute;
3333
top: 0;
3434
right: 0;
35-
width: 100%;
36-
height: 100%;
35+
bottom: 0;
36+
left: 0;
3737

3838
&__wrapper {
3939
position: absolute;
40-
top: 0;
41-
right: 0;
42-
width: 100%;
43-
height: 100%;
40+
top: 1em;
41+
left: 1em;
42+
width: calc(100% - 2em);
43+
height: calc(100% - 2em);
44+
vertical-align: top;
4445
}
4546

4647
&__entry {
47-
width: 3em;
48-
height: 3em;
49-
display: inline-block;
50-
margin: 1em;
48+
$self: &;
5149

52-
& > span {
53-
display: block;
54-
overflow: hidden;
50+
display: inline-flex;
51+
position: relative;
52+
z-index: 1;
53+
text-align: center;
54+
overflow: hidden;
55+
margin: 0.5em;
56+
width: 5em;
57+
height: 6.5em;
58+
59+
&__inner {
60+
width: 100%;
61+
min-height: 100%;
62+
}
63+
64+
&__icon {
65+
flex-grow: 1;
66+
height: 4.5em;
67+
width: 100%;
68+
padding: 0.5em;
69+
box-sizing: border-box;
70+
}
71+
72+
&__label {
5573
height: 1em;
74+
width: 100%;
75+
box-sizing: border-box;
76+
line-height: 1;
77+
overflow: hidden;
5678
text-align: center;
79+
word-break: break-all;
80+
text-overflow: ellipsis;
81+
}
82+
83+
&--selected {
84+
z-index: 2;
85+
overflow: visible;
86+
87+
#{ $self }__icon {
88+
background-color: rgba(0, 0, 200, 0.9);
89+
}
90+
91+
#{ $self }__label {
92+
padding: 0 0.5em 0.5em 0.5em;
93+
background-color: rgba(0, 0, 200, 0.9);
94+
color: #fff;
95+
overflow: visible;
96+
height: auto;
97+
}
5798
}
5899
}
59100
}

0 commit comments

Comments
 (0)