Share dialog files sidebar

apps/files/js/filelist.js

@@ -367,6 +367,21 @@
  return model;
  },
 
+ /**
+ * Displays the details view for the given file and
+ * selects the given tab
+ *
+ * @param {string} fileName file name for which to show details
+ * @param {string} [tabId] optional tab id to select
+ */
+ showDetailsView: function(fileName, tabId) {
+ this._updateDetailsView(fileName);
+ if (tabId) {
+ this._detailsView.selectTab(tabId);
+ }
+ OC.Apps.showAppSidebar();
+ },
+
  /**
  * Update the details view to display the given file
  *

apps/files_sharing/appinfo/app.php

@@ -54,9 +54,18 @@
 \OCP\Share::registerBackend('file', 'OC_Share_Backend_File');
 \OCP\Share::registerBackend('folder', 'OC_Share_Backend_Folder', 'file');
 
-\OCP\Util::addScript('files_sharing', 'share');
-\OCP\Util::addScript('files_sharing', 'external');
-\OCP\Util::addStyle('files_sharing', 'sharetabview');
+$eventDispatcher = \OC::$server->getEventDispatcher();
+$eventDispatcher->addListener(
+ 'OCA\Files::loadAdditionalScripts',
+ function() {
+ \OCP\Util::addScript('files_sharing', 'share');
+ \OCP\Util::addScript('files_sharing', 'sharetabview');
+ \OCP\Util::addScript('files_sharing', 'external');
+ \OCP\Util::addStyle('files_sharing', 'sharetabview');
+ }
+);
+
+// \OCP\Util::addStyle('files_sharing', 'sharetabview');
 
 \OC::$server->getActivityManager()->registerExtension(function() {
  return new \OCA\Files_Sharing\Activity(

apps/files_sharing/css/sharetabview.css

@@ -1,3 +1,75 @@
 .app-files .shareTabView {
  min-height: 100px;
 }
+
+.shareTabView .oneline { white-space: nowrap; }
+
+.shareTabView .shareWithLoading {
+ padding-left: 10px;
+ position: relative;
+ right: 30px;
+ top: 2px;
+}
+
+.shareTabView .shareWithRemoteInfo {
+ padding: 11px 0 11px 10px
+}
+
+.shareTabView label {
+ font-weight:400;
+ white-space: nowrap;
+}
+
+.shareTabView input[type="checkbox"] {
+ margin:0 3px 0 8px;
+ vertical-align: middle;
+}
+
+.shareTabView input[type="text"], .shareTabView input[type="password"] {
+ width: 91%;
+ margin-left: 7px;
+}
+
+.shareTabView form {
+ font-size: 100%;
+ margin-left: 0;
+ margin-right: 0;
+}
+
+#shareWithList {
+ list-style-type:none;
+ padding:8px;
+}
+
+#shareWithList li {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ font-weight: bold;
+ line-height: 21px;
+ white-space: normal;
+}
+
+#shareWithList .unshare img, #shareWithList .showCruds img {
+ vertical-align:text-bottom; /* properly align icons */
+}
+
+#shareWithList label input[type=checkbox]{
+ margin-left: 0;
+ position: relative;
+}
+#shareWithList .username{
+ padding-right: 8px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 254px;
+ display: inline-block;
+ overflow: hidden;
+ vertical-align: middle;
+}
+#shareWithList li label{
+ margin-right: 8px;
+}
+
+.shareTabView .icon-loading-small {
+ margin-left: -30px;
+}

apps/files_sharing/js/share.js

@@ -79,7 +79,9 @@
  $files = fileList.$fileList.find('tr');
  }
  _.each($files, function(file) {
- OCA.Sharing.Util.updateFileActionIcon($(file));
+ var $tr = $(file);
+ var shareStatus = OC.Share.statuses[$tr.data('id')];
+ OCA.Sharing.Util._updateFileActionIcon($tr, !!shareStatus, shareStatus && shareStatus.link);
  });
  }
 
@@ -104,71 +106,59 @@
  permissions: OC.PERMISSION_SHARE,
  icon: OC.imagePath('core', 'actions/share'),
  type: OCA.Files.FileActions.TYPE_INLINE,
- actionHandler: function(filename, context) {
- var $tr = context.$file;
- var itemType = 'file';
- if ($tr.data('type') === 'dir') {
- itemType = 'folder';
- }
- var possiblePermissions = $tr.data('share-permissions');
- if (_.isUndefined(possiblePermissions)) {
- possiblePermissions = $tr.data('permissions');
- }
-
- var appendTo = $tr.find('td.filename');
- // Check if drop down is already visible for a different file
- if (OC.Share.droppedDown) {
- if ($tr.attr('data-id') !== $('#dropdown').attr('data-item-source')) {
- OC.Share.hideDropDown(function () {
- $tr.addClass('mouseOver');
- OC.Share.showDropDown(itemType, $tr.data('id'), appendTo, true, possiblePermissions, filename);
- });
- } else {
- OC.Share.hideDropDown();
- }
- } else {
- $tr.addClass('mouseOver');
- OC.Share.showDropDown(itemType, $tr.data('id'), appendTo, true, possiblePermissions, filename);
- }
- $('#dropdown').on('sharesChanged', function(ev) {
- // files app current cannot show recipients on load, so we don't update the
- // icon when changed for consistency
- if (context.fileList.$el.closest('#app-content-files').length) {
- return;
- }
- var recipients = _.pluck(ev.shares[OC.Share.SHARE_TYPE_USER], 'share_with_displayname');
- var groupRecipients = _.pluck(ev.shares[OC.Share.SHARE_TYPE_GROUP], 'share_with_displayname');
- recipients = recipients.concat(groupRecipients);
- // note: we only update the data attribute because updateIcon()
- // is called automatically after this event
- if (recipients.length) {
- $tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
- }
- else {
- $tr.removeAttr('data-share-recipients');
- }
- });
+ actionHandler: function(fileName) {
+ fileList.showDetailsView(fileName, 'shareTabView');
  }
  });
 
- OC.addScript('files_sharing', 'sharetabview').done(function() {
- fileList.registerTabView(new OCA.Sharing.ShareTabView('shareTabView'));
+ var shareTab = new OCA.Sharing.ShareTabView('shareTabView');
+ // detect changes and change the matching list entry
+ shareTab.on('sharesChanged', function(shareModel) {
+ var fileInfoModel = shareModel.fileInfoModel;
+ var $tr = fileList.findFileEl(fileInfoModel.get('name'));
+ OCA.Sharing.Util._updateFileListDataAttributes(fileList, $tr, shareModel);
+ if (!OCA.Sharing.Util._updateFileActionIcon($tr, shareModel.hasUserShares(), shareModel.hasLinkShare())) {
+ // remove icon, if applicable
+ OC.Share.markFileAsShared($tr, false, false);
+ }
  });
+ fileList.registerTabView(shareTab);
+ },
+
+ /**
+ * Update file list data attributes
+ */
+ _updateFileListDataAttributes: function(fileList, $tr, shareModel) {
+ // files app current cannot show recipients on load, so we don't update the
+ // icon when changed for consistency
+ if (fileList.id === 'files') {
+ return;
+ }
+ var recipients = _.pluck(shareModel.get('shares'), 'share_with_displayname');
+ // note: we only update the data attribute because updateIcon()
+ if (recipients.length) {
+ $tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
+ }
+ else {
+ $tr.removeAttr('data-share-recipients');
+ }
  },
 
  /**
  * Update the file action share icon for the given file
  *
  * @param $tr file element of the file to update
+ * @param {bool} hasUserShares true if a user share exists
+ * @param {bool} hasLinkShare true if a link share exists
+ *
+ * @return {bool} true if the icon was set, false otherwise
  */
- updateFileActionIcon: function($tr) {
+ _updateFileActionIcon: function($tr, hasUserShares, hasLinkShare) {
  // if the statuses are loaded already, use them for the icon
  // (needed when scrolling to the next page)
- var shareStatus = OC.Share.statuses[$tr.data('id')];
- if (shareStatus || $tr.attr('data-share-recipients') || $tr.attr('data-share-owner')) {
+ if (hasUserShares || hasLinkShare || $tr.attr('data-share-recipients') || $tr.attr('data-share-owner')) {
  var permissions = $tr.data('permissions');
- var hasLink = !!(shareStatus && shareStatus.link);
- OC.Share.markFileAsShared($tr, true, hasLink);
+ OC.Share.markFileAsShared($tr, true, hasLinkShare);
  if ((permissions & OC.PERMISSION_SHARE) === 0 && $tr.attr('data-share-owner')) {
  // if no share action exists because the admin disabled sharing for this user
  // we create a share notification action to inform the user about files
@@ -187,7 +177,9 @@
  return $result;
  });
  }
+ return true;
  }
+ return false;
  },
 
  /**

apps/files_sharing/js/sharetabview.js

@@ -10,7 +10,9 @@
 
 (function() {
  var TEMPLATE =
- '<div><ul>{{#if owner}}<li>Owner: {{owner}}</li>{{/if}}</ul></div>';
+ '<div>' +
+ '<div class="dialogContainer"></div>' +
+ '</div>';
 
  /**
  * @memberof OCA.Sharing
@@ -20,7 +22,12 @@
  id: 'shareTabView',
  className: 'tab shareTabView',
 
- _template: null,
+ template: function(params) {
+ if (!this._template) {
+ this._template = Handlebars.compile(TEMPLATE);
+ }
+ return this._template(params);
+ },
 
  getLabel: function() {
  return t('files_sharing', 'Sharing');
@@ -30,23 +37,40 @@
  * Renders this details view
  */
  render: function() {
- this.$el.empty();
-
- if (!this._template) {
- this._template = Handlebars.compile(TEMPLATE);
+ var self = this;
+ if (this._dialog) {
+ // remove/destroy older instance
+ this._dialog.model.off();
+ this._dialog.remove();
+ this._dialog = null;
  }
 
  if (this.model) {
- console.log(this.model);
- var owner = this.model.get('shareOwner');
- if (owner === OC.currentUser) {
- owner = null;
- }
- this.$el.append(this._template({
- owner: owner
- }));
+ this.$el.html(this.template());
 
+ // TODO: the model should read these directly off the passed fileInfoModel
+ var attributes = {
+ itemType: this.model.isDirectory() ? 'folder' : 'file',
+ itemSource: this.model.get('id'),
+ possiblePermissions: this.model.get('sharePermissions')
+ };
+ var configModel = new OC.Share.ShareConfigModel();
+ var shareModel = new OC.Share.ShareItemModel(attributes, {
+ configModel: configModel,
+ fileInfoModel: this.model
+ });
+ this._dialog = new OC.Share.ShareDialogView({
+ configModel: configModel,
+ model: shareModel
+ });
+ this.$el.find('.dialogContainer').append(this._dialog.$el);
+ this._dialog.render();
+ this._dialog.model.fetch();
+ this._dialog.model.on('change', function() {
+ self.trigger('sharesChanged', shareModel);
+ });
  } else {
+ this.$el.empty();
  // TODO: render placeholder text?
  }
  }