feat(dark mode): removing custom css rules so clarity can handle dark/light modes. Handsontable css for dark mode
This commit is contained in:
parent
5564aea9c2
commit
2c0afd0268
|
@ -133,49 +133,19 @@ header {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navBarResp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
||||
padding: 0 .5rem 0 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: .125rem 0 0 .125rem;
|
||||
color: #95c84b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-block, .card-footer {
|
||||
padding: 10px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
::ng-deep {
|
||||
.htInvalid {
|
||||
background: black!important;
|
||||
}
|
||||
background: black!important;
|
||||
}
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
h2 {
|
||||
font-size: .7rem!important;
|
||||
|
||||
h2 {
|
||||
font-size: .7rem!important;
|
||||
}
|
||||
h3 {
|
||||
font-size: .7rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: .7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0rem 1rem 0rem 1rem;
|
||||
|
@ -299,7 +269,7 @@ header {
|
|||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.ht_master:not(.innerBorderInlineStart):not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
|
||||
.ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
|
||||
background-color: #2d4048;
|
||||
}
|
||||
}
|
||||
|
@ -317,20 +287,11 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0.125rem 0 0 #d7d7d7;
|
||||
border-radius: .0rem;
|
||||
border: 1px solid transparent;
|
||||
// min-height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.datagrid-compact, .datagrid-history{
|
||||
.datagrid {
|
||||
border-collapse: separate;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .125rem;
|
||||
background-color: #fff;
|
||||
color: #565656;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
max-width: 100%;
|
||||
|
@ -352,8 +313,8 @@ header {
|
|||
}
|
||||
.datagrid-footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 2px;
|
||||
right: 30px;
|
||||
top: 1px;
|
||||
}
|
||||
.datagrid .datagrid-head {
|
||||
background-color: #fff;
|
||||
|
@ -387,8 +348,6 @@ header {
|
|||
border-collapse: separate;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0px;
|
||||
background-color: #fff;
|
||||
color: #565656;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
max-width: 100%;
|
||||
|
@ -399,7 +358,6 @@ header {
|
|||
font-size: .45833rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .03em;
|
||||
background-color: #fff;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-transform: uppercase;
|
||||
|
@ -422,4 +380,34 @@ header {
|
|||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navBarResp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
||||
padding: 0 .5rem 0 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: .125rem 0 0 .125rem;
|
||||
color: #95c84b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-block, .card-footer {
|
||||
padding: 10px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
}
|
|
@ -362,8 +362,8 @@
|
|||
<ng-container *ngIf="!getdataError">
|
||||
<span class="spinner"> Loading... </span>
|
||||
|
||||
<div>
|
||||
<h3>Loading table</h3>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
|
@ -372,8 +372,8 @@
|
|||
<clr-icon shape="error-standard" class="error-icon"></clr-icon>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h3>Loading table error</h3>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading table error</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
@ -398,6 +398,7 @@
|
|||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
class="edit-hot"
|
||||
className="htDark"
|
||||
[class.hidden]="hotTable.hidden"
|
||||
[licenseKey]="hotTable.licenseKey"
|
||||
>
|
||||
|
@ -486,11 +487,13 @@
|
|||
support@datacontroller.io</span
|
||||
>
|
||||
<div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
|
||||
<div class="form-group">
|
||||
<label for="formFields_8">Message</label>
|
||||
<div class="text-area-full-width">
|
||||
<label for="formFields_8" class="mb-5 d-block">Message</label>
|
||||
<textarea
|
||||
clrTextarea
|
||||
[(ngModel)]="message"
|
||||
[disabled]="!validationDone"
|
||||
tabindex="0"
|
||||
[value]="
|
||||
!validationDone
|
||||
? 'Please wait while we validate ' +
|
||||
|
@ -498,10 +501,9 @@
|
|||
' cells.'
|
||||
: ''
|
||||
"
|
||||
class="w-100"
|
||||
class="submit-reason"
|
||||
type="text"
|
||||
id="formFields_8"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- TODO:approvers list -->
|
||||
|
@ -520,6 +522,7 @@
|
|||
[disabled]="!validationDone"
|
||||
type="submit"
|
||||
class="btn btn-sm btn-success-outline m-0"
|
||||
tabindex="0"
|
||||
(click)="saveTable(hotTable.data)"
|
||||
>
|
||||
Submit
|
||||
|
@ -528,6 +531,7 @@
|
|||
id="cancelSubmitBtn"
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline"
|
||||
tabindex="0"
|
||||
(click)="cancelSubmit(); submit = false; validationDone = 0"
|
||||
>
|
||||
Cancel
|
||||
|
|
|
@ -21,12 +21,12 @@ hot-table {
|
|||
|
||||
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
||||
&.primaryKeyHeaderStyle {
|
||||
background: #306b00b0;
|
||||
background-color: #306b00b0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryKeyHeaderStyle {
|
||||
background: #306b006e;
|
||||
background-color: #306b006e !important;
|
||||
}
|
||||
|
||||
th.readonlyCell {
|
||||
|
@ -41,6 +41,12 @@ hot-table {
|
|||
}
|
||||
}
|
||||
|
||||
.submit-reason {
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.infoBar {
|
||||
margin-top:14px;
|
||||
background: #495967;
|
||||
|
|
|
@ -3193,7 +3193,6 @@ export class EditorComponent implements OnInit, AfterViewInit {
|
|||
rowHeights: 24,
|
||||
maxRows: this.licenceState.value.editor_rows_allowed || Infinity,
|
||||
invalidCellClassName: 'htInvalid',
|
||||
className: 'htDark',
|
||||
dropdownMenu: {
|
||||
items: {
|
||||
make_read_only: {
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<clr-tree-node
|
||||
(click)="groupOnClick(group)"
|
||||
*ngIf="!group['hidden']"
|
||||
[class.table-active]="group.GROUPURI === groupUri"
|
||||
[class.active]="group.GROUPURI === groupUri"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="users"></clr-icon>
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
(click)="!tableLocked ? onTableClick(libTable, library) : ''"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
@ -128,12 +128,12 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 *ngIf="treeNodeLibraries?.length! > 0" class="text-center color-gray">
|
||||
<p *ngIf="treeNodeLibraries?.length! > 0" class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a table
|
||||
</h3>
|
||||
<h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray">
|
||||
</p>
|
||||
<p *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray mt-10" cds-text="section">
|
||||
No Editable Tables Configured
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -141,7 +141,7 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a column or table</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">Please select a column or table</p>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="column || table">
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a type</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">Please select a type</p>
|
||||
</div>
|
||||
|
||||
<div class="loadingSpinner" *ngIf="loading">
|
||||
|
|
|
@ -311,8 +311,8 @@
|
|||
class="h-24vh d-flex flex-column justify-content-center align-items-center"
|
||||
>
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div *ngIf="!loadingTable">
|
||||
<h3>Loading table</h3>
|
||||
<div *ngIf="!loadingTable" class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -519,8 +519,8 @@
|
|||
class="h-25vh d-flex flex-column justify-content-center align-items-center"
|
||||
>
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div *ngIf="!loadingTable">
|
||||
<h3>Loading table</h3>
|
||||
<div *ngIf="!loadingTable" class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableCont">
|
||||
|
|
|
@ -99,21 +99,10 @@
|
|||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="d-flex justify-content-start">
|
||||
<span>items per page</span>
|
||||
<select [(ngModel)]="itemsNum">
|
||||
<option [ngValue]="3">3</option>
|
||||
<option [ngValue]="5">5</option>
|
||||
<option [ngValue]="10">10</option>
|
||||
<option [ngValue]="15">15</option>
|
||||
</select>
|
||||
<clr-dg-pagination
|
||||
#pagination
|
||||
[clrDgPageSize]="itemsNum"
|
||||
class="center"
|
||||
>
|
||||
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
|
||||
{{ pagination.totalItems }} approvals
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]">Items per page</clr-dg-page-size>
|
||||
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} approvals
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
|
|
@ -86,22 +86,10 @@
|
|||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="d-flex justify-content-start">
|
||||
<span>items per page</span>
|
||||
<select [(ngModel)]="itemsNum">
|
||||
<option [ngValue]="3">3</option>
|
||||
<option [ngValue]="5">5</option>
|
||||
<option [ngValue]="10">10</option>
|
||||
<option [ngValue]="15">15</option>
|
||||
</select>
|
||||
<clr-dg-pagination
|
||||
#pagination
|
||||
[clrDgPageSize]="itemsNum"
|
||||
class="center"
|
||||
>
|
||||
{{ pagination.firstItem + 1 }} -
|
||||
{{ pagination.lastItem + 1 }} of
|
||||
{{ pagination.totalItems }} submissions
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[3 ,5 ,10, 15]">Items per page</clr-dg-page-size>
|
||||
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} submissions
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
<clr-tree-node
|
||||
(click)="roleOnClick(role)"
|
||||
*ngIf="!role['hidden']"
|
||||
[class.table-active]="role.ROLEURI === roleUri"
|
||||
[class.active]="role.ROLEURI === roleUri"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="blocks-group"></clr-icon>
|
||||
|
|
|
@ -95,6 +95,7 @@ export class AppService {
|
|||
MEMSIZE: res.MEMSIZE,
|
||||
SYSPROCESSMODE: res.SYSPROCESSMODE,
|
||||
SYSHOSTNAME: res.SYSHOSTNAME,
|
||||
SYSUSERID: res.SYSUSERID,
|
||||
SYSHOSTINFOLONG: res.SYSHOSTINFOLONG,
|
||||
SYSENCODING: res.SYSENCODING,
|
||||
AUTOEXEC: res.AUTOEXEC,
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
|
|
@ -70,7 +70,6 @@
|
|||
border-radius: 3px;
|
||||
|
||||
border: 1px solid #e2e2e2;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
height: 48vh;
|
||||
overflow: auto;
|
||||
|
|
|
@ -389,6 +389,7 @@
|
|||
*ngIf="viewboxTableIndex > -1"
|
||||
[hotId]="'hotInstance_viewbox_' + viewbox.id"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[readOnly]="true"
|
||||
[modifyColWidth]="maxWidthCheker"
|
||||
[copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"
|
||||
|
|
|
@ -433,6 +433,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
viewboxTable!.hotTable.headerPks.indexOf(column) > -1
|
||||
|
||||
if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
})
|
||||
hotInstance?.render()
|
||||
|
|
|
@ -118,12 +118,14 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[data]="hotTable.data"
|
||||
[colHeaders]="hotTable.colHeaders"
|
||||
[columns]="hotTable.columns"
|
||||
[maxRows]="hotTable.maxRows"
|
||||
[height]="hotTable.height"
|
||||
[licenseKey]="hotTable.licenseKey"
|
||||
[afterGetColHeader]="hotTable.afterGetColHeader"
|
||||
stretchH="all"
|
||||
[cells]="hotTable.cells"
|
||||
>
|
||||
|
|
|
@ -32,7 +32,11 @@ export class StageComponent implements OnInit {
|
|||
height: 500,
|
||||
settings: {},
|
||||
licenseKey: undefined,
|
||||
maxRows: this.licenceState.value.stage_rows_allowed || Infinity
|
||||
maxRows: this.licenceState.value.stage_rows_allowed || Infinity,
|
||||
afterGetColHeader: (column, th, headerLevel) => {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
},
|
||||
}
|
||||
|
||||
constructor(
|
||||
|
|
|
@ -6,6 +6,7 @@ export interface EnvironmentInfo {
|
|||
MEMSIZE: string
|
||||
SYSPROCESSMODE: string
|
||||
SYSHOSTNAME: string
|
||||
SYSUSERID: string
|
||||
SYSHOSTINFOLONG: string
|
||||
SYSENCODING: string
|
||||
AUTOEXEC: string
|
||||
|
|
|
@ -36,6 +36,10 @@
|
|||
SYSHOSTNAME:
|
||||
<span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
SYSUSERID:
|
||||
<span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
SYSHOSTINFOLONG:
|
||||
<span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
|
||||
|
@ -47,10 +51,6 @@
|
|||
<p cds-text="label" class="m-0">
|
||||
AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
DC ADMIN GROUP:
|
||||
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex clr-justify-content-lg-center">
|
||||
|
@ -73,6 +73,10 @@
|
|||
<p cds-text="label" class="m-0">
|
||||
HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
DC Admin Group:
|
||||
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -27,7 +27,8 @@
|
|||
}
|
||||
|
||||
.dark {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 993px) {
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
<clr-tree-node
|
||||
(click)="userOnClick(user)"
|
||||
*ngIf="!user['hidden']"
|
||||
[class.table-active]="userInfo?.URI === user.URI"
|
||||
[class.active]="userInfo?.URI === user.URI"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="user"></clr-icon>
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
(click)="!tableLocked ? onTableClick(libTable, library) : ''"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
@ -197,7 +197,7 @@
|
|||
<div class="modal-body web-query">
|
||||
<div class="row">
|
||||
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card no-borders">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<span>Copy the below into your preferred client tool:</span>
|
||||
|
||||
|
@ -227,15 +227,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block word-break-all">
|
||||
<div class="card-block web-query-wrapper word-break-all">
|
||||
<textarea
|
||||
class="web-query-text w-100"
|
||||
clrTextarea
|
||||
class="web-query-text"
|
||||
rows="4"
|
||||
cols="50"
|
||||
#cliCommandInput
|
||||
(focus)="onCliCommandFocus($event)"
|
||||
type="text"
|
||||
value="{{ webQueryText }}"
|
||||
[value]="webQueryText"
|
||||
readonly
|
||||
>
|
||||
</textarea>
|
||||
|
@ -317,8 +318,8 @@
|
|||
|
||||
<div class="loadingSpinner" *ngIf="loadingTableView">
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div>
|
||||
<h4>Loading table viewer</h4>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading Table Viewer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -363,8 +364,9 @@
|
|||
</section>
|
||||
|
||||
<div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row">
|
||||
<h3
|
||||
class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
|
||||
<p
|
||||
cds-text="section"
|
||||
class="clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
|
||||
>
|
||||
<clr-tooltip class="d-flex clr-align-items-center">
|
||||
<clr-icon
|
||||
|
@ -409,7 +411,7 @@
|
|||
shape="refresh"
|
||||
></clr-icon>
|
||||
</ng-container>
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="options-col clr-col-md">
|
||||
|
@ -480,7 +482,7 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a library</h3>
|
||||
<h3 class="text-center color-gray mt-10" cds-text="section">Please select a library</h3>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!noData && !noDataReqErr && !table && lib">
|
||||
|
@ -491,10 +493,10 @@
|
|||
class="form-block table-search-wrapper sw clr-col-md"
|
||||
></section>
|
||||
|
||||
<div class="title-col clr-col-auto">
|
||||
<h3 class="viewerTitle mt-17">
|
||||
<div class="title-col clr-col-auto mt-15 mb-15">
|
||||
<p cds-text="section">
|
||||
{{ lib }}
|
||||
</h3>
|
||||
</p>
|
||||
<clr-icon
|
||||
(click)="reloadLibInfo()"
|
||||
class="refresh-table"
|
||||
|
@ -518,7 +520,7 @@
|
|||
size="40"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a table</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">Please select a table</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="libinfo !== null" class="libinfo m-0 clr-row">
|
||||
|
@ -608,6 +610,7 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[multiColumnSorting]="true"
|
||||
[viewportRowRenderingOffset]="50"
|
||||
[data]="hotTable.data"
|
||||
|
@ -623,6 +626,7 @@
|
|||
[cells]="hotTable.cells"
|
||||
[maxRows]="hotTable.maxRows"
|
||||
[manualColumnResize]="true"
|
||||
[afterGetColHeader]="hotTable.afterGetColHeader"
|
||||
[rowHeaders]="hotTable.rowHeaders"
|
||||
[rowHeaderWidth]="hotTable.rowHeaderWidth"
|
||||
[rowHeights]="hotTable.rowHeights"
|
||||
|
|
|
@ -54,12 +54,6 @@ clr-tree-node button {
|
|||
}
|
||||
}
|
||||
|
||||
.viewerTitle {
|
||||
text-align:center;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 180px;
|
||||
margin-top: -18px;
|
||||
|
@ -126,8 +120,14 @@ clr-tree-node button {
|
|||
|
||||
hot-table {
|
||||
::ng-deep {
|
||||
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
||||
&.primaryKeyHeaderStyle {
|
||||
background-color: #306b00b0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryKeyHeaderStyle {
|
||||
background: #306b006e;
|
||||
background-color: #306b006e !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -145,6 +145,45 @@ hot-table {
|
|||
.web-query-text {
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.web-query-wrapper {
|
||||
::ng-deep {
|
||||
.clr-control-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
clr-textarea-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.clr-textarea-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-wrapper {
|
||||
margin-left: 0;
|
||||
|
||||
form {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
clr-input-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.clr-control-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -112,11 +112,14 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
|
|||
height: '100%',
|
||||
maxRows: this.licenceState.value.viewer_rows_allowed || Infinity,
|
||||
settings: {},
|
||||
afterGetColHeader: undefined,
|
||||
licenseKey: undefined,
|
||||
rowHeaders: (index: number) => {
|
||||
return ' '
|
||||
},
|
||||
afterGetColHeader: (col: number, th: any, headerLevel: number) => {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
},
|
||||
rowHeaderWidth: 15,
|
||||
rowHeights: 20,
|
||||
contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'],
|
||||
|
@ -1080,6 +1083,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
|
|||
const isPKCol = column && this.headerPks.indexOf(column) > -1
|
||||
|
||||
if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
|
||||
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
<button
|
||||
(click)="xlmapOnClick(xlmap)"
|
||||
class="clr-treenode-link"
|
||||
[class.table-active]="isActiveXLMap(xlmap.id)"
|
||||
[class.active]="isActiveXLMap(xlmap.id)"
|
||||
>
|
||||
<clr-icon shape="file"></clr-icon>
|
||||
{{ xlmap.id }}
|
||||
|
@ -50,12 +50,12 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 *ngIf="xlmaps.length > 0" class="text-center color-gray">
|
||||
<p *ngIf="xlmaps.length > 0" class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a map
|
||||
</h3>
|
||||
<h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
|
||||
</p>
|
||||
<p *ngIf="xlmaps.length < 1" class="text-center color-gray mt-10" cds-text="section">
|
||||
No excel map is found
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="loadingSpinner" *ngIf="isLoading">
|
||||
|
@ -119,6 +119,7 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hot-table"
|
||||
className="htDark"
|
||||
[multiColumnSorting]="true"
|
||||
[viewportRowRenderingOffset]="50"
|
||||
[data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
|
||||
|
@ -131,6 +132,7 @@
|
|||
[filters]="true"
|
||||
[height]="'100%'"
|
||||
stretchH="all"
|
||||
[afterGetColHeader]="afterGetColHeader"
|
||||
[modifyColWidth]="maxWidthChecker"
|
||||
[cells]="getCellConfiguration"
|
||||
[maxRows]="hotTableMaxRows"
|
||||
|
|
|
@ -117,6 +117,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
|
|||
data: 'VALUE_TXT'
|
||||
}
|
||||
]
|
||||
|
||||
public xlData: XLUploadEntry[] = []
|
||||
|
||||
public showUploadModal = false
|
||||
|
@ -151,6 +152,11 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
|
|||
event.target.focus()
|
||||
}
|
||||
|
||||
public afterGetColHeader(column: number, th: any) {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
|
||||
public xlmapOnClick(xlmap: XLMapListItem) {
|
||||
if (xlmap.id !== this.selectedXLMap?.id) {
|
||||
this.selectedXLMap = xlmap
|
||||
|
|
|
@ -65,9 +65,27 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
body[cds-theme="dark"] {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid rgb(255, 255, 255)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid rgb(0, 0, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -267,10 +285,6 @@ button {
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mt-17 {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
@ -347,6 +361,10 @@ button {
|
|||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
@ -387,16 +405,18 @@ button {
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
body[cds-theme="light"] {
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.color-dark-gray {
|
||||
color: #495967;
|
||||
}
|
||||
.color-dark-gray {
|
||||
color: #495967;
|
||||
}
|
||||
|
||||
.color-darker-gray {
|
||||
color: #314351;
|
||||
.color-darker-gray {
|
||||
color: #314351;
|
||||
}
|
||||
}
|
||||
|
||||
.color-white {
|
||||
|
@ -589,6 +609,25 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
.text-area-full-width {
|
||||
.clr-control-container {
|
||||
width: 100%;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
clr-textarea-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.clr-textarea-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.progresStatic {
|
||||
margin-top: -6px !important;
|
||||
position: absolute !important;
|
||||
|
@ -660,10 +699,6 @@ button {
|
|||
margin-left: 0.2rem !important;
|
||||
}
|
||||
|
||||
.table-active {
|
||||
background: #d8e3e9 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.table-active:focus {
|
||||
background: #d8e3e9;
|
||||
|
@ -778,6 +813,10 @@ body[cds-theme="dark"] {
|
|||
background: #487d96;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
&.ht__highlight {
|
||||
background: #3b6b81;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -811,6 +850,25 @@ body[cds-theme="dark"] {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
&.no-borders {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
.card-header, .card-block, .card-footer {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-inner-borders {
|
||||
.card-header, .card-block, .card-footer {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.d-sm-none {
|
||||
display: none !important;
|
||||
|
@ -1129,8 +1187,6 @@ hr.light {
|
|||
}
|
||||
|
||||
.table-search-wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
min-width: 170px;
|
||||
|
@ -1144,7 +1200,10 @@ hr.light {
|
|||
|
||||
clr-icon {
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
}
|
||||
|
||||
[name="search-input"] {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -230,7 +230,7 @@
|
|||
"macroVars": {}
|
||||
},
|
||||
"streamConfig": {
|
||||
"streamWeb": true,
|
||||
"streamWeb": false,
|
||||
"streamWebFolder": "web",
|
||||
"webSourcePath": "../client/dist",
|
||||
"streamServiceName": "DataController2",
|
||||
|
|
Loading…
Reference in New Issue
Block a user