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

Jump to bottom

cleanup sidebar actions (fileinfo + spaces) #8398

Merged
merged 1 commit into from
Feb 10, 2023
Merged

cleanup sidebar actions (fileinfo + spaces) #8398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions changelog/unreleased/enhancement-fix-action-list-layout
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Enhancement: Use standardized layout for file/space action list

We've applied the styles for action lists to the fileinfo/space action lists.

https://github.com/owncloud/web/pull/8398
2 changes: 1 addition & 1 deletion packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
:key="`action-${index}`"
:action="action"
:items="resources"
class="oc-py-xs"
class="oc-rounded"
/>
</oc-list>
</div>
Expand Down
7 changes: 6 additions & 1 deletion packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:action="action"
:items="resources"
:space="space"
class="oc-py-xs"
class="oc-rounded"
/>
</oc-list>
</template>
Expand Down Expand Up @@ -53,5 +53,10 @@ export default defineComponent({
gap: 10px;
vertical-align: top;
}

> li:hover {
text-decoration: none !important;
background-color: var(--oc-color-background-hover);
}
}
</style>
7 changes: 6 additions & 1 deletion packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
:action="action"
:items="resources"
:space="space"
class="oc-py-xs"
class="oc-rounded"
/>
</oc-list>
</div>
Expand Down Expand Up @@ -119,5 +119,10 @@ export default defineComponent({
gap: 10px;
vertical-align: top;
}

> li:hover {
text-decoration: none !important;
background-color: var(--oc-color-background-hover);
}
}
</style>
6 changes: 5 additions & 1 deletion packages/web-app-files/src/components/SideBar/FileInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="file_info oc-flex oc-flex-between">
<div class="file_info oc-flex oc-flex-between oc-p-s">
<div class="oc-flex oc-flex-middle">
<oc-resource-icon
v-if="isSubPanelActive"
Expand Down Expand Up @@ -65,6 +65,10 @@ export default defineComponent({

<style lang="scss">
.file_info {
&.sidebar-panel__file_info {
border-bottom: 1px solid var(--oc-color-border);
}

button {
white-space: nowrap;
}
Expand Down
6 changes: 3 additions & 3 deletions ...web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
<div id="oc-files-context-menu">
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand All @@ -18,7 +18,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
</ul>
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border" id="oc-files-context-actions-trashBin">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand All @@ -31,7 +31,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
</ul>
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-sidebar">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand Down
12 changes: 6 additions & 6 deletions packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`SpaceHeader should add the "squashed"-class when the sidebar is opened
<div id="oc-files-context-menu">
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand All @@ -38,7 +38,7 @@ exports[`SpaceHeader should add the "squashed"-class when the sidebar is opened
</ul>
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`SpaceHeader space image should show the default image if no other image
<div id="oc-files-context-menu">
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand All @@ -107,7 +107,7 @@ exports[`SpaceHeader space image should show the default image if no other image
</ul>
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand Down Expand Up @@ -159,7 +159,7 @@ exports[`SpaceHeader space image should show the set image 1`] = `
<div id="oc-files-context-menu">
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand All @@ -172,7 +172,7 @@ exports[`SpaceHeader space image should show the set image 1`] = `
</ul>
<ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
<li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-m oc-icon-passive">
<!---->
Expand Down
3 changes: 2 additions & 1 deletion packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
v-oc-tooltip="showTooltip || action.hideLabel ? action.label(filterParams) : ''"
:type="action.componentType"
v-bind="componentProps"
:class="[action.class, 'action-menu-item']"
:class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
kulmann marked this conversation as resolved.
Show resolved Hide resolved
data-testid="action-handler"
size="small"
v-on="componentListeners"
justify-content="left"
>
<oc-img
v-if="action.img"
Expand Down
6 changes: 5 additions & 1 deletion packages/web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="space_info">
<div class="space_info oc-p-s">
<div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
<div class="oc-mr-s">
<oc-icon
Expand Down Expand Up @@ -32,6 +32,10 @@ export default defineComponent({

<style lang="scss">
.space_info {
&.sidebar-panel__space_info {
border-bottom: 1px solid var(--oc-color-border);
}

display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SpaceInfo shows space info 1`] = `
<div class="space_info">
<div class="space_info oc-p-s">
<div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
<div class="oc-mr-s">
<oc-icon-stub accessiblelabel="" class="oc-display-block" color="" filltype="fill" name="layout-grid" size="medium" type="span" variation="passive"></oc-icon-stub>
Expand Down