Skip to content

Commit

Permalink
Merge pull request #1027 from StanZGenchev/fix-1025-1011
Browse files Browse the repository at this point in the history 
Dark mode fixes
  • Loading branch information
@ThuF
ThuF authored Aug 5, 2021
2 parents 11e6f17 + b6f75ca commit 0c8ec6c
Show file tree
Hide file tree
Showing 18 changed files with 1,275 additions and 166 deletions.
12 changes: 7 additions & 5 deletions modules/cms/cms-resources/ide-csv/src/main/resources/ide-csv/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
~ Contributors:
~ SAP - initial API and implementation
-->
<html lang="en" ng-app="csv-editor" ng-controller="CsvViewController as cvc" xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
Expand Down Expand Up @@ -38,13 +38,15 @@

<!-- Project-specific stuff -->
<script src="js/papaparse.min.js"></script>
<script src="js/ag-grid-community.min.js"></script>
<script src="js/ag-grid-community.min.noStyle.js"></script>
<script src="js/editor.js"></script>
<link type="text/css" rel="stylesheet" ng-href="{{isDarkMode() ? 'css/editor-dark.css':'css/editor-light.css'}}" />
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/csv.css" />
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/ag-grid.min.css" />
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/ag-theme-alpine.min.css" />

</head>

<body class="view csv-editor-body" ng-mousedown="handleClick($event)" oncontextmenu="return false"
<body ng-app="csv-editor" ng-controller="CsvViewController as cvc" class="view csv-editor-body" ng-mousedown="handleClick($event)" oncontextmenu="return false"
ng-keydown="keyDownFunc($event)">

<div class="quick-actions-bar">
Expand All @@ -68,7 +70,7 @@
</div>
</div>

<div ag-grid="gridOptions" class="ag-grid-editor {{isDarkMode() ? 'ag-theme-alpine-dark':'ag-theme-alpine'}}">
<div ag-grid="gridOptions" class="ag-grid-editor ag-theme-alpine">
</div>

<!-- Context menu -->
Expand Down
19 changes: 19 additions & 0 deletions .../cms/cms-resources/ide-csv/src/main/resources/ide-csv/js/ag-grid-community.min.noStyle.js
View file

Large diffs are not rendered by default.

17 changes: 0 additions & 17 deletions modules/cms/cms-resources/ide-csv/src/main/resources/ide-csv/js/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ csvView.controller('CsvViewController', ['$scope', '$http', '$window', function
let csrfToken;
let manual = false;
let isMac = false;
let isDarkMode;
let isFileChanged = false;
$scope.menuStyle = { 'display': 'none' };
$scope.menuContext = { // Used for context menu content visibility
Expand Down Expand Up @@ -361,22 +360,6 @@ csvView.controller('CsvViewController', ['$scope', '$http', '$window', function
}
};

$scope.isDarkMode = function () {
if (isDarkMode != undefined) {
return isDarkMode;
}
const value = `; ${document.cookie}`;
const parts = value.split("; dirigible-theme=");
if (parts.length === 2 && parts.pop().split(';').shift() === "default") {
isDarkMode = true;
return true;
}
else {
isDarkMode = false;
return false;
}
};

$scope.handleClick = function (event) {
if (event.which === 3) {
if (
Expand Down
239 changes: 120 additions & 119 deletions modules/cms/cms-resources/ide-csvim/src/main/resources/ide-csvim/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
~ Contributors:
~ SAP - initial API and implementation
-->
<html lang="en" ng-app="csvim-editor" ng-controller="CsvimViewController" xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSVIM Editorr</title>
<title>CSVIM Editor</title>
<link href="/webjars/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="/webjars/angularjs/1.4.7/angular.min.js"></script>
<script src="/webjars/angularjs/1.4.7/angular-resource.min.js"></script>
Expand All @@ -24,11 +24,12 @@
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/ide.css" />
<!-- Project-specific stuff -->
<script src="js/editor.js"></script>
<link type="text/css" rel="stylesheet" ng-href="{{isDarkMode() ? 'css/editor-dark.css':'css/editor-light.css'}}" />
<link type="text/css" rel="stylesheet" ng-href="{{isDarkMode() ? 'css/dropdown-dark.css':'css/dropdown-light.css'}}" />
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/csvim.css" />
<link type="text/css" rel="stylesheet" href="../../../../services/v4/js/theme/resources.js/dropdown.css" />
</head>

<body class="view editor-body" ng-keydown="keyDownFunc($event)">
<body ng-app="csvim-editor" ng-controller="CsvimViewController" class="view editor-body"
ng-keydown="keyDownFunc($event)">
<div class="load-screen" ng-hide="dataLoaded">
<p class="text-center">Loading data...</p>
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
Expand All @@ -41,164 +42,164 @@
<input type="text" class="form-control" placeholder="Search..." ng-keyup="filterFiles()"
ng-model="filesSearch">
</div>
<div class="item-list">
<div class="list-item" ng-repeat="csv in csvimData track by $index"
ng-class="{active:activeItemId==$index}" ng-click="fileSelected($index)" ng-show="csv.visible">
<i class="fa fa-file-text-o" aria-hidden="true"></i>{{csv.name}}
<div class="item-list">
<div class="list-item" ng-repeat="csv in csvimData track by $index"
ng-class="{active:activeItemId==$index}" ng-click="fileSelected($index)" ng-show="csv.visible">
<i class="fa fa-file-text-o" aria-hidden="true"></i>{{csv.name}}
</div>
</div>
<div class="side-panel-button" ng-click="addNew()">
<i class="fa fa-plus-circle" aria-hidden="true"></i>Add new file
</div>
</div>
<div class="side-panel-button" ng-click="addNew()">
<i class="fa fa-plus-circle" aria-hidden="true"></i>Add new file
</div>
</div>
<div class="main-panel" ng-hide="dataEmpty">
<div class="quick-actions-bar">
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Save"
<div class="main-panel" ng-hide="dataEmpty">
<div class="quick-actions-bar">
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Save"
ng-click="openFile()">
<i class="fa fa-external-link" aria-hidden="true"></i> Open</button>
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Save" ng-click="save()"
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Save" ng-click="save()"
ng-disabled="!saveEnabled"><i class="fa fa-floppy-o"></i> Save</button>
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Edit"
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Edit"
ng-click="setEditEnabled()" ng-class="{'toggled': editEnabled === true}"><i class="fa fa-pencil"
aria-hidden="true"></i> Edit</button>
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Delete"
<button type="button" class="btn btn-default btn-actionbar btn-icon-left" title="Delete"
ng-click="deleteFile()"><i class="fa fa-trash" aria-hidden="true"></i> Delete</button>
</div>
<div class="csv-properties container-fluid">
<div class="row">
<div class="col-md-3">
<label for="table">Table</label>
<input type="text" class="form-control col-md-1" id="table"
</div>
<div class="csv-properties container-fluid">
<div class="row">
<div class="col-md-3">
<label for="table">Table</label>
<input type="text" class="form-control col-md-1" id="table"
ng-model="csvimData[activeItemId].table" ng-disabled="!editEnabled"
ng-keydown="fileChanged()">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="schema">Schema</label>
<input type="text" class="form-control" id="schema" ng-model="csvimData[activeItemId].schema"
</div>
<div class="row">
<div class="col-md-6">
<label for="schema">Schema</label>
<input type="text" class="form-control" id="schema" ng-model="csvimData[activeItemId].schema"
ng-disabled="!editEnabled" ng-keydown="fileChanged()">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="filepath">File path</label>
<input type="text" class="form-control" ng-class="{'error-input':fileExists===false}"
</div>
<div class="row">
<div class="col-md-6">
<label for="filepath">File path</label>
<input type="text" class="form-control" ng-class="{'error-input':fileExists===false}"
id="filepath" ng-model="csvimData[activeItemId].file" ng-disabled="!editEnabled"
ng-keydown="fileChanged()">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="header" ng-change="fileChanged()"
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="header" ng-change="fileChanged()"
ng-model="csvimData[activeItemId].header" ng-disabled="!editEnabled">
<label class="form-check-label" for="header">Header</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="headerNames" ng-change="fileChanged()"
<label class="form-check-label" for="header">Header</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="headerNames" ng-change="fileChanged()"
ng-model="csvimData[activeItemId].useHeaderNames" ng-disabled="!editEnabled">
<label class="form-check-label" for="headerNames">Use header names</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="distinguishEmptyFromNull"
<label class="form-check-label" for="headerNames">Use header names</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="distinguishEmptyFromNull"
ng-change="fileChanged()" ng-model="csvimData[activeItemId].distinguishEmptyFromNull"
ng-disabled="!editEnabled">
<label class="form-check-label" for="distinguishEmptyFromNull">Distinguish empty from
<label class="form-check-label" for="distinguishEmptyFromNull">Distinguish empty from
null</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="dropdown-container">
<label>Delimiter</label>
<button class="btn btn-default btn-big dropdown-toggle" type="button" data-toggle="dropdown"
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="dropdown-container">
<label>Delimiter</label>
<button class="btn btn-default btn-big dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
ng-disabled="!editEnabled">{{csvimData[activeItemId].delimField}}
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-searchable">
<li class="dropdown-item" ng-repeat="option in delimiterList"
ng-click="delimiterChanged(option)">{{option}}</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown-container">
<label>Quote character</label>
<button class="btn btn-default btn-big dropdown-toggle" type="button" data-toggle="dropdown"
<ul class="dropdown-menu dropdown-menu-searchable">
<li class="dropdown-item" ng-repeat="option in delimiterList"
ng-click="delimiterChanged(option)">{{option}}</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown-container">
<label>Quote character</label>
<button class="btn btn-default btn-big dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
ng-disabled="!editEnabled">{{csvimData[activeItemId].delimEnclosing}}
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-searchable">
<li class="dropdown-item" ng-repeat="option in quoteCharList"
ng-click="quoteCharChanged(option)">{{option}}</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Keys</label>
<div class="keys">
<table class="table">
<tr>
<th>Column</th>
<th>Values</th>
</tr>
<tr ng-repeat="key in csvimData[activeItemId].keys track by $index">
<td>
<div class="input-cell">
<input index="{{$index}}" type="text" class="table-input"
<ul class="dropdown-menu dropdown-menu-searchable">
<li class="dropdown-item" ng-repeat="option in quoteCharList"
ng-click="quoteCharChanged(option)">{{option}}</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Keys</label>
<div class="keys">
<table class="table">
<tr>
<th>Column</th>
<th>Values</th>
</tr>
<tr ng-repeat="key in csvimData[activeItemId].keys track by $index">
<td>
<div class="input-cell">
<input index="{{$index}}" type="text" class="table-input"
ng-model="csvimData[activeItemId].keys[$index].column"
ng-disabled="!editEnabled" ng-keydown="fileChanged()" unique-field>
<button type="button" ng-hide="!editEnabled"
<button type="button" ng-hide="!editEnabled"
class="btn btn-default button-borderless pull-right" title="Delete"
ng-click="removeKeyColumn($index)"><i class="fa fa-trash-o"
aria-hidden="true"></i></button>
</div>
</td>
<td class="column-values">
<div class="input-cell"
ng-repeat="val in csvimData[activeItemId].keys[$index].values track by $index">
<div class="column-value">
<input type="text" class="table-input" kindex="{{$parent.$index}}"
</div>
</td>
<td class="column-values">
<div class="input-cell"
ng-repeat="val in csvimData[activeItemId].keys[$index].values track by $index">
<div class="column-value">
<input type="text" class="table-input" kindex="{{$parent.$index}}"
vindex="{{$index}}" unique-field
ng-model="csvimData[activeItemId].keys[$parent.$index].values[$index]"
ng-disabled="!editEnabled" ng-keydown="fileChanged()">
<button type="button" ng-hide="!editEnabled"
<button type="button" ng-hide="!editEnabled"
class="btn btn-default button-borderless pull-right" title="Delete"
ng-click="removeValueFromKey($parent.$index, $index)"><i
class="fa fa-trash-o" aria-hidden="true"></i></button>
</div>
</div>
<button type="button" ng-hide="!editEnabled"
</div>
</div>
<button type="button" ng-hide="!editEnabled"
class="btn btn-default values-button" title="Add value"
ng-click="addValueToKey(key.column)">Add value</button>
</td>
</tr>
</table>
<button type="button" ng-hide="!editEnabled" class="btn btn-default keys-button"
</td>
</tr>
</table>
<button type="button" ng-hide="!editEnabled" class="btn btn-default keys-button"
title="Add column" ng-click="addKeyColumn()">Add column</button>
</div>
</div>
</div>
</div>
</div>
<div class="no-files-panel" ng-show="dataEmpty">
<p class="text-center">No files.</p>
<p class="text-center">Create a new file entry.</p>
</div>
</div>
</div>
</div>
</div>
<div class="no-files-panel" ng-show="dataEmpty">
<p class="text-center">No files.</p>
<p class="text-center">Create a new file entry.</p>
</div>
</div>
</div>
</body>

</html>
Loading

0 comments on commit 0c8ec6c

Please sign in to comment.