Skip to content

Commit

Permalink
Make add buttons for public links and collaborators left aligned.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kulmann
kulmann committed Jan 13, 2020
1 parent de08dd1 commit 10b3162
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 87 deletions.
2 changes: 1 addition & 1 deletion apps/files/src/components/FileLinkSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<hr/>
</template>
<div class="uk-text-bold" v-translate>Public Links</div>
<div class="uk-text-right">
<div class="uk-margin-small-top uk-margin-small-bottom">
<oc-button @click="$_addPublicLink" icon="add" variation="primary">{{ $_addButtonLabel }}</oc-button>
</div>
<transition-group class="uk-list uk-list-divider uk-overflow-hidden"
Expand Down
2 changes: 1 addition & 1 deletion apps/files/src/components/FileSharingSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div :aria-hidden="visiblePanel == 'newCollaborator'" :inert="visiblePanel == 'newCollaborator'">
<oc-loader v-if="sharesLoading" aria-label="Loading collaborator list" />
<template v-else>
<div v-if="$_ocCollaborators_canShare" class="uk-text-right">
<div v-if="$_ocCollaborators_canShare" class="uk-margin-small-top uk-margin-small-bottom">
<oc-button variation="primary" icon="add" @click="visiblePanel = 'newCollaborator'" class="files-collaborators-open-add-share-dialog-button"><translate>Add Collaborators</translate></oc-button>
</div>
<translate
Expand Down
157 changes: 85 additions & 72 deletions apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,89 @@
<template>
<div class="oc-files-edit-public-link">
<transition enter-active-class="uk-animation-slide-top-small" leave-active-class="uk-animation-slide-top-small uk-animation-reverse"
name="custom-classes-transition">
<div class="uk-alert-danger" uk-alert v-if="errors">
<a class="uk-alert-close" uk-close/>
<p v-text="errors"/>
</div>
</transition>
<div class="uk-margin">
<label class="oc-label"><translate>Name your link</translate>:</label>
<input class="uk-input" id="oc-files-file-link-name" v-model="name"/>
</div>
<oc-grid gutter="small" childWidth="1-1">
<roles-select
mode="file-links"
:roles="$_roles"
:selectedRole="$_selectedRole"
@roleSelected="$_selectRole"
/>
<div v-if="$_selectedRole_description" class="uk-text-muted" v-text="$_selectedRole_description"></div>
</oc-grid>
<h4 class="uk-margin-medium-top uk-heading-divider" v-translate>
Security settings
</h4>
<div class="uk-margin uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-1 uk-width-2-5@m" v-if="$_expirationDate">
<label class="oc-label" for=""><span v-translate>Expiration date</span>:<em class="uk-margin-small-left"
v-if="$_expirationDate.enforced">(<span
v-translate>required</span>)</em></label>
<div class="uk-position-relative">
<oc-datepicker :class="{ 'uk-form-danger': !$_expirationIsValid }" :date="expireDate" :maxDatetime="$_maxExpirationDate"
:minDatetime="$_minExpirationDate" :placeholder="placeholder.expireDate"
@input="expireDate = $event" id="oc-files-file-link-expire-date" :key="'oc-datepicker-' + expireDate"/>
<div :uk-tooltip="$_expirationDateRemoveText" @click="expireDate=null"
class="uk-position-small uk-position-center-right oc-cursor-pointer" uk-close
v-if="!!expireDate"/>
<div class="oc-files-edit-public-link oc-files-file-link-form">
<form @submit.prevent>
<transition enter-active-class="uk-animation-slide-top-small" leave-active-class="uk-animation-slide-top-small uk-animation-reverse"
name="custom-classes-transition">
<div class="uk-alert-danger" uk-alert v-if="errors">
<a class="uk-alert-close" uk-close/>
<p v-text="errors"/>
</div>
</transition>
<div class="uk-margin">
<label class="oc-label"><span v-translate>Name your link</span>:</label>
<input class="uk-input" id="oc-files-file-link-name" v-model="name"/>
</div>
<div class="uk-width-1-1 uk-width-3-5@m">
<label class="oc-label" for=""><span v-translate>Password</span>:<em class="uk-margin-small-left"
v-if="$_passwordEnforced">(<span
v-translate>required</span>)</em></label>
<div class="uk-position-relative">
<input :class="{ 'uk-form-danger': !$_passwordIsValid }" :placeholder="hasPassword && password === null? '********' : placeholder.password" autocomplete="new-password"
class="uk-input" id="oc-files-file-link-password"
type="password"
v-model="password"/>
<div :uk-tooltip="$_passwordRemoveText" @click="password=''"
class="uk-position-small uk-position-center-right oc-cursor-pointer" uk-close
v-if="!$_passwordEnforced && hasPassword"/>
<oc-grid childWidth="1-1" gutter="small">
<roles-select :roles="$_roles" :selectedRole="$_selectedRole" @roleSelected="$_selectRole" mode="file-links"/>
<div class="uk-text-muted" v-if="$_selectedRole_description" v-text="$_selectedRole_description"></div>
</oc-grid>
<h4 class="uk-margin-medium-top uk-heading-divider" v-translate>
Security settings
</h4>
<div class="uk-margin uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-1 uk-width-2-5@m" v-if="$_expirationDate">
<label class="oc-label" for="oc-files-file-link-expire-date">
<span v-translate>Expiration date</span>:<em class="uk-margin-small-left" v-if="$_expirationDate.enforced">(<span v-translate>required</span>)</em>
</label>
<div class="uk-position-relative">
<oc-datepicker :class="{ 'uk-form-danger': !$_expirationIsValid }" :date="expireDate" :key="'oc-datepicker-' + expireDate"
:maxDatetime="$_maxExpirationDate" :minDatetime="$_minExpirationDate"
:placeholder="placeholder.expireDate" @input="expireDate = $event" id="oc-files-file-link-expire-date"/>
<div :uk-tooltip="$_expirationDateRemoveText" @click="expireDate=null" class="uk-position-small uk-position-center-right oc-cursor-pointer" uk-close
v-if="!!expireDate"/>
</div>
</div>
<div class="uk-width-1-1 uk-width-3-5@m">
<label class="oc-label" for="oc-files-file-link-password">
<span v-translate>Password</span>:<em class="uk-margin-small-left" v-if="$_passwordEnforced">(<span v-translate>required</span>)</em>
</label>
<div class="uk-position-relative">
<input :class="{ 'uk-form-danger': !$_passwordIsValid }" :placeholder="hasPassword && password === null? '********' : placeholder.password"
autocomplete="new-password" class="uk-input" id="oc-files-file-link-password" type="password" v-model="password"/>
<div :uk-tooltip="$_passwordRemoveText" @click="password=''" class="uk-position-small uk-position-center-right oc-cursor-pointer" uk-close
v-if="!$_passwordEnforced && hasPassword"/>
</div>
</div>
</div>
</div>
<hr class="divider"/>
<oc-grid class="uk-margin-bottom" gutter="small">
<div>
<oc-button :disabled="linksLoading" @click="$_closeForm" v-translate>Cancel</oc-button>
<oc-button :disabled="!$_isValid" @click="$_addLink" v-if="!linksLoading && $_isNew" v-translate
variation="primary">Create
</oc-button>
<oc-button :disabled="!$_isValid || !$_hasChanges" @click="$_updateLink" v-else-if="!linksLoading && !$_isNew"
v-translate variation="primary">Save
</oc-button>
<button class="uk-button uk-button-default uk-position-relative" disabled v-else>
<template v-if="$_isNew">
<oc-spinner :ariaLabel="$gettext('Creating Public Link')" class="uk-position-small uk-position-center-left" size="small"/>
<span class="uk-margin-small-left" :aria-hidden="true" v-translate>Creating Public Link</span>
</template>
<template v-else>
<oc-spinner :ariaLabel="$gettext('Saving Public Link')" class="uk-position-small uk-position-center-left" size="small"/>
<span class="uk-margin-small-left" :aria-hidden="true" v-translate>Saving Public Link</span>
</template>
</button>
</div>
</oc-grid>
<!-- @TODO: Enable Mail API to use the following
++++++++++++++++++++++++++++++++++++
<template v-if="$_sendMailEnabled">
<h4 class="uk-margin-medium-top uk-heading-divider">
Send mail notification
</h4>
<div class="uk-margin">
<input type="text" class="uk-input" :placeholder="placeholder.mailTo" />
</div>
<div class="uk-margin">
<textarea class="uk-textarea" :placeholder="placeholder.mailBody rows="4"></textarea>
</div>
<div class="uk-margin">
<label><input type="checkbox" class="uk-checkbox uk-margin-small-right" v-translate>Send a copy to myself</label>
</div>
</template>
-->
<hr class="divider"/>
<oc-grid class="uk-margin-bottom" gutter="small">
<div>
<oc-button :disabled="linksLoading" @click="$_closeForm" v-translate>Cancel</oc-button>
<oc-button :disabled="!$_isValid" @click="$_addLink" v-if="!linksLoading && $_isNew" v-translate
variation="primary">Create
</oc-button>
<oc-button :disabled="!$_isValid || !$_hasChanges" @click="$_updateLink" v-else-if="!linksLoading && !$_isNew"
v-translate variation="primary">Save
</oc-button>
<button class="uk-button uk-button-default uk-position-relative" disabled v-else>
<template v-if="$_isNew">
<oc-spinner :ariaLabel="$gettext('Creating Public Link')" class="uk-position-small uk-position-center-left" size="small"/>
<span :aria-hidden="true" class="uk-margin-small-left" v-translate>Creating Public Link</span>
</template>
<template v-else>
<oc-spinner :ariaLabel="$gettext('Saving Public Link')" class="uk-position-small uk-position-center-left" size="small"/>
<span :aria-hidden="true" class="uk-margin-small-left" v-translate>Saving Public Link</span>
</template>
</button>
</div>
</oc-grid>
</form>
</div>
</template>
<script>
Expand Down Expand Up @@ -137,7 +147,10 @@ export default {
},
$_roles () {
return publicLinkRoles({ translate: this.$gettext, isFolder: this.$_isFolder })
return publicLinkRoles({
translate: this.$gettext,
isFolder: this.$_isFolder
})
},
$_selectedRole () {
Expand Down
47 changes: 34 additions & 13 deletions tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const util = require('util')
const _ = require('lodash')
const sharingHelper = require('../../helpers/sharingHelper')

module.exports = {
Expand Down Expand Up @@ -117,14 +118,13 @@ module.exports = {
* @returns {Promise<void>}
*/
setPublicLinkRole: function (role) {
const roleSelectorXpath = util.format(this.elements.roleButton.selector, role)
const roleSelector = {
locateStrategy: this.elements.roleButton.locateStrategy,
selector: roleSelectorXpath
}
return this
.waitForElementVisible(roleSelector)
.click(roleSelector)
role = _(role).chain().toLower().startCase().replace(/\s/g, '').value()
return this.waitForElementPresent('@selectRoleButton')
.click('@selectRoleButton')
.waitForElementVisible('@rolesDropdown')
.waitForElementVisible(`@role${role}`)
.click(`@role${role}`)
.waitForElementNotVisible('@rolesDropdown')
},
/**
* sets name of the public link share on webUI
Expand Down Expand Up @@ -156,10 +156,13 @@ module.exports = {
/**
* sets expire date of the public link share using webUI
*
* @param {string} value - provided date in format YYYY-MM-DD
* @param {string} value - provided date in format YYYY-MM-DD, or empty string to unset date
* @returns {Promise}
*/
setPublicLinkExpiryDate: function (value) {
if (value === '') {
return this.click('@publicLinkDeleteExpirationDateButton')
}
value = sharingHelper.calculateDate(value)
const dateToSet = new Date(Date.parse(value))
const year = dateToSet.getFullYear()
Expand Down Expand Up @@ -423,16 +426,30 @@ module.exports = {
locateStrategy: 'xpath'
},
addLinkButton: {
selector: '//button[contains(.,"Add Link")]',
selector: '//button[contains(.,"Add public link")]',
locateStrategy: 'xpath'
},
createLinkButton: {
selector: '//button[contains(.,"Create")]',
locateStrategy: 'xpath'
},
roleButton: {
selector: '//*[contains(@class,"oc-files-file-link-form")]//*[.="%s"]',
locateStrategy: 'xpath'
selectRoleButton: {
selector: '#files-file-links-role-button'
},
rolesDropdown: {
selector: '#files-file-links-roles-dropdown'
},
roleViewer: {
selector: '#files-file-links-role-viewer'
},
roleContributor: {
selector: '#files-file-links-role-contributor'
},
roleEditor: {
selector: '#files-file-links-role-editor'
},
roleUploader: {
selector: '#files-file-links-role-uploader'
},
errorMessageInsidePublicLinkContainer: {
selector: '//div[contains(@class, "uk-alert-danger")]',
Expand Down Expand Up @@ -466,6 +483,10 @@ module.exports = {
selector: '//button/span[.="Save"]',
locateStrategy: 'xpath'
},
publicLinkDeleteExpirationDateButton: {
selector: '//*[@uk-tooltip="Remove expiration date"]',
locateStrategy: 'xpath'
},
linkExpirationDateField: {
selector: '.vdatetime-input'
},
Expand Down

0 comments on commit 10b3162

Please sign in to comment.