Skip to content

Commit

Permalink
Use more applicable icon for 'Open sidebar' (#142)
Browse files Browse the repository at this point in the history 
Use more applicable icon for 'Open sidebar'
  • Loading branch information
@skjnldsv
skjnldsv authored Jun 22, 2019
2 parents c202712 + 9404837 commit 7c4d4e5
Show file tree
Hide file tree
Showing 15 changed files with 35 additions and 36 deletions.
2 changes: 1 addition & 1 deletion cypress/integration/image-small.png.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open image-small.png in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'image-small.png')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/image.gif.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('Open image.gif in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'image.gif')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/image.png.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open image.png in viewer', function() {

// it('See the share and menu icons and title on the viewer header', function() {
// cy.get('#viewer-content .modal-title').should('contain', 'image.png')
// cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
// cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
// cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
// })

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/image.svg.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('Open image.svg in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'image.svg')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/images.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('Open images in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'image1.jpg')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/video.mkv.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open video.mkv in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'video.mkv')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/video.mp4.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open video1.mp4 in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'video1.mp4')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/video.ogv.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open video.ogv in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'video.ogv')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/video.webm.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Open video.webm in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'video.webm')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/videos.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ describe('Open mp4 videos in viewer', function() {

it('See the share and menu icons and title on the viewer header', function() {
cy.get('#viewer-content .modal-title').should('contain', 'video1.mp4')
cy.get('#viewer-content .modal-header button.icon-share-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
})

Expand Down
22 changes: 11 additions & 11 deletions js/viewer.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/viewer.js.map
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/assets/menu-sidebar-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/assets/share-white.svg
View file

This file was deleted.

25 changes: 12 additions & 13 deletions src/views/Viewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,16 @@
:title="currentFile.name"
:enable-swipe="canSwipe"
:size="isMobile || isFullscreen ? 'full' : 'large'"
:style="{width: showSidebar ? `calc(100% - ${sidebarWidth}px)` : null}"
:style="{width: shownSidebar ? `calc(100% - ${sidebarWidth}px)` : null}"
@close="close"
@previous="previous"
@next="next">
<!-- ACTIONS -->
<template #actions>
<ActionButton
v-if="OCA.Sharing"
icon="icon-share-white-forced"
@click="showSharingSidebar">
{{ t('viewer', 'Share') }}
icon="icon-menu-sidebar-white-forced"
@click="showSidebar">
{{ t('viewer', 'Open sidebar') }}
</ActionButton>
</template>

Expand Down Expand Up @@ -82,7 +81,7 @@
:loaded.sync="currentFile.loaded"
:mime="currentFile.mime"
:path="getPreviewIfAny(currentFile)"
:sidebar-shown="showSidebar"
:sidebar-shown="shownSidebar"
class="file-view active"
@error="currentFailed" />
<Error
Expand Down Expand Up @@ -151,7 +150,7 @@ export default {

isLoaded: false,

showSidebar: false,
shownSidebar: false,
sidebarWidth: 0,

canSwipe: true,
Expand Down Expand Up @@ -439,14 +438,14 @@ export default {
* Show the sharing sidebar
*/

showSharingSidebar() {
showSidebar() {
// Open the sidebar sharing tab
OCA.Files.App.fileList.showDetailsView(this.currentFile.name, 'shareTabView')
OCA.Files.App.fileList.showDetailsView(this.currentFile.name)
this.showAppsSidebar()
},

showAppsSidebar() {
this.showSidebar = true
this.shownSidebar = true
const sidebar = document.getElementById('app-sidebar')
if (sidebar) {
sidebar.classList.add('app-sidebar--full')
Expand All @@ -463,7 +462,7 @@ export default {
},

hideAppsSidebar() {
this.showSidebar = false
this.shownSidebar = false
const sidebar = document.getElementById('app-sidebar')
if (sidebar) {
sidebar.classList.remove('app-sidebar--full')
Expand Down Expand Up @@ -516,8 +515,8 @@ export default {
}

// force white icon
.icon-share-white-forced {
background-image: url('~Assets/share-white.svg');
.icon-menu-sidebar-white-forced {
background-image: url('~Assets/menu-sidebar-white.svg');
}

.file-view {
Expand Down

0 comments on commit 7c4d4e5

Please sign in to comment.