Merge pull request #18732 from nextcloud/enh/files-sidebar

Sidebar polishing
This commit is contained in:
John Molakvoæ 2020-01-15 12:32:37 +01:00 committed by GitHub
commit 3d03d82026
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 319 additions and 444 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -630,7 +630,7 @@
* @param {string|OCA.Files.FileInfoModel} fileName file name from the current list or a FileInfoModel object
* @param {boolean} [show=true] whether to open the sidebar if it was closed
*/
_updateDetailsView: function(fileName) {
_updateDetailsView: function(fileName, show) {
if (!(OCA.Files && OCA.Files.Sidebar)) {
console.error('No sidebar available');
return;
@ -650,8 +650,18 @@
var model = this.getModelForFile(tr)
var path = model.attributes.path + '/' + model.attributes.name
// make sure the file list has the correct context available
if (this._currentFileModel) {
this._currentFileModel.off();
}
this.$fileList.children().removeClass('highlighted');
tr.addClass('highlighted');
this._currentFileModel = model;
// open sidebar and set file
OCA.Files.Sidebar.open(path.replace('//', '/'))
if (typeof show === 'undefined' || !!show || (OCA.Files.Sidebar.file !== '')) {
OCA.Files.Sidebar.open(path.replace('//', '/'))
}
},
/**

View File

@ -25,6 +25,7 @@
v-if="file"
ref="sidebar"
v-bind="appSidebar"
:force-menu="true"
@close="onClose"
@update:active="setActiveTab"
@update:starred="toggleStarred"
@ -37,6 +38,19 @@
:file-info="fileInfo" />
</template>
<!-- Actions menu -->
<template v-if="fileInfo" #secondary-actions>
<!-- TODO: create proper api for apps to register actions
And inject themselves here. -->
<ActionButton
v-if="isSystemTagsEnabled"
:close-after-click="true"
icon="icon-tag"
@click="toggleTags">
{{ t('files_sharing', 'Tags') }}
</ActionButton>
</template>
<!-- Error display -->
<div v-if="error" class="emptycontent">
<div class="icon-error" />
@ -60,6 +74,7 @@
import $ from 'jquery'
import axios from '@nextcloud/axios'
import AppSidebar from 'nextcloud-vue/dist/Components/AppSidebar'
import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
import FileInfo from '../services/FileInfo'
import LegacyTab from '../components/LegacyTab'
import LegacyView from '../components/LegacyView'
@ -69,6 +84,7 @@ export default {
name: 'Sidebar',
components: {
ActionButton,
AppSidebar,
LegacyView,
},
@ -218,6 +234,10 @@ export default {
defaultActionListener() {
return this.defaultAction ? 'figure-click' : null
},
isSystemTagsEnabled() {
return OCA && 'SystemTags' in OCA
}
},
watch: {
@ -377,6 +397,15 @@ export default {
})
}
},
/**
* Toggle the tags selector
*/
toggleTags() {
if (OCA.SystemTags && OCA.SystemTags.View) {
OCA.SystemTags.View.toggle()
}
}
},
}
</script>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -12,12 +12,11 @@
margin-left: 10px;
}
#app-sidebar .mainFileInfoView .tag-label {
#app-sidebar .app-sidebar-header__action .tag-label {
cursor: pointer;
padding: 13px;
}
#app-sidebar .mainFileInfoView .icon-tag {
opacity: .5;
vertical-align: middle;
padding: 13px 0;
display: flex;
color: var(--color-text-light);
position: relative;
margin-top: -20px;
}

View File

@ -33,27 +33,7 @@
const systemTagsInfoView = new OCA.SystemTags.SystemTagsInfoView()
fileList.registerDetailView(systemTagsInfoView)
_.each(fileList.getRegisteredDetailViews(), function(detailView) {
if (detailView instanceof OCA.Files.MainFileInfoDetailView) {
const systemTagsInfoViewToggleView
= new OCA.SystemTags.SystemTagsInfoViewToggleView({
systemTagsInfoView: systemTagsInfoView,
})
systemTagsInfoViewToggleView.render()
// The toggle view element is detached before the
// MainFileInfoDetailView is rendered to prevent its event
// handlers from being removed.
systemTagsInfoViewToggleView.listenTo(detailView, 'pre-render', function() {
systemTagsInfoViewToggleView.$el.detach()
})
systemTagsInfoViewToggleView.listenTo(detailView, 'post-render', function() {
detailView.$el.find('.file-details').append(systemTagsInfoViewToggleView.$el)
})
}
})
OCA.SystemTags.View = systemTagsInfoView
},
}

View File

@ -2,7 +2,6 @@ import './app'
import './systemtagsfilelist'
import './filesplugin'
import './systemtagsinfoview'
import './systemtagsinfoviewtoggleview'
import './css/systemtagsfilelist.scss'
window.OCA.SystemTags = OCA.SystemTags

View File

@ -123,8 +123,9 @@
const appliedTags = collection.map(modelToSelection)
self._inputView.setData(appliedTags)
self.show()
if (appliedTags.length > 0) {
self.show()
}
},
})
}
@ -152,6 +153,10 @@
this.$el.addClass('hidden')
},
toggle: function() {
this.$el.toggleClass('hidden')
},
openDropdown: function() {
this.$el.find('.systemTagsInputField').select2('open')
},

View File

@ -1,97 +0,0 @@
/**
*
* @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
(function(OCA) {
/**
* @class OCA.SystemTags.SystemTagsInfoViewToggleView
* @classdesc
*
* View to toggle the visibility of a SystemTagsInfoView.
*
* This toggle view must be explicitly rendered before it is used.
*/
const SystemTagsInfoViewToggleView = OC.Backbone.View.extend(
/** @lends OC.Backbone.View.prototype */ {
tagName: 'span',
className: 'tag-label',
events: {
'click': 'click',
},
/**
* @type OCA.SystemTags.SystemTagsInfoView
*/
_systemTagsInfoView: null,
template: function(data) {
return '<span class="icon icon-tag"/>' + t('systemtags', 'Tags')
},
/**
* Initialize this toggle view.
*
* The options must provide a systemTagsInfoView parameter that
* references the SystemTagsInfoView to associate to this toggle view.
* @param {Object} options options
*/
initialize: function(options) {
options = options || {}
this._systemTagsInfoView = options.systemTagsInfoView
if (!this._systemTagsInfoView) {
throw new Error('Missing required parameter "systemTagsInfoView"')
}
},
/**
* Toggles the visibility of the associated SystemTagsInfoView.
*
* When the systemTagsInfoView is shown its dropdown is also opened.
*/
click: function() {
if (this._systemTagsInfoView.isVisible()) {
this._systemTagsInfoView.hide()
} else {
this._systemTagsInfoView.show()
this._systemTagsInfoView.openDropdown()
}
},
/**
* Renders this toggle view.
*
* @returns {OCA.SystemTags.SystemTagsInfoViewToggleView} this object.
*/
render: function() {
this.$el.html(this.template())
return this
},
})
OCA.SystemTags.SystemTagsInfoViewToggleView = SystemTagsInfoViewToggleView
})(OCA)

View File

@ -1,93 +0,0 @@
/**
*
* @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
describe('OCA.SystemTags.SystemTagsInfoViewToggleView', function () {
var systemTagsInfoView;
var view;
beforeEach(function() {
systemTagsInfoView = new OCA.SystemTags.SystemTagsInfoView();
view = new OCA.SystemTags.SystemTagsInfoViewToggleView({ systemTagsInfoView: systemTagsInfoView });
});
afterEach(function() {
view.remove();
systemTagsInfoView.remove();
});
describe('initialize', function() {
it('fails if a "systemTagsInfoView" parameter is not provided', function() {
var constructor = function() {
return new OCA.SystemTags.SystemTagsInfoViewToggleView({});
}
expect(constructor).toThrow();
});
});
describe('click on element', function() {
var isVisibleStub;
var showStub;
var hideStub;
var openDropdownStub;
beforeEach(function() {
isVisibleStub = sinon.stub(systemTagsInfoView, 'isVisible');
showStub = sinon.stub(systemTagsInfoView, 'show');
hideStub = sinon.stub(systemTagsInfoView, 'hide');
openDropdownStub = sinon.stub(systemTagsInfoView, 'openDropdown');
});
afterEach(function() {
isVisibleStub.restore();
showStub.restore();
hideStub.restore();
openDropdownStub.restore();
});
it('shows a not visible SystemTagsInfoView', function() {
isVisibleStub.returns(false);
view.$el.click();
expect(isVisibleStub.calledOnce).toBeTruthy();
expect(showStub.calledOnce).toBeTruthy();
expect(openDropdownStub.calledOnce).toBeTruthy();
expect(openDropdownStub.calledAfter(showStub)).toBeTruthy();
expect(hideStub.notCalled).toBeTruthy();
});
it('hides a visible SystemTagsInfoView', function() {
isVisibleStub.returns(true);
view.$el.click();
expect(isVisibleStub.calledOnce).toBeTruthy();
expect(hideStub.calledOnce).toBeTruthy();
expect(showStub.notCalled).toBeTruthy();
expect(openDropdownStub.notCalled).toBeTruthy();
});
});
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

6
package-lock.json generated
View File

@ -7174,9 +7174,9 @@
}
},
"nextcloud-vue": {
"version": "0.12.8",
"resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.8.tgz",
"integrity": "sha512-4TU5Ji7560cRo14iaRgvVo4+Z6iQCWw6VU26dQaYWD8G3BUoZMQXCrETGyMW5kpP/ODW4cLVVzjlYaVosyqoOA==",
"version": "0.12.11",
"resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.11.tgz",
"integrity": "sha512-3zzgSRpWtPMqIi+DpZsh0YxACACHv+j8bWmMYyiUJVB2JjVADYpzb/lbUxQCE/A8rB3N75zIfkQOf0gd9BC9oA==",
"requires": {
"@babel/polyfill": "^7.4.4",
"escape-html": "^1.0.3",

View File

@ -56,7 +56,7 @@
"moment-timezone": "^0.5.27",
"nextcloud-password-confirmation": "^0.4.2",
"nextcloud-router": "0.0.9",
"nextcloud-vue": "^0.12.8",
"nextcloud-vue": "^0.12.11",
"nextcloud-vue-collections": "^0.7.1",
"p-limit": "^2.2.2",
"p-queue": "^6.2.1",