mirror of
https://github.com/nextcloud/server.git
synced 2026-06-09 00:32:29 -04:00
fix(files): cleanup common table row styling
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ
parent
73000175d0
commit
993a7fc8e6
5 changed files with 143 additions and 180 deletions
|
|
@ -529,8 +529,6 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
@import '../mixins/fileslist-row.scss';
|
||||
|
||||
/* Hover effect on tbody lines only */
|
||||
tr {
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -140,8 +140,6 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../mixins/fileslist-row.scss';
|
||||
|
||||
// Scoped row
|
||||
tr {
|
||||
padding-bottom: 300px;
|
||||
|
|
|
|||
|
|
@ -207,7 +207,6 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../mixins/fileslist-row.scss';
|
||||
.files-list__column {
|
||||
user-select: none;
|
||||
// Make sure the cell colors don't apply to column headers
|
||||
|
|
|
|||
|
|
@ -166,11 +166,6 @@ export default Vue.extend({
|
|||
background-color: var(--color-main-background);
|
||||
}
|
||||
|
||||
/**
|
||||
* Common row styling. tr are handled by
|
||||
* vue-virtual-scroller, so we need to
|
||||
* have those rules in here.
|
||||
*/
|
||||
tr {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
|
@ -178,6 +173,149 @@ export default Vue.extend({
|
|||
width: 100%;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
td, th {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
justify-content: left;
|
||||
width: var(--row-height);
|
||||
height: var(--row-height);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--color-text-maxcontrast);
|
||||
border: none;
|
||||
|
||||
// Columns should try to add any text
|
||||
// node wrapped in a span. That should help
|
||||
// with the ellipsis on overflow.
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-checkbox {
|
||||
justify-content: center;
|
||||
.checkbox-radio-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
--icon-size: var(--checkbox-size);
|
||||
|
||||
label.checkbox-radio-switch__label {
|
||||
width: var(--clickable-area);
|
||||
height: var(--clickable-area);
|
||||
margin: 0;
|
||||
padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
|
||||
}
|
||||
|
||||
.checkbox-radio-switch__icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--icon-preview-size);
|
||||
height: 100%;
|
||||
// Show same padding as the checkbox right padding for visual balance
|
||||
margin-right: var(--checkbox-padding);
|
||||
color: var(--color-primary-element);
|
||||
|
||||
& > span {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: var(--icon-preview-size);
|
||||
height: var(--icon-preview-size);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
overflow: hidden;
|
||||
width: var(--icon-preview-size);
|
||||
height: var(--icon-preview-size);
|
||||
border-radius: var(--border-radius);
|
||||
background-repeat: no-repeat;
|
||||
// Center and contain the preview
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-name {
|
||||
// Prevent link from overflowing
|
||||
overflow: hidden;
|
||||
// Take as much space as possible
|
||||
flex: 1 1 auto;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Fill cell height and width
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Keyboard indicator a11y
|
||||
&:focus .files-list__row-name-text,
|
||||
&:focus-visible .files-list__row-name-text {
|
||||
outline: 2px solid var(--color-main-text) !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-name-text {
|
||||
// Make some space for the outline
|
||||
padding: 5px 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-actions {
|
||||
width: auto;
|
||||
|
||||
// Add margin to all cells after the actions
|
||||
& ~ td,
|
||||
& ~ th {
|
||||
margin: 0 var(--cell-margin);
|
||||
}
|
||||
|
||||
& > button {
|
||||
.button-vue__text {
|
||||
// Remove bold from default button styling
|
||||
font-weight: normal;
|
||||
}
|
||||
&:not(:hover, :focus, :active) .button-vue__wrapper {
|
||||
// Also apply color-text-maxcontrast to non-active button
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-size {
|
||||
// Right align text
|
||||
justify-content: flex-end;
|
||||
width: calc(var(--row-height) * 1.5);
|
||||
// opacity varies with the size
|
||||
color: var(--color-main-text);
|
||||
|
||||
// Icon is before text since size is right aligned
|
||||
.files-list__column-sort-button {
|
||||
padding: 0 16px 0 4px !important;
|
||||
.button-vue__wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-column-custom {
|
||||
width: calc(var(--row-height) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
|
||||
* This file is for every column styling that must be
|
||||
* shared between BOTH the files list AND the list header.
|
||||
* ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
|
||||
*/
|
||||
td, th {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
justify-content: left;
|
||||
width: var(--row-height);
|
||||
height: var(--row-height);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--color-text-maxcontrast);
|
||||
border: none;
|
||||
|
||||
// Columns should try to add any text
|
||||
// node wrapped in a span. That should help
|
||||
// with the ellipsis on overflow.
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-checkbox {
|
||||
justify-content: center;
|
||||
&::v-deep .checkbox-radio-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
--icon-size: var(--checkbox-size);
|
||||
|
||||
label.checkbox-radio-switch__label {
|
||||
width: var(--clickable-area);
|
||||
height: var(--clickable-area);
|
||||
margin: 0;
|
||||
padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
|
||||
}
|
||||
|
||||
.checkbox-radio-switch__icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--icon-preview-size);
|
||||
height: 100%;
|
||||
// Show same padding as the checkbox right padding for visual balance
|
||||
margin-right: var(--checkbox-padding);
|
||||
color: var(--color-primary-element);
|
||||
|
||||
& > span {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&::v-deep svg {
|
||||
width: var(--icon-preview-size);
|
||||
height: var(--icon-preview-size);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
overflow: hidden;
|
||||
width: var(--icon-preview-size);
|
||||
height: var(--icon-preview-size);
|
||||
border-radius: var(--border-radius);
|
||||
background-repeat: no-repeat;
|
||||
// Center and contain the preview
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-name {
|
||||
// Prevent link from overflowing
|
||||
overflow: hidden;
|
||||
// Take as much space as possible
|
||||
flex: 1 1 auto;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Fill cell height and width
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Keyboard indicator a11y
|
||||
&:focus .files-list__row-name-text,
|
||||
&:focus-visible .files-list__row-name-text {
|
||||
outline: 2px solid var(--color-main-text) !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-name-text {
|
||||
// Make some space for the outline
|
||||
padding: 5px 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-actions {
|
||||
width: auto;
|
||||
|
||||
// Add margin to all cells after the actions
|
||||
& ~ td,
|
||||
& ~ th {
|
||||
margin: 0 var(--cell-margin);
|
||||
}
|
||||
|
||||
&::v-deep > button {
|
||||
.button-vue__text {
|
||||
// Remove bold from default button styling
|
||||
font-weight: normal;
|
||||
}
|
||||
&:not(:hover, :focus, :active) .button-vue__wrapper {
|
||||
// Also apply color-text-maxcontrast to non-active button
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-size {
|
||||
// Right align text
|
||||
justify-content: flex-end;
|
||||
width: calc(var(--row-height) * 1.5);
|
||||
// opacity varies with the size
|
||||
color: var(--color-main-text);
|
||||
|
||||
// Icon is before text since size is right aligned
|
||||
::v-deep .files-list__column-sort-button {
|
||||
padding: 0 16px 0 4px !important;
|
||||
.button-vue__wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list__row-column-custom {
|
||||
width: calc(var(--row-height) * 2);
|
||||
}
|
||||
Loading…
Reference in a new issue