Skip to content
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

Change role dropdown #8882

Merged
merged 15 commits into from
Apr 26, 2023
Merged

Change role dropdown #8882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
565a1d9
remove padding, makes selectbox jump when adding items
hurradieweltgehtunter Apr 20, 2023
65fd06d
introduce new class for pill shaped border radius
hurradieweltgehtunter Apr 20, 2023
649b312
replace with new class
hurradieweltgehtunter Apr 20, 2023
249f3f9
re-shape roles and expirationdate buttons
hurradieweltgehtunter Apr 20, 2023
1f68733
add new bg class
hurradieweltgehtunter Apr 20, 2023
9b92603
add aria labels
hurradieweltgehtunter Apr 20, 2023
c889c2c
adapt layout of link permission dropdown, too
hurradieweltgehtunter Apr 20, 2023
ef7163b
add changelog
hurradieweltgehtunter Apr 20, 2023
c0a7fdb
lint
hurradieweltgehtunter Apr 20, 2023
cefbab0
update snapshots
hurradieweltgehtunter Apr 20, 2023
73654bf
update changelog
hurradieweltgehtunter Apr 24, 2023
4c49331
use prop instead of ID
hurradieweltgehtunter Apr 24, 2023
8ecf3fc
upodate tests & lint
hurradieweltgehtunter Apr 24, 2023
10189ce
fix equal sign
hurradieweltgehtunter Apr 24, 2023
bc1c18e
remove pill for share roles
hurradieweltgehtunter Apr 26, 2023
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
6 changes: 6 additions & 0 deletions changelog/unreleased/enhancement-share-dropdown-layout
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Enhancement: Layout of Share role and expiration date dropdown

We changed the layout of the share role/permsission dropdown and
expiration date select button to make them more visible and distinctive

https://github.com/owncloud/web/pull/8882
3 changes: 1 addition & 2 deletions packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="oc-filter-chip oc-flex">
<oc-button
:id="id"
class="oc-filter-chip-button"
class="oc-filter-chip-button oc-pill"
:class="{ 'oc-filter-chip-button-selected': filterActive }"
appearance="raw"
>
Expand Down Expand Up @@ -77,7 +77,6 @@ export default defineComponent({
background-color: var(--oc-color-background-default) !important;
color: var(--oc-color-text-muted) !important;
border: 1px solid var(--oc-color-text-muted);
border-radius: 99px !important;
box-sizing: border-box;
display: inline-flex;
gap: var(--oc-space-xsmall);
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcSelect/OcSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,6 @@ export default defineComponent({
&__selected-options > *:not(input) {
color: var(--oc-color-input-text-default);
background-color: var(--oc-color-background-default);
padding: 2px;
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions packages/design-system/src/styles/theme/background.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
background-color: var(--oc-color-swatch-brand-default) !important;
}

.oc-background-default {
background-color: var(--oc-color-background-default) !important;
}

/* stylelint-disable */
.oc-background-primary-gradient {
@include oc-background-primary-gradient;
Expand Down
43 changes: 25 additions & 18 deletions packages/design-system/src/styles/theme/helper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,26 +82,33 @@ hr {
text-align: inherit;
}

.oc-rounded {
border-radius: 5px;
}
// Classes for border radius
.oc {
&-rounded {
border-radius: 5px;
}

.oc-rounded-top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&-rounded-top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.oc-rounded-bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
&-rounded-bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.oc-rounded-left {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
&-rounded-left {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

.oc-rounded-right {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
&-rounded-right {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}

&-pill {
border-radius: 100px !important;
}
}
3 changes: 3 additions & 0 deletions ...s/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
data-testid="recipient-datepicker-btn"
appearance="raw"
gap-size="none"
:aria-label="
dateCurrent ? $gettext('Edit expiration date') : $gettext('Set expiration date')
"
@click="togglePopover"
>
<span
Expand Down
1 change: 1 addition & 0 deletions ...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
<div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l oc-mt-s">
<role-dropdown
:allow-share-permission="hasResharing || resourceIsSpace"
mode="create"
@option-change="collaboratorRoleChanged"
/>
<expiration-datepicker
Expand Down
1 change: 1 addition & 0 deletions packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
:existing-role="share.role"
:allow-share-permission="hasResharing || isAnySpaceShareType"
class="files-collaborators-collaborator-role"
mode="edit"
@option-change="shareRoleChanged"
/>
</div>
Expand Down
6 changes: 6 additions & 0 deletions packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
class="files-recipient-role-select-btn"
appearance="raw"
gap-size="none"
:aria-label="mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')"
>
<span v-if="!existingRole" v-text="inviteLabel" />
<span v-else>{{ $gettext(selectedRole.label) }}</span>
Expand Down Expand Up @@ -149,6 +150,11 @@ export default defineComponent({
allowSharePermission: {
type: Boolean,
required: true
},
mode: {
type: String,
required: false,
default: 'create'
}
},
emits: ['optionChange'],
Expand Down
2 changes: 1 addition & 1 deletion ...es/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
</div>
<div>
<div class="oc-flex oc-flex-nowrap oc-flex-middle">
<role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]"></role-dropdown-stub>
<role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]" mode="edit"></role-dropdown-stub>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions ...ests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`RoleDropdown renders a button with existing role if given for resource type file 1`] = `
<span class="oc-flex oc-flex-middle">
<oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<span>Viewer</span>
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
</oc-button-stub>
Expand Down Expand Up @@ -72,7 +72,7 @@ exports[`RoleDropdown renders a button with existing role if given for resource

exports[`RoleDropdown renders a button with existing role if given for resource type folder 1`] = `
<span class="oc-flex oc-flex-middle">
<oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<span>Viewer</span>
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
</oc-button-stub>
Expand Down Expand Up @@ -142,7 +142,7 @@ exports[`RoleDropdown renders a button with existing role if given for resource

exports[`RoleDropdown renders a button with invite text if no existing role given for resource type file 1`] = `
<span class="oc-flex oc-flex-middle">
<oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<span>Invite as viewer</span>
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
</oc-button-stub>
Expand Down Expand Up @@ -206,7 +206,7 @@ exports[`RoleDropdown renders a button with invite text if no existing role give

exports[`RoleDropdown renders a button with invite text if no existing role given for resource type folder 1`] = `
<span class="oc-flex oc-flex-middle">
<oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
<span>Invite as viewer</span>
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
</oc-button-stub>
Expand Down
4 changes: 2 additions & 2 deletions packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`ItemFilter can use a custom attribute as display name 1`] = `
<div class="item-filter oc-flex item-filter-users">
<div class="oc-filter-chip oc-flex">
<button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button" id="oc-filter-chip-5" type="button">
<button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button oc-pill" id="oc-filter-chip-5" type="button">
<!-- @slot Content of the button -->
<!--v-if-->
<span class="oc-text-truncate oc-filter-chip-label">Users</span>
Expand Down Expand Up @@ -49,7 +49,7 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
exports[`ItemFilter renders all items 1`] = `
<div class="item-filter oc-flex item-filter-users">
<div class="oc-filter-chip oc-flex">
<button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button" id="oc-filter-chip-1" type="button">
<button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button oc-pill" id="oc-filter-chip-1" type="button">
<!-- @slot Content of the button -->
<!--v-if-->
<span class="oc-text-truncate oc-filter-chip-label">Users</span>
Expand Down