Skip to content

Commit bd4554d

Browse files
cmd-ntrfcmd-ntrf
authored
Merge pull request #53 from cmd-ntrf/css
Define jupyterlab-lmod own css styles
2 parents cea9f7e + 5c91973 commit bd4554d

2 files changed

Lines changed: 141 additions & 18 deletions

File tree

‎jupyterlab/src/index.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ function createModuleItem(label: string, button: string) {
2323
const lmod_list_button = document.createElement('button');
2424
lmod_list_line.append(lmod_list_label);
2525
lmod_list_line.append(lmod_list_button);
26-
lmod_list_line.setAttribute('class', 'jp-RunningSessions-item')
27-
lmod_list_label.setAttribute('class', 'jp-RunningSessions-itemLabel');
26+
lmod_list_line.setAttribute('class', 'jp-Lmod-item')
27+
lmod_list_label.setAttribute('class', 'jp-Lmod-itemLabel');
2828
lmod_list_label.innerText = label;
29-
lmod_list_button.setAttribute('class', 'jp-RunningSessions-itemShutdown jp-mod-styled')
29+
lmod_list_button.setAttribute('class', 'jp-Lmod-itemButton jp-mod-styled')
3030
lmod_list_button.innerHTML = button;
3131
return lmod_list_line;
3232
}
@@ -109,24 +109,24 @@ class LmodWidget extends Widget {
109109
this.id = 'lmod-jupyterlab';
110110
this.title.caption = 'Softwares';
111111
this.title.iconClass = 'jp-LmodIcon jp-SideBar-tabIcon'
112-
this.addClass('jp-RunningSessions');
112+
this.addClass('jp-Lmod');
113113

114114
const search_div = document.createElement('div');
115115
const search_div_wrapper = document.createElement('div');
116116
this.searchInput = document.createElement('input');
117-
search_div.setAttribute('class', 'lm-CommandPalette-search');
118-
search_div_wrapper.setAttribute('class', 'lm-CommandPalette-wrapper');
117+
search_div.setAttribute('class', 'jp-Lmod-search');
118+
search_div_wrapper.setAttribute('class', 'jp-Lmod-search-wrapper');
119119
this.searchInput.setAttribute('id', 'modules');
120-
this.searchInput.setAttribute('class', 'lm-CommandPalette-input');
120+
this.searchInput.setAttribute('class', 'jp-Lmod-input');
121121
this.searchInput.setAttribute('placeholder', 'Search available modules...')
122122
search_div.appendChild(search_div_wrapper);
123123
search_div_wrapper.appendChild(this.searchInput);
124124
this.node.insertAdjacentElement('afterbegin', search_div);
125125

126126
this.node.insertAdjacentHTML('beforeend',
127-
`<div id="lmod" class="lm-CommandPalette-content">
128-
<div class="jp-RunningSessions-section">
129-
<div class="jp-RunningSessions-sectionHeader"><H2>Loaded Modules</H2>
127+
`<div id="lmod" class="jp-Lmod-content">
128+
<div class="jp-Lmod-section">
129+
<div class="jp-Lmod-sectionHeader"><H2>Loaded Modules</H2>
130130
<button
131131
title="Create collection"
132132
class="jp-Lmod-collectionButton jp-mod-styled jp-AddIcon"
@@ -143,16 +143,16 @@ class LmodWidget extends Widget {
143143
id="export-button"
144144
></button>
145145
</div>
146-
<div class="jp-RunningSessions-sectionContainer">
147-
<ul class="jp-RunningSessions-sectionList" id="lmod_loaded_list">
146+
<div class="jp-Lmod-sectionContainer">
147+
<ul class="jp-Lmod-sectionList" id="lmod_loaded_list">
148148
</ul>
149149
</div>
150150
</div>
151-
<div class="jp-RunningSessions-section">
152-
<div class="jp-RunningSessions-sectionHeader" id="avail_header"><H2>Available Modules</H2>
151+
<div class="jp-Lmod-section">
152+
<div class="jp-Lmod-sectionHeader" id="avail_header"><H2>Available Modules</H2>
153153
</div>
154-
<div class="jp-RunningSessions-sectionContainer">
155-
<ul class="jp-RunningSessions-sectionList" id="lmod_avail_list">
154+
<div class="jp-Lmod-sectionContainer">
155+
<ul class="jp-Lmod-sectionList" id="lmod_avail_list">
156156
</ul>
157157
</div>
158158
</div>

‎jupyterlab/style/index.css‎

Lines changed: 125 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,128 @@
11
:root {
22
--jp-private-lmod-button-height: 24px;
3+
--jp-private-lmod-search-height: 28px;
4+
}
5+
6+
.jp-Lmod {
7+
display: flex;
8+
flex-direction: column;
9+
min-width: var(--jp-sidebar-min-width);
10+
color: var(--jp-ui-font-color1);
11+
background: var(--jp-layout-color1);
12+
/* This is needed so that all font sizing of children done in ems is
13+
* relative to this base size */
14+
font-size: var(--jp-ui-font-size1);
15+
}
16+
17+
.jp-Lmod-content {
18+
background-color: var(--jp-layout-color1);
19+
}
20+
21+
.jp-Lmod-search {
22+
padding: 4px;
23+
background-color: var(--jp-layout-color1);
24+
z-index: 2;
25+
}
26+
27+
.jp-Lmod-search-wrapper {
28+
overflow: overlay;
29+
padding: 0 9px;
30+
background-color: var(--jp-input-active-background);
31+
height: 30px;
32+
box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
33+
}
34+
35+
.jp-Lmod-input {
36+
background: transparent;
37+
width: calc(100% - 18px);
38+
float: left;
39+
border: none;
40+
outline: none;
41+
font-size: var(--jp-ui-font-size1);
42+
color: var(--jp-ui-font-color0);
43+
line-height: var(--jp-private-lmod-search-height);
44+
}
45+
46+
.jp-Lmod-input::-webkit-input-placeholder,
47+
.jp-Lmod-input::-moz-placeholder,
48+
.jp-Lmod-input:-ms-input-placeholder {
49+
color: var(--jp-ui-font-color2);
50+
font-size: var(--jp-ui-font-size1);
51+
}
52+
53+
.jp-Lmod-section {
54+
display: flex;
55+
flex: 0 1 auto;
56+
flex-direction: column;
57+
overflow: auto;
58+
}
59+
60+
.jp-Lmod-sectionHeader {
61+
flex: 0 0 auto;
62+
align-items: center;
63+
justify-content: space-between;
64+
height: 28px;
65+
display: flex;
66+
border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
67+
margin-top: 8px;
68+
}
69+
70+
.jp-Lmod-sectionHeader h2 {
71+
flex: 0 0 auto;
72+
font-weight: 600;
73+
text-transform: uppercase;
74+
letter-spacing: 1px;
75+
font-size: var(--jp-ui-font-size0);
76+
padding: 8px 8px 8px 12px;
77+
margin: 0px;
78+
}
79+
80+
.jp-Lmod-sectionContainer {
81+
flex: 1 1 auto;
82+
margin: 0;
83+
padding: 0;
84+
overflow: auto;
85+
}
86+
87+
.jp-Lmod-sectionList {
88+
margin: 0;
89+
padding: 0;
90+
list-style-type: none;
91+
}
92+
93+
.jp-Lmod-item {
94+
display: flex;
95+
flex-direction: row;
96+
color: var(--jp-ui-font-color1);
97+
height: var(--jp-private-running-item-height);
98+
line-height: var(--jp-private-running-item-height);
99+
padding: 0 8px 0 8px;
100+
}
101+
102+
.jp-Lmod-item:hover {
103+
background-color: var(--jp-layout-color2);
104+
}
105+
106+
.jp-Lmod-item .jp-Lmod-itemButton {
107+
border-radius: 0px;
108+
}
109+
110+
.jp-Lmod-item:not(:hover) .jp-Lmod-itemButton {
111+
visibility: hidden;
112+
/* display: none; */
113+
}
114+
115+
.jp-Lmod-itemLabel {
116+
font-size: var(--jp-ui-font-size1);
117+
flex: 1 1 55%;
118+
padding: 0 4px 0 4px;
119+
text-overflow: ellipsis;
120+
overflow: hidden;
121+
white-space: nowrap;
122+
}
123+
124+
.jp-Lmod-itemLabel:focus {
125+
background-color: var(--jp-layout-color2);
3126
}
4127

5128
.jp-LmodIcon {
@@ -30,7 +153,7 @@
30153
background-color: rgba(153, 153, 153, 0.2);
31154
}
32155

33-
.jp-RunningSessions-itemShutdown.jp-mod-styled {
156+
.jp-Lmod-itemButton.jp-mod-styled {
34157
height: inherit;
35158
line-height: inherit;
36159
background-color: lightgrey;
@@ -51,7 +174,7 @@ body.p-mod-override-cursor div.iframe-widget {
51174
position: relative;
52175
pointer-events: none;
53176
}
54-
177+
55178
body.p-mod-override-cursor div.iframe-widget:before {
56179
content: '';
57180
position: absolute;

0 commit comments

Comments
 (0)