Skip to content

Commit 2a2cd8b

Browse files
jstoffanjstoffan
authored
feat(rewrite): Remove all code related to mobile-specific ui (#398)
1 parent ef6e0f1 commit 2a2cd8b

35 files changed

+34
-647
lines changed

‎src/AnnotationThread.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ class AnnotationThread extends EventEmitter {
5858
this.container = data.container;
5959
this.locale = data.locale;
6060
this.hasTouch = data.hasTouch || false;
61-
this.headerHeight = data.headerHeight;
6261

6362
this.id = data.id;
6463
this.intl = data.intl;
@@ -158,10 +157,7 @@ class AnnotationThread extends EventEmitter {
158157
return this.annotatedElement;
159158
}
160159

161-
return util.shouldDisplayMobileUI(this.container)
162-
? this.container
163-
: // $FlowFixMe
164-
util.getPageEl(this.annotatedElement, this.location.page);
160+
return util.getPageEl(this.annotatedElement, this.location.page);
165161
}
166162

167163
/**
@@ -187,10 +183,8 @@ class AnnotationThread extends EventEmitter {
187183
comments={this.comments}
188184
createdAt={this.createdAt}
189185
createdBy={this.createdBy}
190-
headerHeight={this.headerHeight}
191186
id={this.id}
192187
intl={this.intl}
193-
isMobile={util.shouldDisplayMobileUI(this.container)}
194188
isPending={isPending}
195189
modifiedAt={this.modifiedAt}
196190
onCancel={this.cancelUnsavedAnnotation}
@@ -458,7 +452,7 @@ class AnnotationThread extends EventEmitter {
458452
}
459453

460454
/**
461-
* Destroys mobile and pending/pending-active annotation threads
455+
* Destroys pending/pending-active annotation threads
462456
*
463457
* @return {void}
464458
*/
@@ -532,13 +526,7 @@ class AnnotationThread extends EventEmitter {
532526
}
533527

534528
this.updateAnnotationThread(savedAnnotation);
535-
536-
if (util.shouldDisplayMobileUI(this.container)) {
537-
// Changing state from pending
538-
this.state = STATES.active;
539-
} else {
540-
this.state = STATES.inactive;
541-
}
529+
this.state = STATES.inactive;
542530

543531
this.show();
544532
this.renderAnnotationPopover();

‎src/Annotator.scss‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "common";
1+
@import 'common';
22

33
.ba-annotate-mode-background {
44
background-color: $fours;
@@ -62,11 +62,6 @@
6262
fill: $off-white;
6363
}
6464
}
65-
66-
@media #{$mobile} {
67-
margin-right: 0;
68-
margin-left: 0;
69-
}
7065
}
7166

7267
//------------------------------------------------------------------------------
@@ -99,15 +94,15 @@
9994
z-index: 130;
10095
display: table;
10196
color: $fours;
102-
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
97+
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
10398
border-top: 20px solid transparent; // Transparent border for hover detection
10499
}
105100

106101
.ba-annotation-drawing-dialog,
107102
.ba-annotation-highlight-dialog,
108103
.ba-annotation-highlight-dialog:hover {
109104
padding: 5px 6px;
110-
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
105+
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
111106
background-color: $white;
112107
border: 1px solid $seesee;
113108
border-radius: 3px;

‎src/__tests__/AnnotationThread-test.js‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,13 @@ describe('AnnotationThread', () => {
3939
messages: {},
4040
},
4141
fileVersionId: '1',
42-
isMobile: false,
4342
location: {},
4443
threadID: '2',
4544
threadNumber: '1',
4645
type: 'point',
4746
});
4847

4948
thread.emit = jest.fn();
50-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(false);
5149
});
5250

5351
afterEach(() => {
@@ -91,18 +89,6 @@ describe('AnnotationThread', () => {
9189
thread.location = {};
9290
expect(thread.getPopoverParent()).toEqual('annotatedElement');
9391
});
94-
95-
it('should return container if user should see the mobile UI', () => {
96-
thread.location = { page: 1 };
97-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(true);
98-
expect(thread.getPopoverParent()).toEqual('container');
99-
});
100-
101-
it('should return the page element if user should NOT see the mobile UI', () => {
102-
thread.location = { page: 1 };
103-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(false);
104-
expect(thread.getPopoverParent()).toEqual('pageEl');
105-
});
10692
});
10793

10894
describe('unmountPopover', () => {
@@ -142,7 +128,6 @@ describe('AnnotationThread', () => {
142128
it('should render and display the popover for this annotation', () => {
143129
thread.getPopoverParent = jest.fn().mockReturnValue(rootElement);
144130
util.getPopoverLayer = jest.fn().mockReturnValue(rootElement);
145-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(false);
146131
ReactDOM.render = jest.fn();
147132
thread.position = jest.fn();
148133

@@ -293,18 +278,11 @@ describe('AnnotationThread', () => {
293278
expect(thread.emit).toBeCalledWith(THREAD_EVENT.save);
294279
});
295280

296-
it('should only render popover on desktop', () => {
281+
it('should only render popover', () => {
297282
thread.updateTemporaryAnnotation(tempAnnotation.id, serverAnnotation);
298283
expect(thread.renderAnnotationPopover).toBeCalled();
299284
expect(thread.state).toEqual(STATES.inactive);
300285
});
301-
302-
it('should only render popover on mobile', () => {
303-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(true);
304-
thread.updateTemporaryAnnotation(tempAnnotation.id, serverAnnotation);
305-
expect(thread.state).toEqual(STATES.active);
306-
expect(thread.renderAnnotationPopover).toBeCalled();
307-
});
308286
});
309287

310288
describe('delete()', () => {
@@ -601,12 +579,6 @@ describe('AnnotationThread', () => {
601579
thread.bindDOMListeners();
602580
expect(thread.element.addEventListener).toBeCalledWith('click', expect.any(Function));
603581
});
604-
605-
it('should not add mouseleave listener for mobile browsers', () => {
606-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(true);
607-
thread.bindDOMListeners();
608-
expect(thread.element.addEventListener).toBeCalledWith('click', expect.any(Function));
609-
});
610582
});
611583

612584
describe('unbindDOMListeners()', () => {
@@ -619,12 +591,6 @@ describe('AnnotationThread', () => {
619591
thread.unbindDOMListeners();
620592
expect(thread.element.removeEventListener).toBeCalledWith('click', expect.any(Function));
621593
});
622-
623-
it('should not add mouseleave listener for mobile browsers', () => {
624-
util.shouldDisplayMobileUI = jest.fn().mockReturnValue(true);
625-
thread.unbindDOMListeners();
626-
expect(thread.element.removeEventListener).toBeCalledWith('click', expect.any(Function));
627-
});
628594
});
629595

630596
describe('cancelUnsavedAnnotation()', () => {

‎src/__tests__/Annotator-test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ describe('Annotator', () => {
6060
file: {
6161
file_version: { id: 1 },
6262
},
63-
isMobile: false,
6463
options,
6564
intl: {},
6665
location: {},

‎src/_common.scss‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,6 @@
4545
outline: none;
4646
user-select: none;
4747

48-
@media #{$mobile}, #{$tablet} {
49-
font-size: 16px;
50-
line-height: 16px;
51-
52-
.btn {
53-
font-size: 16px;
54-
line-height: 16px;
55-
}
56-
}
57-
5848
.ReactModal__Body--open & {
5949
position: relative;
6050
}

‎src/_variables.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
@import '~box-ui-elements/es/styles/variables';
22

3-
$mobile: '(max-width: 767px)';
4-
$tablet: '(min-width: 768px) and (max-width: 1024px)';
5-
$desktop: '(min-width: 1025px)';
6-
73
$highlight-yellow: #fed94e;
84
$highlight-yellow-active-hover: #ffc900;
95
$highlight-yellow-hover: #f5b31b;

‎src/components/ActionControls/ActionControls.scss‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../variables";
1+
@import '../../variables';
22

33
.ba {
44
.bcs-at-mention-tip {
@@ -28,38 +28,4 @@
2828
.ba-annotator-label ~ .ba-action-controls .ba-action-controls-draw {
2929
margin-left: 5px;
3030
}
31-
32-
// TABLET-SPECIFIC CSS
33-
@media #{$mobile}, #{$tablet} {
34-
.ba-create-popover .ba-action-controls {
35-
justify-content: flex-end;
36-
border: none;
37-
box-shadow: none;
38-
}
39-
40-
.ba-annotation-input-container,
41-
.ba-create-popover .ba-annotation-input-container {
42-
bottom: 0;
43-
width: 100%;
44-
padding: 15px;
45-
background: white;
46-
border-top: 1px solid $see-see;
47-
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
48-
}
49-
50-
.ba-annotator-label ~ .ba-action-controls .ba-action-controls-draw,
51-
.ba-annotator-label ~ .ba-action-controls .ba-action-controls-highlight {
52-
margin: 0;
53-
border-left: 0;
54-
}
55-
}
56-
57-
// MOBILE CSS
58-
@media #{$mobile} {
59-
.ba-action-controls {
60-
justify-content: flex-end;
61-
width: 100%;
62-
background: white;
63-
}
64-
}
6531
}

‎src/components/ActionControls/DrawingControls.scss‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../variables";
1+
@import '../../variables';
22

33
.ba {
44
.ba-action-controls-draw {
@@ -29,29 +29,4 @@
2929
padding-left: $button-spacing;
3030
}
3131
}
32-
33-
// MOBILE & TABLET CSS
34-
@media #{$mobile}, #{$tablet} {
35-
.ba-inline-popover .ba-action-controls-draw {
36-
position: fixed;
37-
bottom: 0;
38-
left: 0;
39-
width: 100%;
40-
margin: 0;
41-
padding: 15px;
42-
background: white;
43-
border-top: 1px solid $seesee;
44-
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
45-
}
46-
47-
.ba-action-controls-draw .btn-plain,
48-
.ba-action-controls-draw .btn-plain:hover {
49-
padding: 10px;
50-
}
51-
52-
.ba-drawing-save-btn,
53-
.ba-drawing-save-btn:hover {
54-
border-right: 1px solid $seesee;
55-
}
56-
}
5732
}

‎src/components/ActionControls/HighlightControls.scss‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../variables";
1+
@import '../../variables';
22

33
.ba {
44
.ba-action-controls-highlight {
@@ -41,29 +41,4 @@
4141
padding-left: $button-spacing;
4242
}
4343
}
44-
45-
// MOBILE & TABLET CSS
46-
@media #{$mobile}, #{$tablet} {
47-
.ba-inline-popover .ba-action-controls-highlight {
48-
position: fixed;
49-
bottom: 0;
50-
left: 0;
51-
width: 100%;
52-
margin: 0;
53-
padding: 15px;
54-
background: white;
55-
border-top: 1px solid $seesee;
56-
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
57-
}
58-
59-
.ba-action-controls-highlight .btn-plain,
60-
.ba-action-controls-highlight .btn-plain:hover {
61-
padding: 10px;
62-
}
63-
64-
.ba-highlight-comment-btn,
65-
.ba-highlight-comment-btn:hover {
66-
border-left: 1px solid $seesee;
67-
}
68-
}
6944
}

0 commit comments

Comments
 (0)