dc/dc
dc/dc
3
1
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases 32 Wiki Activity

feat(dark mode): removing custom css rules so clarity can handle dark/light modes. Handsontable css for dark mode

Browse Source
This commit is contained in:
Mihajlo Medjedovic 2024-05-23 16:16:47 +02:00
parent 5564aea9c2
commit 2c0afd0268
30 changed files with 273 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
client/src/app/app.component.scss
View File

@ -133,49 +133,19 @@ header {
color: #fff; 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 { ::ng-deep {
.htInvalid { .htInvalid {
background: black!important; background: black!important;
} }
@media screen and (max-width:480px) { @media screen and (max-width:480px) {
h2 { h2 {
font-size: .7rem!important; font-size: .7rem!important;
}
h3 {
font-size: .7rem;
}
} }
h3 {
font-size: .7rem;
}
}
.nav-link { .nav-link {
padding: 0rem 1rem 0rem 1rem; padding: 0rem 1rem 0rem 1rem;
@ -299,7 +269,7 @@ header {
filter: brightness(1.2); 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; 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-compact, .datagrid-history{
.datagrid { .datagrid {
border-collapse: separate; border-collapse: separate;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .125rem; border-radius: .125rem;
background-color: #fff;
color: #565656;
margin: 0; margin: 0;
margin-top: 1rem; margin-top: 1rem;
max-width: 100%; max-width: 100%;
@ -352,8 +313,8 @@ header {
} }
.datagrid-footer { .datagrid-footer {
position: absolute; position: absolute;
right: 15px; right: 30px;
top: 2px; top: 1px;
} }
.datagrid .datagrid-head { .datagrid .datagrid-head {
background-color: #fff; background-color: #fff;
@ -387,8 +348,6 @@ header {
border-collapse: separate; border-collapse: separate;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0px; border-radius: 0px;
background-color: #fff;
color: #565656;
margin: 0; margin: 0;
margin-top: 1rem; margin-top: 1rem;
max-width: 100%; max-width: 100%;
@ -399,7 +358,6 @@ header {
font-size: .45833rem; font-size: .45833rem;
font-weight: 600; font-weight: 600;
letter-spacing: .03em; letter-spacing: .03em;
background-color: #fff;
vertical-align: bottom; vertical-align: bottom;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
text-transform: uppercase; text-transform: uppercase;
@ -422,4 +380,34 @@ header {
max-width: 400px; max-width: 400px;
width: 100%; 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;
}
} }

20
client/src/app/editor/editor.component.html
View File

@ -362,8 +362,8 @@
<ng-container *ngIf="!getdataError"> <ng-container *ngIf="!getdataError">
<span class="spinner"> Loading... </span> <span class="spinner"> Loading... </span>
<div> <div class="mt-10">
<h3>Loading table</h3> <p cds-text="section">Loading table</p>
</div> </div>
</ng-container> </ng-container>
@ -372,8 +372,8 @@
<clr-icon shape="error-standard" class="error-icon"></clr-icon> <clr-icon shape="error-standard" class="error-icon"></clr-icon>
</span> </span>
<div> <div class="mt-10">
<h3>Loading table error</h3> <p cds-text="section">Loading table error</p>
</div> </div>
</ng-container> </ng-container>
</div> </div>
@ -398,6 +398,7 @@
hotId="hotInstance" hotId="hotInstance"
id="hotTable" id="hotTable"
class="edit-hot" class="edit-hot"
className="htDark"
[class.hidden]="hotTable.hidden" [class.hidden]="hotTable.hidden"
[licenseKey]="hotTable.licenseKey" [licenseKey]="hotTable.licenseKey"
> >
@ -486,11 +487,13 @@
support&#64;datacontroller.io</span support&#64;datacontroller.io</span
> >
<div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8"> <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
<div class="form-group"> <div class="text-area-full-width">
<label for="formFields_8">Message</label> <label for="formFields_8" class="mb-5 d-block">Message</label>
<textarea <textarea
clrTextarea
[(ngModel)]="message" [(ngModel)]="message"
[disabled]="!validationDone" [disabled]="!validationDone"
tabindex="0"
[value]=" [value]="
!validationDone !validationDone
? 'Please wait while we validate ' + ? 'Please wait while we validate ' +
@ -498,10 +501,9 @@
' cells.' ' cells.'
: '' : ''
" "
class="w-100" class="submit-reason"
type="text" type="text"
id="formFields_8" id="formFields_8"
rows="5"
></textarea> ></textarea>
</div> </div>
<!-- TODO:approvers list --> <!-- TODO:approvers list -->
@ -520,6 +522,7 @@
[disabled]="!validationDone" [disabled]="!validationDone"
type="submit" type="submit"
class="btn btn-sm btn-success-outline m-0" class="btn btn-sm btn-success-outline m-0"
tabindex="0"
(click)="saveTable(hotTable.data)" (click)="saveTable(hotTable.data)"
> >
Submit Submit
@ -528,6 +531,7 @@
id="cancelSubmitBtn" id="cancelSubmitBtn"
type="button" type="button"
class="btn btn-sm btn-outline" class="btn btn-sm btn-outline"
tabindex="0"
(click)="cancelSubmit(); submit = false; validationDone = 0" (click)="cancelSubmit(); submit = false; validationDone = 0"
> >
Cancel Cancel

10
client/src/app/editor/editor.component.scss
View File

@ -21,12 +21,12 @@ hot-table {
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight { .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
&.primaryKeyHeaderStyle { &.primaryKeyHeaderStyle {
background: #306b00b0; background-color: #306b00b0 !important;
} }
} }
.primaryKeyHeaderStyle { .primaryKeyHeaderStyle {
background: #306b006e; background-color: #306b006e !important;
} }
th.readonlyCell { th.readonlyCell {
@ -41,6 +41,12 @@ hot-table {
} }
} }
.submit-reason {
min-height: 120px;
max-height: 120px;
height: 120px;
}
.infoBar { .infoBar {
margin-top:14px; margin-top:14px;
background: #495967; background: #495967;

1
client/src/app/editor/editor.component.ts
View File

@ -3193,7 +3193,6 @@ export class EditorComponent implements OnInit, AfterViewInit {
rowHeights: 24, rowHeights: 24,
maxRows: this.licenceState.value.editor_rows_allowed || Infinity, maxRows: this.licenceState.value.editor_rows_allowed || Infinity,
invalidCellClassName: 'htInvalid', invalidCellClassName: 'htInvalid',
className: 'htDark',
dropdownMenu: { dropdownMenu: {
items: { items: {
make_read_only: { make_read_only: {

2
client/src/app/group/group.component.html
View File

@ -28,7 +28,7 @@
<clr-tree-node <clr-tree-node
(click)="groupOnClick(group)" (click)="groupOnClick(group)"
*ngIf="!group['hidden']" *ngIf="!group['hidden']"
[class.table-active]="group.GROUPURI === groupUri" [class.active]="group.GROUPURI === groupUri"
> >
<p class="m-0 cursor-pointer list-padding"> <p class="m-0 cursor-pointer list-padding">
<clr-icon shape="users"></clr-icon> <clr-icon shape="users"></clr-icon>

10
client/src/app/home/home.component.html
View File

@ -87,7 +87,7 @@
(click)="!tableLocked ? onTableClick(libTable, library) : ''" (click)="!tableLocked ? onTableClick(libTable, library) : ''"
class="clr-treenode-link" class="clr-treenode-link"
[class.dc-locked-control]="tableLocked" [class.dc-locked-control]="tableLocked"
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)" [class.active]="libTabActive(library.LIBRARYREF, libTable)"
> >
<ng-container [ngSwitch]="libTable.includes('-FC')"> <ng-container [ngSwitch]="libTable.includes('-FC')">
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon> <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@ -128,12 +128,12 @@
size="60" size="60"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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 Please select a table
</h3> </p>
<h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray"> <p *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray mt-10" cds-text="section">
No Editable Tables Configured No Editable Tables Configured
</h3> </p>
</div> </div>
</div> </div>
</div> </div>

2
client/src/app/lineage/lineage.component.html
View File

@ -141,7 +141,7 @@
size="60" size="60"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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> </div>
<ng-container *ngIf="column || table"> <ng-container *ngIf="column || table">

2
client/src/app/metadata/metadata.component.html
View File

@ -73,7 +73,7 @@
size="60" size="60"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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>
<div class="loadingSpinner" *ngIf="loading"> <div class="loadingSpinner" *ngIf="loading">

8
client/src/app/review/approve-details/approve-details.component.html
View File

@ -311,8 +311,8 @@
class="h-24vh d-flex flex-column justify-content-center align-items-center" class="h-24vh d-flex flex-column justify-content-center align-items-center"
> >
<span class="spinner"> Loading... </span> <span class="spinner"> Loading... </span>
<div *ngIf="!loadingTable"> <div *ngIf="!loadingTable" class="mt-10">
<h3>Loading table</h3> <p cds-text="section">Loading table</p>
</div> </div>
</div> </div>
@ -519,8 +519,8 @@
class="h-25vh d-flex flex-column justify-content-center align-items-center" class="h-25vh d-flex flex-column justify-content-center align-items-center"
> >
<span class="spinner"> Loading... </span> <span class="spinner"> Loading... </span>
<div *ngIf="!loadingTable"> <div *ngIf="!loadingTable" class="mt-10">
<h3>Loading table</h3> <p cds-text="section">Loading table</p>
</div> </div>
</div> </div>
<div class="tableCont"> <div class="tableCont">

19
client/src/app/review/approve/approve.component.html
View File

@ -99,21 +99,10 @@
</clr-dg-cell> </clr-dg-cell>
</clr-dg-row> </clr-dg-row>
<clr-dg-footer class="d-flex justify-content-start"> <clr-dg-footer>
<span>items per page</span> <clr-dg-pagination #pagination [clrDgPageSize]="10">
<select [(ngModel)]="itemsNum"> <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]">Items per page</clr-dg-page-size>
<option [ngValue]="3">3</option> {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} approvals
<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-pagination> </clr-dg-pagination>
</clr-dg-footer> </clr-dg-footer>
</clr-datagrid> </clr-datagrid>

20
client/src/app/review/submitter/submitter.component.html
View File

@ -86,22 +86,10 @@
</clr-dg-cell> </clr-dg-cell>
</clr-dg-row> </clr-dg-row>
<clr-dg-footer class="d-flex justify-content-start"> <clr-dg-footer>
<span>items per page</span> <clr-dg-pagination #pagination [clrDgPageSize]="10">
<select [(ngModel)]="itemsNum"> <clr-dg-page-size [clrPageSizeOptions]="[3 ,5 ,10, 15]">Items per page</clr-dg-page-size>
<option [ngValue]="3">3</option> {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} submissions
<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-pagination> </clr-dg-pagination>
</clr-dg-footer> </clr-dg-footer>
</clr-datagrid> </clr-datagrid>

2
client/src/app/role/role.component.html
View File

@ -27,7 +27,7 @@
<clr-tree-node <clr-tree-node
(click)="roleOnClick(role)" (click)="roleOnClick(role)"
*ngIf="!role['hidden']" *ngIf="!role['hidden']"
[class.table-active]="role.ROLEURI === roleUri" [class.active]="role.ROLEURI === roleUri"
> >
<p class="m-0 cursor-pointer list-padding"> <p class="m-0 cursor-pointer list-padding">
<clr-icon shape="blocks-group"></clr-icon> <clr-icon shape="blocks-group"></clr-icon>

1
client/src/app/services/app.service.ts
View File

@ -95,6 +95,7 @@ export class AppService {
MEMSIZE: res.MEMSIZE, MEMSIZE: res.MEMSIZE,
SYSPROCESSMODE: res.SYSPROCESSMODE, SYSPROCESSMODE: res.SYSPROCESSMODE,
SYSHOSTNAME: res.SYSHOSTNAME, SYSHOSTNAME: res.SYSHOSTNAME,
SYSUSERID: res.SYSUSERID,
SYSHOSTINFOLONG: res.SYSHOSTINFOLONG, SYSHOSTINFOLONG: res.SYSHOSTINFOLONG,
SYSENCODING: res.SYSENCODING, SYSENCODING: res.SYSENCODING,
AUTOEXEC: res.AUTOEXEC, AUTOEXEC: res.AUTOEXEC,

2
client/src/app/shared/dc-tree/dc-tree.component.html
View File

@ -93,7 +93,7 @@
" "
class="clr-treenode-link" class="clr-treenode-link"
[class.dc-locked-control]="tableLocked" [class.dc-locked-control]="tableLocked"
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)" [class.active]="libTabActive(library.LIBRARYREF, libTable)"
> >
<ng-container [ngSwitch]="libTable.includes('-FC')"> <ng-container [ngSwitch]="libTable.includes('-FC')">
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon> <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>

1
client/src/app/shared/requests-modal/requests-modal.component.scss
View File

@ -70,7 +70,6 @@
border-radius: 3px; border-radius: 3px;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
background-color: #fbfbfb;
height: 48vh; height: 48vh;
overflow: auto; overflow: auto;

1
client/src/app/shared/viewboxes/viewboxes.component.html
View File

@ -389,6 +389,7 @@
*ngIf="viewboxTableIndex > -1" *ngIf="viewboxTableIndex > -1"
[hotId]="'hotInstance_viewbox_' + viewbox.id" [hotId]="'hotInstance_viewbox_' + viewbox.id"
id="hotTable" id="hotTable"
className="htDark"
[readOnly]="true" [readOnly]="true"
[modifyColWidth]="maxWidthCheker" [modifyColWidth]="maxWidthCheker"
[copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste" [copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"

2
client/src/app/shared/viewboxes/viewboxes.component.ts
View File

@ -433,6 +433,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
viewboxTable!.hotTable.headerPks.indexOf(column) > -1 viewboxTable!.hotTable.headerPks.indexOf(column) > -1
if (isPKCol) th.classList.add('primaryKeyHeaderStyle') if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
// Dark mode
th.classList.add('darkTH')
} }
}) })
hotInstance?.render() hotInstance?.render()

2
client/src/app/stage/stage.component.html
View File

@ -118,12 +118,14 @@
<hot-table <hot-table
hotId="hotInstance" hotId="hotInstance"
id="hotTable" id="hotTable"
className="htDark"
[data]="hotTable.data" [data]="hotTable.data"
[colHeaders]="hotTable.colHeaders" [colHeaders]="hotTable.colHeaders"
[columns]="hotTable.columns" [columns]="hotTable.columns"
[maxRows]="hotTable.maxRows" [maxRows]="hotTable.maxRows"
[height]="hotTable.height" [height]="hotTable.height"
[licenseKey]="hotTable.licenseKey" [licenseKey]="hotTable.licenseKey"
[afterGetColHeader]="hotTable.afterGetColHeader"
stretchH="all" stretchH="all"
[cells]="hotTable.cells" [cells]="hotTable.cells"
> >

6
client/src/app/stage/stage.component.ts
View File

@ -32,7 +32,11 @@ export class StageComponent implements OnInit {
height: 500, height: 500,
settings: {}, settings: {},
licenseKey: undefined, 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( constructor(

1
client/src/app/system/models/environment-info.model.ts
View File

@ -6,6 +6,7 @@ export interface EnvironmentInfo {
MEMSIZE: string MEMSIZE: string
SYSPROCESSMODE: string SYSPROCESSMODE: string
SYSHOSTNAME: string SYSHOSTNAME: string
SYSUSERID: string
SYSHOSTINFOLONG: string SYSHOSTINFOLONG: string
SYSENCODING: string SYSENCODING: string
AUTOEXEC: string AUTOEXEC: string

12
client/src/app/system/system.component.html
View File

@ -36,6 +36,10 @@
SYSHOSTNAME: SYSHOSTNAME:
<span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span> <span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
</p> </p>
<p cds-text="label" class="m-0">
SYSUSERID:
<span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
</p>
<p cds-text="label" class="m-0"> <p cds-text="label" class="m-0">
SYSHOSTINFOLONG: SYSHOSTINFOLONG:
<span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span> <span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
@ -47,10 +51,6 @@
<p cds-text="label" class="m-0"> <p cds-text="label" class="m-0">
AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span> AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
</p> </p>
<p cds-text="label" class="m-0">
DC ADMIN GROUP:
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
</p>
</div> </div>
<div class="d-flex clr-justify-content-lg-center"> <div class="d-flex clr-justify-content-lg-center">
@ -73,6 +73,10 @@
<p cds-text="label" class="m-0"> <p cds-text="label" class="m-0">
HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span> HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
</p> </p>
<p cds-text="label" class="m-0">
DC Admin Group:
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
</p>
</div> </div>
</div> </div>

3
client/src/app/system/system.component.scss
View File

@ -27,7 +27,8 @@
} }
.dark { .dark {
color: black; font-weight: bold;
margin-left: 5px;
} }
@media (max-width: 993px) { @media (max-width: 993px) {

2
client/src/app/user/user.component.html
View File

@ -27,7 +27,7 @@
<clr-tree-node <clr-tree-node
(click)="userOnClick(user)" (click)="userOnClick(user)"
*ngIf="!user['hidden']" *ngIf="!user['hidden']"
[class.table-active]="userInfo?.URI === user.URI" [class.active]="userInfo?.URI === user.URI"
> >
<p class="m-0 cursor-pointer list-padding"> <p class="m-0 cursor-pointer list-padding">
<clr-icon shape="user"></clr-icon> <clr-icon shape="user"></clr-icon>

34
client/src/app/viewer/viewer.component.html
View File

@ -93,7 +93,7 @@
(click)="!tableLocked ? onTableClick(libTable, library) : ''" (click)="!tableLocked ? onTableClick(libTable, library) : ''"
class="clr-treenode-link" class="clr-treenode-link"
[class.dc-locked-control]="tableLocked" [class.dc-locked-control]="tableLocked"
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)" [class.active]="libTabActive(library.LIBRARYREF, libTable)"
> >
<ng-container [ngSwitch]="libTable.includes('-FC')"> <ng-container [ngSwitch]="libTable.includes('-FC')">
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon> <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@ -197,7 +197,7 @@
<div class="modal-body web-query"> <div class="modal-body web-query">
<div class="row"> <div class="row">
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12"> <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"> <div class="card-header d-flex justify-content-between">
<span>Copy the below into your preferred client tool:</span> <span>Copy the below into your preferred client tool:</span>
@ -227,15 +227,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-block word-break-all"> <div class="card-block web-query-wrapper word-break-all">
<textarea <textarea
class="web-query-text w-100" clrTextarea
class="web-query-text"
rows="4" rows="4"
cols="50" cols="50"
#cliCommandInput #cliCommandInput
(focus)="onCliCommandFocus($event)" (focus)="onCliCommandFocus($event)"
type="text" type="text"
value="{{ webQueryText }}" [value]="webQueryText"
readonly readonly
> >
</textarea> </textarea>
@ -317,8 +318,8 @@
<div class="loadingSpinner" *ngIf="loadingTableView"> <div class="loadingSpinner" *ngIf="loadingTableView">
<span class="spinner"> Loading... </span> <span class="spinner"> Loading... </span>
<div> <div class="mt-10">
<h4>Loading table viewer</h4> <p cds-text="section">Loading Table Viewer</p>
</div> </div>
</div> </div>
@ -363,8 +364,9 @@
</section> </section>
<div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row"> <div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row">
<h3 <p
class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center" 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-tooltip class="d-flex clr-align-items-center">
<clr-icon <clr-icon
@ -409,7 +411,7 @@
shape="refresh" shape="refresh"
></clr-icon> ></clr-icon>
</ng-container> </ng-container>
</h3> </p>
</div> </div>
<div class="options-col clr-col-md"> <div class="options-col clr-col-md">
@ -480,7 +482,7 @@
size="60" size="60"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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> </div>
<ng-container *ngIf="!noData && !noDataReqErr && !table && lib"> <ng-container *ngIf="!noData && !noDataReqErr && !table && lib">
@ -491,10 +493,10 @@
class="form-block table-search-wrapper sw clr-col-md" class="form-block table-search-wrapper sw clr-col-md"
></section> ></section>
<div class="title-col clr-col-auto"> <div class="title-col clr-col-auto mt-15 mb-15">
<h3 class="viewerTitle mt-17"> <p cds-text="section">
{{ lib }} {{ lib }}
</h3> </p>
<clr-icon <clr-icon
(click)="reloadLibInfo()" (click)="reloadLibInfo()"
class="refresh-table" class="refresh-table"
@ -518,7 +520,7 @@
size="40" size="40"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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>
<div *ngIf="libinfo !== null" class="libinfo m-0 clr-row"> <div *ngIf="libinfo !== null" class="libinfo m-0 clr-row">
@ -608,6 +610,7 @@
<hot-table <hot-table
hotId="hotInstance" hotId="hotInstance"
id="hotTable" id="hotTable"
className="htDark"
[multiColumnSorting]="true" [multiColumnSorting]="true"
[viewportRowRenderingOffset]="50" [viewportRowRenderingOffset]="50"
[data]="hotTable.data" [data]="hotTable.data"
@ -623,6 +626,7 @@
[cells]="hotTable.cells" [cells]="hotTable.cells"
[maxRows]="hotTable.maxRows" [maxRows]="hotTable.maxRows"
[manualColumnResize]="true" [manualColumnResize]="true"
[afterGetColHeader]="hotTable.afterGetColHeader"
[rowHeaders]="hotTable.rowHeaders" [rowHeaders]="hotTable.rowHeaders"
[rowHeaderWidth]="hotTable.rowHeaderWidth" [rowHeaderWidth]="hotTable.rowHeaderWidth"
[rowHeights]="hotTable.rowHeights" [rowHeights]="hotTable.rowHeights"

53
client/src/app/viewer/viewer.component.scss
View File

@ -54,12 +54,6 @@ clr-tree-node button {
} }
} }
.viewerTitle {
text-align:center;
margin-bottom: 15px;
margin-top: 16px;
}
.dropdown-menu { .dropdown-menu {
width: 180px; width: 180px;
margin-top: -18px; margin-top: -18px;
@ -126,8 +120,14 @@ clr-tree-node button {
hot-table { hot-table {
::ng-deep { ::ng-deep {
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
&.primaryKeyHeaderStyle {
background-color: #306b00b0 !important;
}
}
.primaryKeyHeaderStyle { .primaryKeyHeaderStyle {
background: #306b006e; background-color: #306b006e !important;
} }
} }
} }
@ -145,6 +145,45 @@ hot-table {
.web-query-text { .web-query-text {
min-height: 100px; min-height: 100px;
max-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;
}
} }
} }

8
client/src/app/viewer/viewer.component.ts
View File

@ -112,11 +112,14 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
height: '100%', height: '100%',
maxRows: this.licenceState.value.viewer_rows_allowed || Infinity, maxRows: this.licenceState.value.viewer_rows_allowed || Infinity,
settings: {}, settings: {},
afterGetColHeader: undefined,
licenseKey: undefined, licenseKey: undefined,
rowHeaders: (index: number) => { rowHeaders: (index: number) => {
return ' ' return ' '
}, },
afterGetColHeader: (col: number, th: any, headerLevel: number) => {
// Dark mode
th.classList.add('darkTH')
},
rowHeaderWidth: 15, rowHeaderWidth: 15,
rowHeights: 20, rowHeights: 20,
contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'], 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 const isPKCol = column && this.headerPks.indexOf(column) > -1
if (isPKCol) th.classList.add('primaryKeyHeaderStyle') if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
// Dark mode
th.classList.add('darkTH')
} }
}) })
} }

12
client/src/app/xlmap/xlmap.component.html
View File

@ -33,7 +33,7 @@
<button <button
(click)="xlmapOnClick(xlmap)" (click)="xlmapOnClick(xlmap)"
class="clr-treenode-link" class="clr-treenode-link"
[class.table-active]="isActiveXLMap(xlmap.id)" [class.active]="isActiveXLMap(xlmap.id)"
> >
<clr-icon shape="file"></clr-icon> <clr-icon shape="file"></clr-icon>
{{ xlmap.id }} {{ xlmap.id }}
@ -50,12 +50,12 @@
size="60" size="60"
class="is-info icon-dc-fill" class="is-info icon-dc-fill"
></clr-icon> ></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 Please select a map
</h3> </p>
<h3 *ngIf="xlmaps.length < 1" class="text-center color-gray"> <p *ngIf="xlmaps.length < 1" class="text-center color-gray mt-10" cds-text="section">
No excel map is found No excel map is found
</h3> </p>
</div> </div>
<div class="loadingSpinner" *ngIf="isLoading"> <div class="loadingSpinner" *ngIf="isLoading">
@ -119,6 +119,7 @@
<hot-table <hot-table
hotId="hotInstance" hotId="hotInstance"
id="hot-table" id="hot-table"
className="htDark"
[multiColumnSorting]="true" [multiColumnSorting]="true"
[viewportRowRenderingOffset]="50" [viewportRowRenderingOffset]="50"
[data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData" [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
@ -131,6 +132,7 @@
[filters]="true" [filters]="true"
[height]="'100%'" [height]="'100%'"
stretchH="all" stretchH="all"
[afterGetColHeader]="afterGetColHeader"
[modifyColWidth]="maxWidthChecker" [modifyColWidth]="maxWidthChecker"
[cells]="getCellConfiguration" [cells]="getCellConfiguration"
[maxRows]="hotTableMaxRows" [maxRows]="hotTableMaxRows"

6
client/src/app/xlmap/xlmap.component.ts
View File

@ -117,6 +117,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
data: 'VALUE_TXT' data: 'VALUE_TXT'
} }
] ]
public xlData: XLUploadEntry[] = [] public xlData: XLUploadEntry[] = []
public showUploadModal = false public showUploadModal = false
@ -151,6 +152,11 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
event.target.focus() event.target.focus()
} }
public afterGetColHeader(column: number, th: any) {
// Dark mode
th.classList.add('darkTH')
}
public xlmapOnClick(xlmap: XLMapListItem) { public xlmapOnClick(xlmap: XLMapListItem) {
if (xlmap.id !== this.selectedXLMap?.id) { if (xlmap.id !== this.selectedXLMap?.id) {
this.selectedXLMap = xlmap this.selectedXLMap = xlmap

103
client/src/styles.scss
View File

@ -65,9 +65,27 @@ html {
} }
} }
button { body[cds-theme="dark"] {
&:focus { button {
outline: none; &: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; margin-top: 15px;
} }
.mt-17 {
margin-top: 17px;
}
.mt-20 { .mt-20 {
margin-top: 20px; margin-top: 20px;
} }
@ -347,6 +361,10 @@ button {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.mb-15 {
margin-bottom: 15px;
}
.mb-20 { .mb-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -387,16 +405,18 @@ button {
background: transparent !important; background: transparent !important;
} }
.color-gray { body[cds-theme="light"] {
color: #5a5a5a; .color-gray {
} color: #5a5a5a;
}
.color-dark-gray { .color-dark-gray {
color: #495967; color: #495967;
} }
.color-darker-gray { .color-darker-gray {
color: #314351; color: #314351;
}
} }
.color-white { .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 { .progresStatic {
margin-top: -6px !important; margin-top: -6px !important;
position: absolute !important; position: absolute !important;
@ -660,10 +699,6 @@ button {
margin-left: 0.2rem !important; margin-left: 0.2rem !important;
} }
.table-active {
background: #d8e3e9 !important;
color: black !important;
}
.table-active:focus { .table-active:focus {
background: #d8e3e9; background: #d8e3e9;
@ -778,6 +813,10 @@ body[cds-theme="dark"] {
background: #487d96; background: #487d96;
color: #eee; color: #eee;
} }
&.ht__highlight {
background: #3b6b81;
}
} }
} }
@ -811,6 +850,25 @@ body[cds-theme="dark"] {
visibility: hidden; 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) { @media (min-width: 576px) {
.d-sm-none { .d-sm-none {
display: none !important; display: none !important;
@ -1129,8 +1187,6 @@ hr.light {
} }
.table-search-wrapper { .table-search-wrapper {
background-color: #fff;
.input-wrapper { .input-wrapper {
position: relative; position: relative;
min-width: 170px; min-width: 170px;
@ -1144,7 +1200,10 @@ hr.light {
clr-icon { clr-icon {
cursor: pointer; cursor: pointer;
background: white; }
[name="search-input"] {
padding-right: 25px;
} }
} }

2
sas/sasjs/sasjsconfig.json
View File

@ -230,7 +230,7 @@
"macroVars": {} "macroVars": {}
}, },
"streamConfig": { "streamConfig": {
"streamWeb": true, "streamWeb": false,
"streamWebFolder": "web", "streamWebFolder": "web",
"webSourcePath": "../client/dist", "webSourcePath": "../client/dist",
"streamServiceName": "DataController2", "streamServiceName": "DataController2",