Skip to content

Fix allignment on layout on right panel #8060

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

Merged
DaanHoogland merged 7 commits into from
Oct 30, 2023
Merged

Fix allignment on layout on right panel #8060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4f014de
Fix allignment on the right side of the page
harikrishna-patnala Oct 9, 2023
5ffb2a3
Size fixes
harikrishna-patnala Oct 9, 2023
e29364c
fix allignment on check box
harikrishna-patnala Oct 10, 2023
ec36043
Fix search view and filter by block size
harikrishna-patnala Oct 16, 2023
8765f28
Allignment changes
harikrishna-patnala Oct 26, 2023
4d57c01
Move filter next to refresh and move the radio buttons a bit upside
harikrishna-patnala Oct 26, 2023
00d1d57
Height adjustments
harikrishna-patnala Oct 27, 2023
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: 0 additions & 6 deletions ui/src/components/view/SearchView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,12 +699,6 @@ export default {
right: 0;
}
}

:deep(.ant-input-group) {
.ant-input-affix-wrapper {
width: calc(100% - 10px);
}
}
}

.filter-button {
Expand Down
42 changes: 24 additions & 18 deletions ui/src/views/AutogenView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,6 @@
<template #icon><reload-outlined /></template>
{{ $t('label.refresh') }}
</a-button>
<a-switch
v-if="!dataView && ['vm', 'volume', 'zone', 'cluster', 'host', 'storagepool', 'managementserver'].includes($route.name)"
style="margin-left: 8px; margin-bottom: 3px"
:checked-children="$t('label.metrics')"
:un-checked-children="$t('label.metrics')"
:checked="$store.getters.metrics"
@change="(checked, event) => { $store.dispatch('SetMetrics', checked) }"/>
<a-switch
v-if="!projectView && hasProjectId"
style="margin-left: 8px; margin-bottom: 3px"
:checked-children="$t('label.projects')"
:un-checked-children="$t('label.projects')"
:checked="$store.getters.listAllProjects"
@change="(checked, event) => { $store.dispatch('SetListAllProjects', checked) }"/>
<a-tooltip placement="right">
<template #title>
{{ $t('label.filterby') }}
Expand All @@ -54,7 +40,8 @@
v-if="!dataView && filters && filters.length > 0"
:placeholder="$t('label.filterby')"
:value="filterValue"
style="min-width: 120px; margin-left: 10px; margin-top: -4px"
style="min-width: 100px; margin-left: 10px; margin-bottom: 5px"
size=small
Copy link
Contributor

@DaanHoogland DaanHoogland Oct 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've seen console errors on "large" and "small" in the past. Where are thos defined, and are we sure this is not an issue here?

Copy link
Member Author

@harikrishna-patnala harikrishna-patnala Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont see any errors now @DaanHoogland, probably due to ant3 upgrade.

@change="changeFilter"
showSearch
optionFilterProp="label"
Expand All @@ -79,16 +66,30 @@
</a-select-option>
</a-select>
</a-tooltip>
<a-switch
v-if="!dataView && ['vm', 'volume', 'zone', 'cluster', 'host', 'storagepool', 'managementserver'].includes($route.name)"
style="margin-left: 8px; min-height: 23px; margin-bottom: 4px"
:checked-children="$t('label.metrics')"
:un-checked-children="$t('label.metrics')"
:checked="$store.getters.metrics"
@change="(checked, event) => { $store.dispatch('SetMetrics', checked) }"/>
<a-switch
v-if="!projectView && hasProjectId"
style="margin-left: 8px; min-height: 23px; margin-bottom: 4px"
:checked-children="$t('label.projects')"
:un-checked-children="$t('label.projects')"
:checked="$store.getters.listAllProjects"
@change="(checked, event) => { $store.dispatch('SetListAllProjects', checked) }"/>
</template>
</breadcrumb>
</a-col>
<a-col
:span="device === 'mobile' ? 24 : 12"
:style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-bottom': '-4px' }" >
:style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-top': '6px' }" >
<slot name="action" v-if="dataView && $route.path.startsWith('/publicip')"></slot>
<action-button
v-else
:style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: getStyle(), padding: '5px' }"
:style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: getStyle() }"
:loading="loading"
:actions="actions"
:selectedRowKeys="selectedRowKeys"
Expand All @@ -99,7 +100,6 @@
<search-view
v-if="!dataView"
:searchFilters="searchFilters"
style="min-width: 120px; margin-left: 10px; margin-top: 5px"
:searchParams="searchParams"
:apiName="apiName"
@search="onSearch"
Expand Down Expand Up @@ -1963,6 +1963,12 @@ export default {
vertical-align: text-bottom;
}

:deep(.ant-switch-inner) {
display: block;
font-size: 14px;
margin: 0px 14px 0px 28px;
}

:deep(.ant-alert-message) {
display: flex;
align-items: center;
Expand Down