Skip to content

Commit

Permalink
[DLT-1110] Update styles to use css
Browse files Browse the repository at this point in the history
  • Loading branch information
@AronPerez
AronPerez committed Jan 15, 2025
1 parent 1cbe33b commit 8093346
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 28 deletions.
71 changes: 43 additions & 28 deletions web/static/components/endpoint-browse/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,41 +34,56 @@ class EndpointBrowser {
};
}

pathNavigator() {
return `
<div class="path-navigator">
<div class="row-flex">
<label class="path-label">Path:</label>
<div class="path-input-container">
<input type="text" id="path" value="${this.state.path}"/>
</div>
<div>
<button id="up" class="btn small">Up</button>
</div>
</div>
</div>
`;
}

fileTree() {
return `
<div class="file-tree-view ui-widget-content">
<table id="file_tree">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td style="white-space:nowrap;padding:0 2em 0 0"></td>
<td style="white-space:nowrap;padding:0 2em 0 0"></td>
<td style="white-space:nowrap"></td>
</tr>
</tbody>
</table>
</div>
`;
}

/**
* Renders dialog content
* @returns {jQuery} Dialog element
*/
render() {
this.element =
$(`
<div class='col-flex' style='height:100%'>
<!-- Path navigation bar -->
<div style='flex:none'>
<div class='row-flex' style='align-items:center'>
<label style='flex:none'>Path:&nbsp;</label>
<div style='flex:auto'>
<input type='text' id='path' style='width:100%' value='${this.state.path}'/>
</div>
<div style='flex:none'>
&nbsp;<button id='up' class='btn small'>Up</button>
</div>
</div>
</div>
<!-- Spacing -->
<div style='flex:none;padding:.25em'></div>
<!-- File/Directory tree container -->
<div class='tree-container ui-widget-content' style='flex:1 1 100%;min-height:0;overflow:auto'>
<table id='file_tree'>
<colgroup><col/><col/><col/></colgroup>
<tbody><tr>
<td style='white-space:nowrap;padding:0 2em 0 0'></td>
<td style='white-space:nowrap;padding:0 2em 0 0'></td>
<td style='white-space:nowrap'></td>
</tr></tbody>
</table>
</div>
</div>
`);
<div class="endpoint-browser">
${this.pathNavigator()}
<div class="spacer"></div>
${this.fileTree()}
</div>
`);

this.initUI();
return this.element;
Expand Down
43 changes: 43 additions & 0 deletions web/static/components/endpoint-browse/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.endpoint-browser {
display: flex;
flex-direction: column;
height: 100%;
}

.path-label {
margin-right: 0.5em; /* Replaces &nbsp; */
}

.path-input-container {
flex: auto;
margin-right: 0.5em; /* Replaces &nbsp; */
}

.path-input-container input {
width: 100%;
}

.row-flex {
display: flex;
align-items: center;
}

.spacer {
flex: none;
padding: .25em;
}

.file-tree-view {
flex: 1 1 100%;
min-height: 0;
overflow: auto;
}

.file-tree-view table {
width: 100%;
}

.file-tree-view td {
white-space: nowrap;
padding: 0 2em 0 0;
}
1 change: 1 addition & 0 deletions web/views/main.ect
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/dlg_alloc_new_edit.js"></script>
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/components/transfer/index.js"></script>
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/components/endpoint-browse/index.js"></script>
<link href="/static/components/endpoint-browse/styles.css" rel="stylesheet" type="text/css">
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/dlg_settings.js"></script>
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/dlg_repo_edit.js"></script>
<script nonce="<%= @nonce %>" type="module" charset="utf-8" src="/dlg_repo_manage.js"></script>
Expand Down

0 comments on commit 8093346

Please sign in to comment.