Skip to content

Commit 85355f7

Browse files
authored
[full-ci] Upstream small CERNbox fixes (#5985)
* Hide hidden files by default * Make default title configurable This title appears before the config title is loaded. * Optional sourcemaps * Change login message * Feedback while loading the app Show simple spinner (similar to ocSpiner) if it takes too long to load (> 1s); Show error message when failed to load. * Apps fixes Allow img instead of icon Ensure canBeDefault is honored * Update tests for app img display If there's an image, it takes precedence over icon (which always has a default) * Changelog
1 parent 35343cf commit 85355f7

File tree

13 files changed

+162
-74
lines changed

13 files changed

+162
-74
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Bugfix: Show extension image
2+
3+
Allow extensions to set an image as its logo, instead of an icon.
4+
If `img` is set, it will take precedence over `icon`.
5+
6+
https://github.com/owncloud/web/pull/5985
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Bugfix: Hidden files hidden by default
2+
3+
Hide hidden files (files started with ".") by default, similar to oc10
4+
5+
https://github.com/owncloud/web/pull/5985
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Bugfix: Order extensions and default
2+
3+
Ensure the default extensions are displayed first.
4+
Ensure that extensions can be set as default or not.
5+
6+
https://github.com/owncloud/web/pull/5985
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Enhancement: Build options
2+
3+
Configure the startup title (displayed before the configuration is loaded) via env variable TITLE.
4+
Make the source map generation optional with the env variable SOURCE_MAP.
5+
6+
https://github.com/owncloud/web/pull/5985
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Enhancement: Show feedback on startup
2+
3+
Instead of displaying an empty page while all components load, display a spiner.
4+
Also show an error message if there was an error.
5+
6+
https://github.com/owncloud/web/pull/5985

packages/web-app-files/src/components/ActionMenuItem.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@
77
data-testid="action-handler"
88
v-on="getComponentListeners(action, items)"
99
>
10-
<oc-icon v-if="action.icon" data-testid="action-icon" :name="action.icon" size="medium" />
1110
<oc-img
12-
v-else-if="action.img"
11+
v-if="action.img"
1312
data-testid="action-img"
1413
:src="action.img"
1514
alt=""
1615
class="oc-icon oc-icon-m"
1716
/>
17+
<oc-icon
18+
v-else-if="action.icon"
19+
data-testid="action-icon"
20+
:name="action.icon"
21+
size="medium"
22+
/>
1823
<span class="oc-files-context-action-label" data-testid="action-label">{{
1924
action.label(filterParams)
2025
}}</span>

packages/web-app-files/src/components/AppBar/AppBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ export default {
307307
308308
created() {
309309
// Storage returns a string so we need to convert it into a boolean
310-
const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'true'
310+
const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'false'
311311
const areHiddenFilesShownBoolean = areHiddenFilesShown === 'true'
312312
313313
if (areHiddenFilesShownBoolean !== this.areHiddenFilesShown) {

packages/web-app-files/src/mixins/fileActions.js

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -62,41 +62,50 @@ export default {
6262
},
6363

6464
$_fileActions_editorActions() {
65-
return this.apps.fileEditors.map((editor) => {
66-
return {
67-
label: () => {
68-
const translated = this.$gettext('Open in %{app}')
69-
return this.$gettextInterpolate(
70-
translated,
71-
{ app: this.apps.meta[editor.app].name },
72-
true
73-
)
74-
},
75-
icon: this.apps.meta[editor.app].icon,
76-
handler: ({ resources }) =>
77-
this.$_fileActions_openEditor(
78-
editor,
79-
resources[0].path,
80-
resources[0].id,
81-
EDITOR_MODE_EDIT
82-
),
83-
isEnabled: ({ resources }) => {
84-
if (resources.length !== 1) {
85-
return false
86-
}
87-
if (Array.isArray(editor.routes) && !checkRoute(editor.routes, this.$route.name)) {
88-
return false
89-
}
90-
91-
return resources[0].extension.toLowerCase() === editor.extension.toLowerCase()
92-
},
93-
canBeDefault: true,
94-
componentType: 'oc-button',
95-
class: `oc-files-actions-${kebabCase(
96-
this.apps.meta[editor.app].name
97-
).toLowerCase()}-trigger`
98-
}
99-
})
65+
return this.apps.fileEditors
66+
.map((editor) => {
67+
return {
68+
label: () => {
69+
const translated = this.$gettext('Open in %{app}')
70+
return this.$gettextInterpolate(
71+
translated,
72+
{ app: this.apps.meta[editor.app].name },
73+
true
74+
)
75+
},
76+
icon: this.apps.meta[editor.app].icon,
77+
img: this.apps.meta[editor.app].img,
78+
handler: ({ resources }) =>
79+
this.$_fileActions_openEditor(
80+
editor,
81+
resources[0].path,
82+
resources[0].id,
83+
EDITOR_MODE_EDIT
84+
),
85+
isEnabled: ({ resources }) => {
86+
if (resources.length !== 1) {
87+
return false
88+
}
89+
if (Array.isArray(editor.routes) && !checkRoute(editor.routes, this.$route.name)) {
90+
return false
91+
}
92+
93+
return resources[0].extension.toLowerCase() === editor.extension.toLowerCase()
94+
},
95+
canBeDefault: editor.canBeDefault,
96+
componentType: 'oc-button',
97+
class: `oc-files-actions-${kebabCase(
98+
this.apps.meta[editor.app].name
99+
).toLowerCase()}-trigger`
100+
}
101+
})
102+
.sort((first, second) => {
103+
// Ensure default are listed first
104+
if (second.canBeDefault !== first.canBeDefault && second.canBeDefault) {
105+
return 1
106+
}
107+
return 0
108+
})
100109
}
101110
},
102111

@@ -214,7 +223,8 @@ export default {
214223
const label = this.$gettext('Open in %{ appName }')
215224
return {
216225
name: app.name,
217-
img: app.icon,
226+
icon: app.icon,
227+
img: app.img,
218228
componentType: 'oc-button',
219229
class: `oc-files-actions-${app.name}-trigger`,
220230
isEnabled: () => true,

packages/web-app-files/tests/unit/components/ActionMenuItem.spec.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,10 @@ describe('ActionMenuItem component', () => {
3131
})
3232
it('renders an image if there is one defined in the action', () => {
3333
const action = { ...fileActions.download, img: 'https://owncloud.tld/img.png' }
34-
const wrapper1 = getShallowWrapper(action)
35-
expect(wrapper1.find(selectors.icon).exists()).toBeTruthy()
36-
expect(wrapper1.find(selectors.icon).attributes().name).toBe(action.icon)
37-
delete action.icon
38-
const wrapper2 = getShallowWrapper(action)
39-
expect(wrapper2.find(selectors.icon).exists()).toBeFalsy()
40-
expect(wrapper2.find(selectors.img).exists()).toBeTruthy()
41-
expect(wrapper2.find(selectors.img).attributes().src).toBe(action.img)
34+
const wrapper = getShallowWrapper(action)
35+
expect(wrapper.find(selectors.icon).exists()).toBeFalsy()
36+
expect(wrapper.find(selectors.img).exists()).toBeTruthy()
37+
expect(wrapper.find(selectors.img).attributes().src).toBe(action.img)
4238
})
4339
it('renders the action label', () => {
4440
const action = fileActions.download

packages/web-container/index.html.ejs

Lines changed: 64 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,77 @@
1010
<link href="<%- data.bundle.css[s] %>" rel="stylesheet">
1111
<% }); %>
1212
<script src="js/require.js"></script>
13-
<noscript>
14-
<style>
15-
#enable-js-banner {
16-
display: flex;
17-
flex-direction: row;
18-
justify-content: center;
19-
padding: 0.5rem;
20-
background-color: #467391;
21-
}
22-
#banner-content {
23-
color: white;
24-
}
25-
</style>
26-
</noscript>
13+
<style>
14+
.splash-banner {
15+
display: flex;
16+
flex-direction: row;
17+
justify-content: center;
18+
align-items: center;
19+
padding: 0.5rem;
20+
height: 100%;
21+
}
22+
#splash-loading{
23+
height: 100%;
24+
}
25+
.splash-loading-hide {
26+
display: none;
27+
}
28+
#loading {
29+
display: inline-block;
30+
width: 50px;
31+
height: 50px;
32+
border: 2px solid #4c5f79;
33+
border-radius: 50%;
34+
border-top-color: #fff;
35+
animation: spin 1s ease-in-out infinite;
36+
-webkit-animation: spin 1s linear infinite;
37+
}
38+
39+
@keyframes spin {
40+
to { -webkit-transform: rotate(360deg); }
41+
}
42+
@-webkit-keyframes spin {
43+
to { -webkit-transform: rotate(360deg); }
44+
}
45+
</style>
2746
</head>
2847
<body>
48+
<div id="splash-loading" class="splash-banner splash-loading-hide">
49+
<div id="loading"></div>
50+
</div>
2951
<div id="owncloud"></div>
3052
<noscript>
31-
<div id="enable-js-banner"><h3 id="banner-content">Please enable JavaScript</h3></div>
53+
<div class="splash-banner"><h3>Please enable JavaScript</h3></div>
3254
</noscript>
3355
<script>
34-
requirejs.config({
35-
baseUrl: <%- JSON.stringify(data.roots.js) %>,
36-
paths: <%- JSON.stringify(data.bundle.js) %>
37-
})
56+
var loader = document.getElementById('splash-loading')
57+
var loaderTimer = setTimeout(function () {
58+
loader.classList.remove('splash-loading-hide')
59+
}, 1000);
60+
61+
function displayError() {
62+
loader.classList.remove('splash-loading-hide')
63+
loader.innerHTML = "<h3>Oops. Something went wrong.</h3>"
64+
}
65+
66+
if (typeof requirejs === 'undefined') {
67+
displayError()
68+
} else {
69+
requirejs.config({
70+
baseUrl: <%- JSON.stringify(data.roots.js) %>,
71+
paths: <%- JSON.stringify(data.bundle.js) %>
72+
})
3873
39-
requirejs(['web-runtime'], function (runtime) {
40-
runtime.bootstrap('config.json').then(runtime.renderSuccess).catch(runtime.renderFailure)
41-
})
74+
requirejs(['web-runtime'], function (runtime) {
75+
clearTimeout(loaderTimer)
76+
document.getElementById('splash-loading').classList.add('splash-loading-hide')
77+
runtime.bootstrap('config.json').then(runtime.renderSuccess).catch(runtime.renderFailure)
78+
}, function(e) {
79+
displayError()
80+
throw e
81+
})
82+
}
83+
4284
</script>
4385
</body>
4486
</html>

0 commit comments

Comments
 (0)