Skip to content

Commit f1544b7

Browse files
basaratbasarat
committed
Merge pull request #615 from TypeStrong/bug/607-padding-patch
Make panel body padding consistent with header
2 parents 3034659 + eb76d13 commit f1544b7

File tree

3 files changed

+179
-154
lines changed

3 files changed

+179
-154
lines changed

‎dist/main/atom/views/mainPanelView.js‎

Lines changed: 84 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -36,101 +36,110 @@ var MainPanelView = (function (_super) {
3636
};
3737
this.div({
3838
class: 'atomts atomts-main-panel-view native-key-bindings',
39-
style: 'padding: 6px',
4039
tabindex: '-1'
4140
}, function () {
4241
_this.div({
4342
class: 'layout horizontal',
44-
style: '-webkit-user-select: none; align-items: center',
43+
style: '-webkit-user-select: none; flex-wrap: wrap',
4544
dblclick: 'toggle'
4645
}, function () {
4746
_this.span({
48-
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select:none',
49-
click: 'toggle'
50-
}, function () {
51-
_this.span({ class: "icon-microscope" });
52-
_this.span({ style: 'font-weight:bold' }, " TypeScript ");
53-
});
54-
_this.div({
55-
class: 'btn-group',
56-
style: 'margin-left: 8px'
57-
}, function () {
58-
btn('error', panelHeaders.error, 'selected');
59-
btn('build', panelHeaders.build);
60-
btn('references', panelHeaders.references);
61-
});
62-
_this.div({
63-
style: 'cursor: pointer;',
64-
click: 'clickedCurrentTsconfigFilePath'
47+
class: 'layout horizontal atomts-panel-header',
48+
style: 'align-items: center'
6549
}, function () {
6650
_this.span({
67-
style: 'margin-left: 10px;',
68-
outlet: 'tsconfigInUse'
51+
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 16px',
52+
click: 'toggle'
53+
}, function () {
54+
_this.span({ class: 'icon-microscope' });
55+
_this.span({ style: 'font-weight: bold' }, 'TypeScript');
6956
});
70-
});
71-
_this.div({
72-
style: 'overflow-x: visible; white-space: nowrap;'
73-
}, function () {
74-
_this.span({
75-
style: 'margin-left:10px; transition: color 1s',
76-
outlet: 'fileStatus'
57+
_this.div({
58+
class: 'btn-group',
59+
style: 'margin-left: 6px; flex: 1 0 auto'
60+
}, function () {
61+
btn('error', panelHeaders.error, 'selected');
62+
btn('build', panelHeaders.build);
63+
btn('references', panelHeaders.references);
7764
});
7865
});
79-
_this.div({
80-
class: 'heading-summary flex',
81-
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
82-
outlet: 'summary'
83-
});
84-
_this.progress({
85-
class: 'inline-block build-progress',
86-
style: 'display: none; color: red',
87-
outlet: 'buildProgress'
88-
});
8966
_this.span({
90-
class: 'section-pending',
91-
outlet: 'sectionPending',
92-
click: 'showPending'
67+
class: 'layout horizontal atomts-panel-header',
68+
style: 'align-items: center; flex: 1 1 auto'
9369
}, function () {
94-
_this.span({
95-
outlet: 'txtPendingCount',
96-
style: 'cursor: pointer; margin-right: 7px;',
70+
_this.div({
71+
style: 'cursor: pointer;',
72+
click: 'clickedCurrentTsconfigFilePath'
73+
}, function () {
74+
_this.span({
75+
outlet: 'tsconfigInUse'
76+
});
9777
});
98-
_this.span({
99-
class: 'loading loading-spinner-tiny inline-block',
100-
style: 'cursor: pointer; margin-right: 7px;'
78+
_this.div({
79+
style: 'overflow-x: visible; white-space: nowrap;'
80+
}, function () {
81+
_this.span({
82+
style: 'margin-left: 10px; transition: color 1s',
83+
outlet: 'fileStatus'
84+
});
10185
});
102-
});
103-
_this.div({
104-
class: 'heading-buttons'
105-
}, function () {
106-
_this.span({
107-
class: 'heading-fold icon-unfold',
108-
style: 'cursor: pointer; margin-right:10px',
109-
outlet: 'btnFold',
110-
click: 'toggle'
86+
_this.div({
87+
class: 'heading-summary flex',
88+
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
89+
outlet: 'summary'
90+
});
91+
_this.progress({
92+
class: 'inline-block build-progress',
93+
style: 'display: none; color: red',
94+
outlet: 'buildProgress'
11195
});
11296
_this.span({
113-
class: 'heading-fold icon-sync',
114-
style: 'cursor: pointer',
115-
outlet: 'btnSoftReset',
116-
click: 'softReset'
97+
class: 'section-pending',
98+
outlet: 'sectionPending',
99+
click: 'showPending'
100+
}, function () {
101+
_this.span({
102+
outlet: 'txtPendingCount',
103+
style: 'cursor: pointer; margin-left: 5px',
104+
});
105+
_this.span({
106+
class: 'loading loading-spinner-tiny inline-block',
107+
style: 'cursor: pointer; margin-left: 5px'
108+
});
109+
});
110+
_this.div({
111+
class: 'heading-buttons',
112+
style: 'margin-left: 5px'
113+
}, function () {
114+
_this.span({
115+
class: 'heading-fold icon-unfold',
116+
style: 'cursor: pointer; margin-right: 10px',
117+
outlet: 'btnFold',
118+
click: 'toggle'
119+
});
120+
_this.span({
121+
class: 'heading-fold icon-sync',
122+
style: 'cursor: pointer',
123+
outlet: 'btnSoftReset',
124+
click: 'softReset'
125+
});
117126
});
118127
});
119-
});
120-
_this.div({
121-
class: 'panel-body atomts-panel-body padded',
122-
outlet: 'errorBody',
123-
style: 'overflow-y: auto; display: none'
124-
});
125-
_this.div({
126-
class: 'panel-body atomts-panel-body padded',
127-
outlet: 'buildBody',
128-
style: 'overflow-y: auto; display: none'
129-
});
130-
_this.div({
131-
class: 'panel-body atomts-panel-body padded',
132-
outlet: 'referencesBody',
133-
style: 'overflow-y: auto; display: none'
128+
_this.div({
129+
class: 'panel-body atomts-panel-body',
130+
outlet: 'errorBody',
131+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
132+
});
133+
_this.div({
134+
class: 'panel-body atomts-panel-body',
135+
outlet: 'buildBody',
136+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
137+
});
138+
_this.div({
139+
class: 'panel-body atomts-panel-body',
140+
outlet: 'referencesBody',
141+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
142+
});
134143
});
135144
});
136145
};

‎lib/main/atom/views/mainPanelView.ts‎

Lines changed: 90 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -47,111 +47,122 @@ export class MainPanelView extends view.View<any> {
4747

4848
this.div({
4949
class: 'atomts atomts-main-panel-view native-key-bindings',
50-
style: 'padding: 6px',
5150
tabindex: '-1'
5251
}, () => {
53-
this.div({
54-
class: 'layout horizontal',
55-
style: '-webkit-user-select: none; align-items: center',
56-
dblclick: 'toggle'
52+
this.div({
53+
class: 'layout horizontal',
54+
style: '-webkit-user-select: none; flex-wrap: wrap',
55+
dblclick: 'toggle'
56+
}, () => {
57+
this.span({
58+
class: 'layout horizontal atomts-panel-header',
59+
style: 'align-items: center'
60+
}, () => {
61+
this.span({
62+
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 16px',
63+
click: 'toggle'
64+
}, () => {
65+
this.span({ class: 'icon-microscope' });
66+
this.span({ style: 'font-weight: bold' }, 'TypeScript');
67+
});
68+
69+
this.div({
70+
class: 'btn-group',
71+
style: 'margin-left: 6px; flex: 1 0 auto'
72+
}, () => {
73+
btn('error', panelHeaders.error, 'selected')
74+
btn('build', panelHeaders.build)
75+
btn('references', panelHeaders.references)
76+
});
77+
});
78+
79+
this.span({
80+
class: 'layout horizontal atomts-panel-header',
81+
style: 'align-items: center; flex: 1 1 auto'
5782
}, () => {
83+
this.div({
84+
style: 'cursor: pointer;',
85+
click: 'clickedCurrentTsconfigFilePath'
86+
}, () => {
5887
this.span({
59-
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select:none',
60-
click: 'toggle'
61-
}, () => {
62-
this.span({ class: "icon-microscope" });
63-
this.span({ style: 'font-weight:bold' }, " TypeScript ");
64-
});
65-
66-
this.div({
67-
class: 'btn-group',
68-
style: 'margin-left: 8px'
69-
},
70-
() => {
71-
btn('error', panelHeaders.error, 'selected')
72-
btn('build', panelHeaders.build)
73-
btn('references', panelHeaders.references)
74-
});
75-
76-
this.div({
77-
style: 'cursor: pointer;',
78-
click: 'clickedCurrentTsconfigFilePath'
79-
}, () => {
80-
this.span({
81-
style: 'margin-left: 10px;',
82-
outlet: 'tsconfigInUse'
83-
});
88+
outlet: 'tsconfigInUse'
8489
});
90+
});
8591

86-
this.div({
87-
style: 'overflow-x: visible; white-space: nowrap;'
88-
}, () => {
89-
this.span({
90-
style: 'margin-left:10px; transition: color 1s', // Added transition to make it easy to see *yes I just did this compile*.
91-
outlet: 'fileStatus'
92-
});
92+
this.div({
93+
style: 'overflow-x: visible; white-space: nowrap;'
94+
}, () => {
95+
this.span({
96+
style: 'margin-left: 10px; transition: color 1s', // Added transition to make it easy to see *yes I just did this compile*.
97+
outlet: 'fileStatus'
9398
});
99+
});
100+
101+
this.div({
102+
class: 'heading-summary flex',
103+
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
104+
outlet: 'summary'
105+
});
106+
107+
this.progress({
108+
class: 'inline-block build-progress',
109+
style: 'display: none; color: red',
110+
outlet: 'buildProgress'
111+
});
94112

95-
this.div({
96-
class: 'heading-summary flex',
97-
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
98-
outlet: 'summary'
113+
this.span({
114+
class: 'section-pending',
115+
outlet: 'sectionPending',
116+
click: 'showPending'
117+
}, () => {
118+
this.span({
119+
outlet: 'txtPendingCount',
120+
style: 'cursor: pointer; margin-left: 5px',
99121
});
100122

101-
this.progress({
102-
class: 'inline-block build-progress',
103-
style: 'display: none; color: red',
104-
outlet: 'buildProgress'
123+
this.span({
124+
class: 'loading loading-spinner-tiny inline-block',
125+
style: 'cursor: pointer; margin-left: 5px'
105126
});
127+
});
106128

129+
this.div({
130+
class: 'heading-buttons',
131+
style: 'margin-left: 5px'
132+
}, () => {
107133
this.span({
108-
class: 'section-pending',
109-
outlet: 'sectionPending',
110-
click: 'showPending'
111-
}, () => {
112-
this.span({
113-
outlet: 'txtPendingCount',
114-
style: 'cursor: pointer; margin-right: 7px;',
115-
});
116-
this.span({
117-
class: 'loading loading-spinner-tiny inline-block',
118-
style: 'cursor: pointer; margin-right: 7px;'
119-
});
134+
class: 'heading-fold icon-unfold',
135+
style: 'cursor: pointer; margin-right: 10px',
136+
outlet: 'btnFold',
137+
click: 'toggle'
120138
});
121139

122-
this.div({
123-
class: 'heading-buttons'
124-
}, () => {
125-
this.span({
126-
class: 'heading-fold icon-unfold',
127-
style: 'cursor: pointer; margin-right:10px',
128-
outlet: 'btnFold',
129-
click: 'toggle'
130-
});
131-
this.span({
132-
class: 'heading-fold icon-sync',
133-
style: 'cursor: pointer',
134-
outlet: 'btnSoftReset',
135-
click: 'softReset'
136-
});
137-
});
140+
this.span({
141+
class: 'heading-fold icon-sync',
142+
style: 'cursor: pointer',
143+
outlet: 'btnSoftReset',
144+
click: 'softReset'
145+
});
138146
});
147+
});
148+
139149
this.div({
140-
class: 'panel-body atomts-panel-body padded',
150+
class: 'panel-body atomts-panel-body',
141151
outlet: 'errorBody',
142-
style: 'overflow-y: auto; display: none'
152+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
143153
});
144154
this.div({
145-
class: 'panel-body atomts-panel-body padded',
155+
class: 'panel-body atomts-panel-body',
146156
outlet: 'buildBody',
147-
style: 'overflow-y: auto; display: none'
157+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
148158
});
149159
this.div({
150-
class: 'panel-body atomts-panel-body padded',
160+
class: 'panel-body atomts-panel-body',
151161
outlet: 'referencesBody',
152-
style: 'overflow-y: auto; display: none'
162+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
153163
});
154164
});
165+
});
155166
}
156167

157168

‎styles/atomts-main-panel-view.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
scroll-y: auto;
44
}
55

6+
.atomts-panel-body,
7+
.atomts-panel-header {
8+
padding: 6px;
9+
}
10+
611
.atomts-main-panel-view{
712
.build-progress.warn::-webkit-progress-value{
813
background-color: rgb(255, 155, 0) !important;

0 commit comments

Comments
 (0)