Skip to content
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.

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

Fix ability to scroll for UD #14307

Merged
merged 2 commits into from
Aug 22, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
9 changes: 9 additions & 0 deletions dashboard/src/app/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ body
font-family 'Open Sans'
background-color $background-site-color
min-width 600px
overflow hidden

button,
select,
Expand Down Expand Up @@ -95,7 +96,15 @@ md-option:hover
transition none !important

.main-page
max-height 100vh
min-width 320px
overflow hidden
div#main-content
height 100%

@-moz-document url-prefix()
#main-content
max-height calc(100vh - 30px)

.progress-line
position absolute
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@


md-content.create-workspace-content
background-color $very-light-grey-background-color !important
overflow auto
background-color $very-light-grey-background-color
padding 15px

.che-label-container-label-name
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export class DevfileSelectorController {
private devfileRegistry: DevfileRegistry;
private cheWorkspace: CheWorkspace;
private devfiles: Array<IDevfileMetaData>;
devfileOrderBy: string;
onDevfileSelect: Function;
selectedDevfile: any;

Expand All @@ -33,6 +34,7 @@ export class DevfileSelectorController {
constructor(devfileRegistry: DevfileRegistry, cheWorkspace: CheWorkspace) {
this.devfileRegistry = devfileRegistry;
this.cheWorkspace = cheWorkspace;
this.devfileOrderBy = 'displayName';
this.loadDevfiles();
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,22 @@
che-column-title=""></che-list-header-column>
<che-list-header-column flex="25"
che-sort-value="devfileSelectorController.devfileOrderBy"
che-sort-item="name"
che-sort-item="displayName"
che-column-title="Name"></che-list-header-column>
<che-list-header-column flex="50"
che-sort-value="devfileSelectorController.devfileOrderBy"
che-sort-item="description"
che-column-title="Description"></che-list-header-column>
<che-list-header-column flex="10"
che-sort-value="devfileSelectorController.devfileOrderBy"
che-sort-item="globalMemoryLimit"
che-column-title="Required memory"></che-list-header-column>
</div>
</div>
</che-list-header>
<che-list class="devfile-selector-devfile-list">
<div ng-repeat="devfile in devfileSelectorController.devfiles" data-devfile-id="{{devfile.displayName}}"
<div ng-repeat="devfile in devfileSelectorController.devfiles | orderBy:devfileSelectorController.devfileOrderBy"
data-devfile-id="{{devfile.displayName}}"
class="devfile-selector-item" ng-class="{'devfile-selector-item-selected': (devfile === devfileSelectorController.selectedDevfile)}">
<che-list-item flex ng-click="devfileSelectorController.devfileOnClick(devfile)">
<div flex="100"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
.workspace-resources-locked
background-color red

.che-list che-workspace-item
@-moz-document url-prefix()
.che-list-item
height 40px

.che-list che-workspace-item:not(:last-of-type) .che-list-item
border-bottom 1px solid $list-separator-color

Expand Down
Original file line number Diff line number Diff line change
@@ -1,68 +1,77 @@
<md-progress-linear ng-show="workspaceEditorsController.isLoading" md-mode="indeterminate"></md-progress-linear>
<div flex layout="column" md-theme="maincontent-theme" class="plugins-page">
<che-list-header che-hide-header="workspaceEditorsController.editors.length === 0">
<div flex="100"
layout="row"
layout-align="start stretch"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center" class="che-list-item-details">
<che-list-header-column flex="10" layout="column" layout-align="center start"
che-sort-value="workspaceEditorsController.editorOrderBy"
che-sort-item="isEnabled"
che-column-title="Enable"></che-list-header-column>
<che-list-header-column flex="25" layout="column" layout-align="center start"
che-sort-value="workspaceEditorsController.editorOrderBy"
che-sort-item="displayName"
che-column-title="Editor"></che-list-header-column>
<che-list-header-column flex="15" layout="column" layout-align="center start"
che-column-title="Version"></che-list-header-column>
<che-list-header-column flex="50" layout="column" layout-align="center start"
che-column-title="Description"></che-list-header-column>
</div>
</div>
</che-list-header>
<!-- editor list -->
<che-list class="plugins-list" flex
ng-if="workspaceEditorsController.editors && workspaceEditorsController.editors.size > 0">
<div class="plugin-item"
ng-repeat="editor in workspaceEditorsController.cheListHelper.getVisibleItems() | orderBy:[workspaceEditorsController.editorOrderBy, 'displayName' ]">
<che-list-item flex>
<div flex="100"
layout="row"
layout-align="start stretch"
plugin-item-name="{{editor.displayName}}"
plugin-item-version="{{editor.version}}"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center">
<!-- isEnabled -->
<div flex="10">
<md-switch ng-model="editor.isEnabled"
ng-change="workspaceEditorsController.updateEditor(editor)"
aria-label="editor"
plugin-switch="{{editor.displayName}}">
</md-switch>
</div>
<!-- Name -->
<div flex="25">
<span class="che-list-item-name" plugin-name="{{editor.name}}">{{editor.displayName}}</span>
<span ng-if="editor.publisher" class="che-list-item-secondary">({{editor.publisher}} publisher)</span>
</div>
<!-- Version -->
<div flex="15">
<select class="che-version-dropdown" ng-model="editor.selected" ng-change="workspaceEditorsController.updateSelectedEditorVersion(editor)" ng-init="editor.selected" ng-options="ver for ver in editor.versions">
</select>
</div>
<!-- Description -->
<div flex="50">
<span class="che-list-item-secondary" plugin-description="{{editor.description}}">{{editor.description}}</span>
<div class="che-scroll-list" ng-hide="workspaceEditorsController.editors.length === 0">
<div>
<div>
<che-list-header>
<div flex="100"
layout="row"
layout-align="start stretch"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center" class="che-list-item-details">
<che-list-header-column flex="10" layout="column" layout-align="center start"
che-sort-value="workspaceEditorsController.editorOrderBy"
che-sort-item="isEnabled"
che-column-title="Enable"></che-list-header-column>
<che-list-header-column flex="25" layout="column" layout-align="center start"
che-sort-value="workspaceEditorsController.editorOrderBy"
che-sort-item="displayName"
che-column-title="Editor"></che-list-header-column>
<che-list-header-column flex="15" layout="column" layout-align="center start"
che-column-title="Version"></che-list-header-column>
<che-list-header-column flex="50" layout="column" layout-align="center start"
che-column-title="Description"></che-list-header-column>
</div>
</div>
</div>
</che-list-item>
</che-list-header>
<!-- editor list -->
<che-list class="plugins-list" flex
ng-if="workspaceEditorsController.editors && workspaceEditorsController.editors.size > 0">
<div class="plugin-item"
ng-repeat="editor in workspaceEditorsController.cheListHelper.getVisibleItems() | orderBy:[workspaceEditorsController.editorOrderBy, 'displayName' ]">
<che-list-item flex>
<div flex="100"
layout="row"
layout-align="start stretch"
plugin-item-name="{{editor.displayName}}"
plugin-item-version="{{editor.version}}"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center">
<!-- isEnabled -->
<div flex="10">
<md-switch ng-model="editor.isEnabled"
ng-change="workspaceEditorsController.updateEditor(editor)"
aria-label="editor"
plugin-switch="{{editor.displayName}}">
</md-switch>
</div>
<!-- Name -->
<div flex="25">
<span class="che-list-item-name" plugin-name="{{editor.name}}">{{editor.displayName}}</span>
<span ng-if="editor.publisher"
class="che-list-item-secondary">({{editor.publisher}} publisher)</span>
</div>
<!-- Version -->
<div flex="15">
<select class="che-version-dropdown" ng-model="editor.selected"
ng-change="workspaceEditorsController.updateSelectedEditorVersion(editor)"
ng-init="editor.selected" ng-options="ver for ver in editor.versions">
</select>
</div>
<!-- Description -->
<div flex="50">
<span class="che-list-item-secondary" plugin-description="{{editor.description}}">{{editor.description}}</span>
</div>
</div>
</div>
</che-list-item>
</div>
</che-list>
</div>
</div>
</che-list>
</div>
<div class="che-list-empty">
<span ng-show="workspaceEditorsController.editors.length === 0">
There are no editors.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,70 +9,79 @@
on-change="workspacePluginsController.onSearchChanged(query)"></che-list-header-search>
</div>
</che-list-header-additional-parts>

<che-list-header che-hide-header="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
<div flex="100"
layout="row"
layout-align="start stretch"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center" class="che-list-item-details">
<che-list-header-column flex="10" layout="column" layout-align="center start"
che-sort-value="workspacePluginsController.pluginOrderBy"
che-sort-item="isEnabled"
che-column-title="Enable"></che-list-header-column>
<che-list-header-column flex="25" layout="column" layout-align="center start"
che-sort-value="workspacePluginsController.pluginOrderBy"
che-sort-item="displayName"
che-column-title="Plugin"></che-list-header-column>
<che-list-header-column flex="15" layout="column" layout-align="center start"
che-column-title="Version"></che-list-header-column>
<che-list-header-column flex="50" layout="column" layout-align="center start"
che-column-title="Description"></che-list-header-column>
</div>
</div>
</che-list-header>
<!-- plugins list -->
<che-list class="plugins-list" flex
ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.size > 0">
<div class="plugin-item"
ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'displayName' ]">
<che-list-item flex>
<div flex="100"
layout="row"
layout-align="start stretch"
plugin-item-name="{{plugin.displayName}}"
plugin-item-version="{{plugin.version}}"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center">
<!-- isEnabled -->
<div flex="10">
<md-switch ng-model="plugin.isEnabled"
ng-change="workspacePluginsController.updatePlugin(plugin)"
aria-label="plugin"
plugin-switch="{{plugin.displayName}}">
</md-switch>
</div>
<!-- Name -->
<div flex="25">
<span class="che-list-item-name" plugin-name="{{plugin.displayName}}">{{plugin.displayName}}</span>
<span ng-if="plugin.publisher" class="che-list-item-secondary">({{plugin.publisher}} publisher)</span>
</div>
<!-- Version -->
<div flex="15">
<select class="che-version-dropdown" ng-model="plugin.selected" ng-change="workspacePluginsController.updateSelectedPlugin(plugin)" ng-init="plugin.selected" ng-options="ver for ver in plugin.versions">
</select>
</div>
<!-- Description -->
<div flex="50">
<span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
<div class="che-scroll-list" ng-hide="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
<div>
<div>
<che-list-header>
<div flex="100"
layout="row"
layout-align="start stretch"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center" class="che-list-item-details">
<che-list-header-column flex="10" layout="column" layout-align="center start"
che-sort-value="workspacePluginsController.pluginOrderBy"
che-sort-item="isEnabled"
che-column-title="Enable"></che-list-header-column>
<che-list-header-column flex="25" layout="column" layout-align="center start"
che-sort-value="workspacePluginsController.pluginOrderBy"
che-sort-item="displayName"
che-column-title="Plugin"></che-list-header-column>
<che-list-header-column flex="15" layout="column" layout-align="center start"
che-column-title="Version"></che-list-header-column>
<che-list-header-column flex="50" layout="column" layout-align="center start"
che-column-title="Description"></che-list-header-column>
</div>
</div>
</div>
</che-list-item>
</che-list-header>
<!-- plugins list -->
<che-list class="plugins-list" flex
ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.size > 0">
<div class="plugin-item"
ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'displayName' ]">
<che-list-item flex>
<div flex="100"
layout="row"
layout-align="start stretch"
plugin-item-name="{{plugin.displayName}}"
plugin-item-version="{{plugin.version}}"
class="che-list-item-row">
<div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
<div flex layout="row" layout-align="start center">
<!-- isEnabled -->
<div flex="10">
<md-switch ng-model="plugin.isEnabled"
ng-change="workspacePluginsController.updatePlugin(plugin)"
aria-label="plugin"
plugin-switch="{{plugin.displayName}}">
</md-switch>
</div>
<!-- Name -->
<div flex="25">
<span class="che-list-item-name"
plugin-name="{{plugin.displayName}}">{{plugin.displayName}}</span>
<span ng-if="plugin.publisher"
class="che-list-item-secondary">({{plugin.publisher}} publisher)</span>
</div>
<!-- Version -->
<div flex="15">
<select class="che-version-dropdown" ng-model="plugin.selected"
ng-change="workspacePluginsController.updateSelectedPlugin(plugin)"
ng-init="plugin.selected" ng-options="ver for ver in plugin.versions">
</select>
</div>
<!-- Description -->
<div flex="50">
<span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
</div>
</div>
</div>
</che-list-item>
</div>
</che-list>
</div>
</div>
</che-list>
</div>
<div class="che-list-empty">
<span ng-show="workspacePluginsController.plugins.length > 0 && workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
No plugins found.
Expand Down
24 changes: 24 additions & 0 deletions dashboard/src/components/widget/list/che-list.styl
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,27 @@
overflow-y auto
display block
width 100%

.che-scroll-list
background-color lighten($very-light-grey-color, 28%)
border-top 1px solid lighten($very-light-grey-color, 4%)
border-radius 2px
width 100%
& > div
position relative
margin-top 47px
che-box-shadow()
& > div
overflow-y auto
max-height 672px
.che-list-item
height 47px
.che-list-header
.che-list-header-additional
display none
.che-list-item-row
margin -47px 0 0 0
.che-list-header-column > *
position absolute
line-height 47px
top -47px