Browse Source

#1675 common css for filter dropdown

pull/1714/head
Naman Anand 3 years ago
parent
commit
fea32b7da8
  1. 50
      packages/nc-gui/assets/style/style.css
  2. 4
      packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
  3. 2
      packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

50
packages/nc-gui/assets/style/style.css

@ -114,23 +114,18 @@ html {
overflow: hidden;
}
[v-cloak] {
display: none !important;
}
.v-btn {
margin: 0 2px;
}
html {
overflow-y: auto !important;
}
/* nested expansion panel bug */
.v-expansion-panel-header {
@ -141,7 +136,6 @@ html {
min-height: 64px !important;
}
/* Table validation message */
/*table .v-input__control {*/
/* position: relative;*/
@ -152,13 +146,11 @@ html {
/* bottom: -4px;*/
/*}*/
/*table edit dialog buttons*/
.v-small-dialog__actions button span {
font-weight: bolder;
}
/*resizer*/
.vertical-resizer {
@ -219,15 +211,25 @@ html {
background: linear-gradient(180deg, black, rgb(55, 55, 55));
}
.yellow-orange-gradient {
background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
background: -moz-linear-gradient(
left,
rgba(241, 231, 103, 1) 0%,
rgba(254, 182, 69, 1) 100%
);
background: -webkit-linear-gradient(
left,
rgba(241, 231, 103, 1) 0%,
rgba(254, 182, 69, 1) 100%
);
background: linear-gradient(
to right,
rgba(241, 231, 103, 1) 0%,
rgba(254, 182, 69, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1);
}
.white-gradient {
background: linear-gradient(45deg, white, lightskyblue);
}
@ -248,7 +250,6 @@ html {
background: linear-gradient(70deg, #fcbb07, #fcbb07);
}
.img-animation {
animation-name: vibrate;
animation-duration: 1.5s;
@ -262,7 +263,6 @@ html {
@keyframes vibrate {
0% {
transform: translateY(10px);
}
100% {
@ -270,26 +270,21 @@ html {
}
}
.search-overlay .v-overlay__content {
height: 100%;
width: 100%;
}
/* Draggable tree hover color */
.theme--dark .vtl-tree-node:hover {
background-color: rgb(94, 94, 94) !important;
}
.theme--light .vtl-tree-node:hover {
background-color: rgb(240, 240, 240) !important;
}
/*vue tree list icon font */
/*.sql-query-treeview .vtl-icon-folder:before {*/
@ -316,8 +311,8 @@ html {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.sql-query-treeview .custom-run-icon{}
.sql-query-treeview .custom-run-icon {
}
.sql-editor .v-expansion-panel-header {
min-height: 36px !important;
@ -327,7 +322,6 @@ html {
min-height: 40px !important;
}
.api-client .v-expansion-panel-header {
min-height: 36px !important;
padding: 0 0 0 10px;
@ -344,7 +338,7 @@ html {
}
.sql-query-treeview .vtl-operation {
margin-left: 2px !important;;
margin-left: 2px !important;
}
.sql-query-treeview .vtl-tree-node {
display: flex;
@ -354,7 +348,6 @@ html {
flex-grow: 1;
}
.ignore-height-style table .v-input__control {
height: auto !important;
}
@ -362,3 +355,10 @@ html {
.cursor-pointer {
cursor: pointer;
}
/* sorting and filter */
.menu-filter-dropdown {
max-height: 500px;
overflow-y: scroll;
}

4
packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@ -1,7 +1,7 @@
<template>
<div
class="backgroundColor pa-2"
style="width:530px; max-height: 500px; overflow-y:scroll;"
class="backgroundColor pa-2 menu-filter-dropdown"
style="width:530px;"
>
<div class="grid" @click.stop>
<template v-for="(filter,i) in filters" dense>

2
packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@ -27,7 +27,7 @@
</v-btn>
</v-badge>
</template>
<div class="backgroundColor pa-2" style="min-width: 330px; max-height: 500px; overflow-y:scroll;">
<div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px;">
<div class="sort-grid" @click.stop>
<template v-for="(sort,i) in sortList" dense>
<v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="sortList.splice(i,1)">

Loading…
Cancel
Save