Skip to content

[stable20] Fix component click outside and cleanup structure #684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
skjnldsv merged 2 commits into from
Nov 9, 2020
Merged

[stable20] Fix component click outside and cleanup structure #684

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dcfcac0
Fix component click outside and cleanup structure
skjnldsv Oct 26, 2020
cab31db
Fix tests
skjnldsv Oct 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix component click outside and cleanup structure 
Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
  • Loading branch information
@skjnldsv
skjnldsv committed Nov 9, 2020
commit dcfcac05bc49284dd9191ba71b66ddadd1a8a020
76 changes: 75 additions & 1 deletion js/viewer-main.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion js/viewer-main.js.map
View file
Open in desktop

Large diffs are not rendered by default.

166 changes: 95 additions & 71 deletions src/views/Viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<template>
<Modal
v-if="initiated || currentFile.modal"
id="viewer-content"
id="viewer"
:class="{'icon-loading': !currentFile.loaded && !currentFile.failed}"
:clear-view-delay="isTesting ? -1 : 5000 /* prevent cypress timeouts */"
:dark="true"
Expand All @@ -37,6 +37,7 @@
:style="{width: isSidebarShown ? `calc(100% - ${sidebarWidth}px)` : null}"
:title="currentFile.basename"
:view="currentFile.modal"
class="viewer"
@close="close"
@previous="previous"
@next="next">
Expand All @@ -50,54 +51,56 @@
</ActionButton>
</template>

<!-- PREVIOUS -->
<component
:is="previousFile.modal"
v-if="previousFile && !previousFile.failed"
:key="previousFile.fileid"
ref="previous-content"
v-bind="previousFile"
:file-list="fileList"
class="hidden-visually file-view"
@error="previousFailed" />
<Error
v-else-if="previousFile"
class="hidden-visually"
:name="previousFile.basename" />

<!-- CURRENT -->
<component
:is="currentFile.modal"
v-if="!currentFile.failed"
:key="currentFile.fileid"
ref="content"
:active="true"
:can-swipe.sync="canSwipe"
v-bind="currentFile"
:file-list="fileList"
:is-full-screen="isFullscreen"
:loaded.sync="currentFile.loaded"
:is-sidebar-shown="isSidebarShown"
class="file-view active"
@error="currentFailed" />
<Error
v-else
:name="currentFile.basename" />

<!-- NEXT -->
<component
:is="nextFile.modal"
v-if="nextFile && !nextFile.failed"
:key="nextFile.fileid"
ref="next-content"
v-bind="nextFile"
:file-list="fileList"
class="hidden-visually file-view"
@error="nextFailed" />
<Error
v-else-if="nextFile"
class="hidden-visually"
:name="nextFile.basename" />
<div class="viewer__content" @click.self.exact="close">
<!-- PREVIOUS -->
<component
:is="previousFile.modal"
v-if="previousFile && !previousFile.failed"
:key="previousFile.fileid"
ref="previous-content"
v-bind="previousFile"
:file-list="fileList"
class="viewer__file--hidden viewer__file"
@error="previousFailed" />
<Error
v-else-if="previousFile"
class="hidden-visually"
:name="previousFile.basename" />

<!-- CURRENT -->
<component
:is="currentFile.modal"
v-if="!currentFile.failed"
:key="currentFile.fileid"
ref="content"
:active="true"
:can-swipe.sync="canSwipe"
v-bind="currentFile"
:file-list="fileList"
:is-full-screen="isFullscreen"
:loaded.sync="currentFile.loaded"
:is-sidebar-shown="isSidebarShown"
class="viewer__file viewer__file--active"
@error="currentFailed" />
<Error
v-else
:name="currentFile.basename" />

<!-- NEXT -->
<component
:is="nextFile.modal"
v-if="nextFile && !nextFile.failed"
:key="nextFile.fileid"
ref="next-content"
v-bind="nextFile"
:file-list="fileList"
class="viewer__file--hidden viewer__file"
@error="nextFailed" />
<Error
v-else-if="nextFile"
class="hidden-visually"
:name="nextFile.basename" />
</div>
</Modal>
</template>

Expand Down Expand Up @@ -673,6 +676,7 @@ export default {

async showSidebar() {
// Open the sidebar sharing tab
// TODO: also hide figure, needs a proper method for it in server Sidebar
await OCA.Files.Sidebar.open(this.currentFile.filename)
this.showAppsSidebar()
},
Expand Down Expand Up @@ -717,23 +721,50 @@ export default {
}
</script>

<style lang="scss">
#viewer-content.modal-mask {
transition: width ease 100ms;
.modal-container {
display: flex !important;
border-radius: 0 !important;
<style lang="scss" scoped>
.viewer {
&.modal-mask {
transition: width ease 100ms;
}

::v-deep .modal-container,
&__content {
// center views
display: flex;
align-items: center;
justify-content: center;
}

::v-deep .modal-container {
border-radius: 0;
// let the mime components manage their own background-color
background-color: transparent;
justify-content: center;
align-items: center;
// Override max-height & max-width
width: 85% !important;
height: 90% !important;
}

&__content {
width: 100%;
height: 100%;
cursor: pointer;
}

&__file {
transition: height 100ms ease,
width 100ms ease;

// display on page but make it invisible
&--hidden {
position: absolute;
z-index: -1;
left: -10000px;
}
}
}

.component-fade-enter-active, .component-fade-leave-active {
</style>

<style lang="scss">
.component-fade-enter-active,
.component-fade-leave-active {
transition: opacity .3s ease;
}

Expand All @@ -746,20 +777,12 @@ export default {
background-image: url('../assets/menu-sidebar-white.svg');
}

.file-view {
transition: height 100ms ease,
width 100ms ease;
}

// Override vue componets scss
// Override vue components scss
.app-sidebar.app-sidebar--full {
position: fixed !important;
z-index: 2025 !important;
top: 0 !important;
height: 100% !important;
z-index: 2025 !important;
.thumbnailContainer {
display: none !important;
}
}

// put autocomplete over full sidebar
Expand All @@ -768,4 +791,5 @@ export default {
.ui-autocomplete {
z-index: 2050 !important;
}

</style>