@@ -128,6 +128,18 @@ export class InputCodeEditorView extends CodeEditorView {
128
128
: input ;
129
129
}
130
130
) ,
131
+ className : derived ( 'checkbox classnames' , ( reader ) => {
132
+ const classNames = [ ] ;
133
+ const active = viewModel . activeModifiedBaseRange . read ( reader ) ;
134
+ const isHandled = model . isHandled ( baseRange ) . read ( reader ) ;
135
+ if ( isHandled ) {
136
+ classNames . push ( 'handled' ) ;
137
+ }
138
+ if ( baseRange === active ) {
139
+ classNames . push ( 'focused' ) ;
140
+ }
141
+ return classNames . join ( ' ' ) ;
142
+ } ) ,
131
143
setState : ( value , tx ) => viewModel . setState (
132
144
baseRange ,
133
145
model
@@ -283,25 +295,25 @@ export interface ModifiedBaseRangeGutterItemInfo extends IGutterItemInfo {
283
295
setState ( value : boolean , tx : ITransaction ) : void ;
284
296
toggleBothSides ( ) : void ;
285
297
getContextMenuActions ( ) : readonly IAction [ ] ;
298
+ className : IObservable < string > ;
286
299
}
287
300
288
301
export class MergeConflictGutterItemView extends Disposable implements IGutterItemView < ModifiedBaseRangeGutterItemInfo > {
289
302
private readonly item : ISettableObservable < ModifiedBaseRangeGutterItemInfo > ;
290
303
291
304
private readonly checkboxDiv : HTMLDivElement ;
305
+ private readonly isMultiLine = observableValue ( 'isMultiLine' , false ) ;
292
306
293
307
constructor (
294
308
item : ModifiedBaseRangeGutterItemInfo ,
295
- private readonly target : HTMLElement ,
309
+ target : HTMLElement ,
296
310
contextMenuService : IContextMenuService ,
297
311
themeService : IThemeService
298
312
) {
299
313
super ( ) ;
300
314
301
315
this . item = observableValue ( 'item' , item ) ;
302
316
303
- target . classList . add ( 'merge-accept-gutter-marker' ) ;
304
-
305
317
const checkBox = new Toggle ( { isChecked : false , title : localize ( 'accept' , "Accept" ) , icon : Codicon . check } ) ;
306
318
307
319
this . _register ( attachToggleStyler ( checkBox , themeService ) ) ;
@@ -353,6 +365,17 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
353
365
} )
354
366
) ;
355
367
368
+ this . _register ( autorun ( 'Update Checkbox CSS ClassNames' , ( reader ) => {
369
+ let className = this . item . read ( reader ) . className . read ( reader ) ;
370
+ className += ' merge-accept-gutter-marker' ;
371
+ if ( this . isMultiLine . read ( reader ) ) {
372
+ className += ' multi-line' ;
373
+ } else {
374
+ className += ' single-line' ;
375
+ }
376
+ target . className = className ;
377
+ } ) ) ;
378
+
356
379
this . _register ( checkBox . onChange ( ( ) => {
357
380
transaction ( tx => {
358
381
/** @description Handle Checkbox Change */
@@ -373,7 +396,7 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
373
396
374
397
const margin = checkboxHeight ;
375
398
376
- const effectiveCheckboxTop = top + middleHeight ;
399
+ let effectiveCheckboxTop = top + middleHeight ;
377
400
378
401
const preferredViewPortRange = [
379
402
margin ,
@@ -385,20 +408,17 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
385
408
top + height - checkboxHeight - margin
386
409
] ;
387
410
388
- const parentRange = [
389
- top ,
390
- top + height - checkboxHeight
391
- ] ;
392
-
393
- const clamped1 = clampIfIntervalIsNonEmpty ( effectiveCheckboxTop , preferredViewPortRange [ 0 ] , preferredViewPortRange [ 1 ] ) ;
394
- const clamped2 = clampIfIntervalIsNonEmpty ( clamped1 , preferredParentRange [ 0 ] , preferredParentRange [ 1 ] ) ;
395
- const clamped3 = clamp ( clamped2 , parentRange [ 0 ] , parentRange [ 1 ] ) ;
411
+ if ( preferredParentRange [ 0 ] < preferredParentRange [ 1 ] ) {
412
+ effectiveCheckboxTop = clamp ( effectiveCheckboxTop , preferredViewPortRange [ 0 ] , preferredViewPortRange [ 1 ] ) ;
413
+ effectiveCheckboxTop = clampIfIntervalIsNonEmpty ( effectiveCheckboxTop , preferredParentRange [ 0 ] , preferredParentRange [ 1 ] ) ;
414
+ }
396
415
397
- this . checkboxDiv . style . top = `${ clamped3 - top } px` ;
416
+ this . checkboxDiv . style . top = `${ effectiveCheckboxTop - top } px` ;
398
417
399
- this . target . classList . remove ( 'multi-line' ) ;
400
- this . target . classList . remove ( 'single-line' ) ;
401
- this . target . classList . add ( height > 30 ? 'multi-line' : 'single-line' ) ;
418
+ transaction ( ( tx ) => {
419
+ /** @description MergeConflictGutterItemView: Update Is Multi Line */
420
+ this . isMultiLine . set ( height > 30 , tx ) ;
421
+ } ) ;
402
422
}
403
423
404
424
update ( baseRange : ModifiedBaseRangeGutterItemInfo ) : void {
0 commit comments