Skip to content

Commit

Permalink
Change table layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlpereira
jlpereira committed Feb 25, 2025
1 parent f0aecbb commit b9502fe
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 65 deletions.
10 changes: 10 additions & 0 deletions app/assets/stylesheets/helpers/list/tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,13 @@ table {
}
}
}

.table-header-border {
th {
border-right: 1px solid $navigation_border;
}

th:first-child {
border-left: 1px solid $navigation_border;
}
}
104 changes: 77 additions & 27 deletions app/javascript/vue/components/Filter/Table/TableResults.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<HandyScroll>
<table
class="table-striped table-cell-border full_width"
class="table-striped table-cell-border table-header-border full_width"
v-resize-column
ref="element"
>
Expand All @@ -14,6 +14,7 @@
"
>
<td
class="header-empty-td"
:colspan="
radialObject || radialAnnotator || radialNavigator ? 2 : 1
"
Expand Down Expand Up @@ -59,21 +60,18 @@
scope="colgroup"
class="cell-left-border"
>
Data attributes
7 Data attributes
</th>
</tr>

<tr>
<th class="w-2">
<input
v-model="selectIds"
:disabled="!list.length"
type="checkbox"
/>
</th>
<th
v-if="radialObject || radialAnnotator || radialNavigator"
class="w-2"
<td
class="header-empty-td"
:colspan="
radialObject || radialAnnotator || radialNavigator ? 2 : 1
"
/>

<th
v-for="(title, attr) in attributes"
:key="attr"
Expand All @@ -83,17 +81,13 @@
left: freezeColumnLeftPosition[attr]
}
"
:data-th-column="attr"
>
<div class="horizontal-left-content gap-small">
<input
type="checkbox"
title="Freeze column"
<VLock
:value="attr"
v-model="freezeColumn"
@click.stop
/>
<span>{{ title }}</span>

<VBtn
color="primary"
circle
Expand Down Expand Up @@ -155,23 +149,17 @@
},
'cursor-pointer'
]"
:data-th-column="`${key}.${property}`"
:style="
freezeColumn.includes(`${key}.${property}`) && {
left: freezeColumnLeftPosition[`${key}.${property}`]
}
"
>
<div class="horizontal-left-content gap-small">
<input
type="checkbox"
title="Freeze column"
<VLock
:value="`${key}.${property}`"
v-model="freezeColumn"
@click.stop
/>

<span>{{ property }}</span>
<VBtn
color="primary"
circle
Expand Down Expand Up @@ -219,6 +207,62 @@
</div>
</th>
</template>
</tr>

<tr>
<th class="w-2">
<input
v-model="selectIds"
:disabled="!list.length"
type="checkbox"
/>
</th>
<th
v-if="radialObject || radialAnnotator || radialNavigator"
class="w-2"
/>
<th
v-for="(title, attr) in attributes"
:key="attr"
:class="['cursor-pointer', { freeze: freezeColumn.includes(attr) }]"
:style="
freezeColumn.includes(attr) && {
left: freezeColumnLeftPosition[attr]
}
"
:data-th-column="attr"
>
<div class="horizontal-left-content gap-small">
<span>{{ title }}</span>
</div>
</th>

<template
v-for="(propertiesList, key) in layout?.properties"
:key="key"
>
<th
v-for="(property, pIndex) in propertiesList"
:key="property"
:class="[
{
'cell-left-border': pIndex === 0,
freeze: freezeColumn.includes(`${key}.${property}`)
},
'cursor-pointer'
]"
:data-th-column="`${key}.${property}`"
:style="
freezeColumn.includes(`${key}.${property}`) && {
left: freezeColumnLeftPosition[`${key}.${property}`]
}
"
>
<div class="horizontal-left-content gap-small">
<span>{{ property }}</span>
</div>
</th>
</template>

<template
v-if="
Expand Down Expand Up @@ -362,6 +406,7 @@ import { vResizeColumn } from '@/directives/resizeColumn.js'
import { humanize } from '@/helpers/strings'
import VBtn from '@/components/ui/VBtn/index.vue'
import VIcon from '@/components/ui/VIcon/index.vue'
import VLock from '@/components/ui/VLock/index.vue'
import HandyScroll from 'vue-handy-scroll'
import RadialNavigation from '@/components/radials/navigation/radial.vue'
import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
Expand Down Expand Up @@ -560,10 +605,15 @@ table {
.freeze {
left: 0;
position: sticky;
z-index: 1;
z-index: 10;
}
.header-empty-td {
background: #f8f8f8 !important;
border-bottom: 0;
}
:deep(.handy-scroll) {
z-index: 2;
z-index: 11;
}
</style>
71 changes: 33 additions & 38 deletions app/javascript/vue/components/ui/VLock/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div
title="Lock / Unlock">
<div title="Lock / Unlock">
<label class="switch-lock">
<input
v-bind="props"
v-model="checked"
type="checkbox">
type="checkbox"
/>
<span>
<em></em>
<strong></strong>
Expand All @@ -13,36 +14,30 @@
</div>
</template>

<script>
export default {
name: 'VLock',
<script setup>
defineOptions({
name: 'VLock'
})
props: {
modelValue: {
type: Boolean,
default: false
}
},
emits: ['update:modelValue'],
computed: {
checked: {
get () {
return this.modelValue
},
set (value) {
this.$emit('update:modelValue', value)
}
}
const props = defineProps({
value: {
type: [String, Boolean],
required: false
}
}
})
const checked = defineModel({
type: [Array, Boolean],
default: false
})
</script>

<style lang="scss">
$primary: #FFDA44;
$lightGrey: #99A3BA;
$primary: #ffda44;
$lightGrey: #99a3ba;
.switch-lock {
user-select: none;
height: 28px;
display: block;
position: relative;
Expand All @@ -58,7 +53,7 @@ $lightGrey: #99A3BA;
position: relative;
vertical-align: middle;
white-space: nowrap;
transition: color .3s ease;
transition: color 0.3s ease;
&:before,
&:after {
content: '';
Expand All @@ -71,17 +66,17 @@ $lightGrey: #99A3BA;
left: 0;
width: 48px;
height: 28px;
background: #E4ECFA;
transition: all .3s ease;
background: #e4ecfa;
transition: all 0.3s ease;
}
&:after {
width: 24px;
height: 24px;
background: #fff;
top: 2px;
left: 3px;
box-shadow: 0 1px 3px rgba(#121621, .1);
transition: all .45s ease;
box-shadow: 0 1px 3px rgba(#121621, 0.1);
transition: all 0.45s ease;
}
em {
width: 8px;
Expand All @@ -93,7 +88,7 @@ $lightGrey: #99A3BA;
border-radius: 2px;
display: block;
z-index: 1;
transition: all .45s ease;
transition: all 0.45s ease;
&:before {
content: '';
width: 2px;
Expand All @@ -120,7 +115,7 @@ $lightGrey: #99A3BA;
position: absolute;
z-index: 1;
transform-origin: 0 100%;
transition: all .45s ease;
transition: all 0.45s ease;
transform: rotate(-35deg) translate(0, 1px);
}
}
Expand All @@ -139,7 +134,7 @@ $lightGrey: #99A3BA;
}
&:before {
content: '';
transition: all .3s ease .2s;
transition: all 0.3s ease 0.2s;
}
&:after {
content: '';
Expand All @@ -149,7 +144,7 @@ $lightGrey: #99A3BA;
left: 0;
top: 0;
color: $primary;
transition: all .3s ease;
transition: all 0.3s ease;
transform: translate(2px, 0);
}
}
Expand All @@ -173,14 +168,14 @@ $lightGrey: #99A3BA;
&:before {
opacity: 0;
visibility: hidden;
transition: all .3s ease;
transition: all 0.3s ease;
transform: translate(-2px, 0);
}
&:after {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
transition: all .3s ease .2s;
transition: all 0.3s ease 0.2s;
}
}
}
Expand Down

0 comments on commit b9502fe

Please sign in to comment.