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

Style fixes for menus #6762

Merged
merged 12 commits into from
Jun 2, 2022
Merged

Style fixes for menus #6762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
927dd04
removing menus hovers
elizavetaRa Apr 5, 2022
0e82371
fix: create and upload menu hovers & paddings
elizavetaRa Apr 11, 2022
4b41995
unify context menu button icon sizes
elizavetaRa Apr 14, 2022
77a3980
paddings for new menu
elizavetaRa Apr 22, 2022
906802c
unify size of oc-icon-m for context and new menues
elizavetaRa Apr 25, 2022
ef6f7cb
class action-menu-item-hover
elizavetaRa May 2, 2022
1736500
fix: hover text color in dark mode
elizavetaRa May 3, 2022
678ee90
fix: consistent icon size for New and Upload menues
elizavetaRa May 5, 2022
75620ab
update snapshots
elizavetaRa May 5, 2022
78449a4
change class name to oc-menu-item-hover
elizavetaRa Jun 1, 2022
e58fc47
Bump ODS
diocas Jun 2, 2022
ce5c1ea
changelog
diocas Jun 2, 2022
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-consistend-dropdows
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Enhancement: Consistent dropdown menus

Made the main dropdown menus (new, upload, context, etc) constistent in size, hover effect and spacing/margins.

https://github.com/owncloud/web/issues/6555
https://github.com/owncloud/web/pull/6762
3 changes: 2 additions & 1 deletion changelog/unreleased/enhancement-update-ods
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ We updated the ownCloud Design System to version 13.1.0-rc.5. Please refer to th
- Enhancement - Redesign OcGhostElement: https://github.com/owncloud/owncloud-design-system/pull/2049
- Enhancement - Export package members: https://github.com/owncloud/owncloud-design-system/pull/2048
- Enhancement - Make OcResource inline-flex: https://github.com/owncloud/owncloud-design-system/pull/2041
- Enhancement - Hover in ocDrop menus: https://github.com/owncloud/owncloud-design-system/pull/2069
- Bugfix - Disabled textarea color contrast in darkmode: https://github.com/owncloud/owncloud-design-system/pull/2055
- Bugfix - OcTextInput: Fix event handlers in loops: https://github.com/owncloud/owncloud-design-system/pull/2054

https://github.com/owncloud/web/pull/6749
https://github.com/owncloud/web/pull/6750
https://github.com/owncloud/web/pull/6953
https://github.com/owncloud/owncloud-design-system/releases/tag/v13.1.0-rc.5
https://github.com/owncloud/owncloud-design-system/releases/tag/v13.1.0-rc.9
7 changes: 0 additions & 7 deletions packages/web-app-files/src/components/ActionMenuItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,5 @@ export default {
<style lang="scss">
.action-menu-item {
vertical-align: middle;
&:hover {
color: var(--oc-color-swatch-brand-hover);
text-decoration: underline;
.oc-icon > svg {
fill: var(--oc-color-swatch-brand-hover) !important;
}
}
}
</style>
44 changes: 33 additions & 11 deletions packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,43 @@
padding-size="small"
>
<oc-list id="create-list">
<li class="create-list-folder">
<li class="create-list-folder oc-menu-item-hover">
<oc-button id="new-folder-btn" appearance="raw" @click="showCreateResourceModal">
<oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
<oc-resource-icon :resource="{ isFolder: true, extension: '' }" size="medium" />
<translate>Folder</translate>
</oc-button>
</li>
<li v-for="(newFileHandler, key) in newFileHandlers" :key="key" class="create-list-file">
<li
v-for="(newFileHandler, key) in newFileHandlers"
:key="key"
class="create-list-file oc-menu-item-hover"
>
<oc-button
appearance="raw"
:class="['new-file-btn-' + newFileHandler.ext]"
@click="showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)"
>
<oc-resource-icon :resource="{ type: 'file', extension: newFileHandler.ext }" />
<oc-resource-icon
:resource="{ type: 'file', extension: newFileHandler.ext }"
size="medium"
/>
<span>{{ newFileHandler.menuTitle($gettext) }}</span>
</oc-button>
</li>
<template v-if="mimetypesAllowedForCreation">
<li
v-for="(mimetype, key) in mimetypesAllowedForCreation"
:key="key"
class="create-list-file"
class="create-list-file oc-menu-item-hover"
>
<oc-button
appearance="raw"
@click="showCreateResourceModal(false, mimetype.ext, false, true)"
>
<oc-resource-icon :resource="{ type: 'file', extension: mimetype.ext }" />
<oc-resource-icon
:resource="{ type: 'file', extension: mimetype.ext }"
size="medium"
/>
<translate :translate-params="{ name: mimetype.name }">%{name}</translate>
</oc-button>
</li>
Expand Down Expand Up @@ -89,10 +99,10 @@
padding-size="small"
>
<oc-list id="upload-list">
<li>
<li class="oc-menu-item-hover">
<resource-upload ref="folder-upload" btn-class="oc-width-1-1" />
</li>
<li>
<li class="oc-menu-item-hover">
<resource-upload ref="file-upload" btn-class="oc-width-1-1" :is-folder="true" />
</li>
</oc-list>
Expand Down Expand Up @@ -831,12 +841,24 @@ export default defineComponent({
.create-list-folder {
border-bottom: 1px solid var(--oc-color-border);
}
.create-list-file button {
margin: 2px 0;
.create-list-folder button {
margin-bottom: 8px;
}
.create-list-file:nth-child(2) button {
margin-top: 6px;
}
}
#upload-list,
#new-file-menu-drop {
min-width: 250px;
}
</style>
<style lang="scss">
#create-list,
#upload-list,
#new-file-menu-drop {
min-width: 200px;
.oc-icon-m svg {
height: 100% !important;
}
}
</style>
2 changes: 1 addition & 1 deletion packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
<oc-resource-icon :resource="{ extension: '', isFolder }" />
<oc-resource-icon :resource="{ extension: '', isFolder }" size="medium" />
<span :id="uploadLabelId">{{ buttonLabel }}</span>
</oc-button>
<input
Expand Down
15 changes: 3 additions & 12 deletions packages/web-app-files/src/components/ContextActionMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
:key="`section-${section.name}-action-${actionIndex}`"
:action="action"
:items="items"
class="oc-files-context-action oc-px-s oc-rounded"
class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"
/>
</oc-list>
</div>
Expand Down Expand Up @@ -62,27 +62,18 @@ export default {
white-space: normal;

> li {
padding: 6px;
&:hover {
background-color: var(--oc-color-background-hover);
}

padding-left: 0 !important;
padding-right: 0 !important;
a,
button,
span {
color: var(--oc-color-swatch-passive-default) !important;
display: inline-flex;
font-weight: normal !important;
gap: 10px;
justify-content: flex-start;
vertical-align: top;
width: 100%;
text-align: left;

&:hover {
color: var(--oc-color-swatch-passive-default);
text-decoration: none !important;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions ...b-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;
exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;

exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;
exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;
Loading