Skip to content

Commit 025bcab

Browse files
RoyEJohnsonRoyEJohnson
committed
Show EditCard with instructions for focused highlight without note
Testing is broken
1 parent c105d98 commit 025bcab

File tree

8 files changed

+47
-101
lines changed

8 files changed

+47
-101
lines changed

‎src/app/content/highlights/components/Card.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -293,13 +293,12 @@ const StyledCard = styled(Card)`
293293
// Styling is expensive and most Cards don't need to render
294294
function PreCard(props: CardProps) {
295295
const computedProps = useComputedProps(props);
296-
const hideUnfocusedEditCard = computedProps.annotation ? {} : {isHidden: !props.shouldFocusCard};
297296

298297
if (!computedProps.annotation && (!props.isActive)) {
299298
return null;
300299
}
301300
return (
302-
<StyledCard {...{...props, ...hideUnfocusedEditCard}} />
301+
<StyledCard {...props} />
303302
);
304303
}
305304

‎src/app/content/highlights/components/ColorPicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,5 +174,5 @@ export default styled(ColorPicker)`
174174
flex-direction: row;
175175
overflow: visible;
176176
gap: ${cardPadding}rem;
177-
padding: ${cardPadding}rem 0.3rem;
177+
padding: 0 0.3rem ${cardPadding}rem;
178178
`;

‎src/app/content/highlights/components/EditCard.spec.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ describe('EditCard', () => {
8989
{...editCardProps}
9090
data={highlightData}
9191
isActive={true}
92+
shouldFocusCard={true}
9293
/>
9394
</TestContainer>
9495
);
@@ -128,6 +129,7 @@ describe('EditCard', () => {
128129
{...editCardProps}
129130
isActive={true}
130131
data={data}
132+
shouldFocusCard={true}
131133
/>
132134
</TestContainer>
133135
);
@@ -166,7 +168,7 @@ describe('EditCard', () => {
166168
.mockReturnValue(formatUser(testAccountsUser));
167169
const component = renderer.create(
168170
<TestContainer services={services} store={store}>
169-
<EditCard {...editCardProps} isActive={true} />
171+
<EditCard {...editCardProps} isActive={true} shouldFocusCard={true} />
170172
</TestContainer>
171173
);
172174

@@ -189,6 +191,7 @@ describe('EditCard', () => {
189191
{...editCardProps}
190192
data={data}
191193
isActive={true}
194+
shouldFocusCard={true}
192195
/>
193196
</TestContainer>
194197
);
@@ -254,6 +257,7 @@ describe('EditCard', () => {
254257
pageId='pageId'
255258
isActive={true}
256259
onCreate={jest.fn()}
260+
shouldFocusCard={true}
257261
/>
258262
</TestContainer>
259263
);
@@ -483,6 +487,7 @@ describe('EditCard', () => {
483487
locationFilterId='locationId'
484488
pageId='pageId'
485489
isActive={true}
490+
shouldFocusCard={true}
486491
/>
487492
</TestContainer>
488493
);
@@ -515,7 +520,7 @@ describe('EditCard', () => {
515520
.mockReturnValue(formatUser(testAccountsUser));
516521
const component = renderer.create(
517522
<TestContainer services={services} store={store}>
518-
<EditCard {...editCardProps} isActive={true} />
523+
<EditCard {...editCardProps} isActive={true} shouldFocusCard={true} />
519524
</TestContainer>
520525
);
521526

@@ -534,7 +539,7 @@ describe('EditCard', () => {
534539
.mockReturnValue(formatUser(testAccountsUser));
535540
const component = renderer.create(
536541
<TestContainer services={services} store={store}>
537-
<EditCard {...editCardProps} />
542+
<EditCard {...editCardProps} shouldFocusCard={true} />
538543
</TestContainer>
539544
);
540545

@@ -554,7 +559,7 @@ describe('EditCard', () => {
554559
.mockReturnValue(formatUser(testAccountsUser));
555560
const component = renderer.create(
556561
<TestContainer services={services} store={store}>
557-
<EditCard {...editCardProps} data={highlightData} />
562+
<EditCard {...editCardProps} data={highlightData} shouldFocusCard={true} />
558563
</TestContainer>
559564
);
560565

@@ -576,7 +581,7 @@ describe('EditCard', () => {
576581

577582
const component = renderer.create(
578583
<TestContainer services={services} store={store}>
579-
<EditCard {...editCardProps} isActive={true} />
584+
<EditCard {...editCardProps} isActive={true} shouldFocusCard={true} />
580585
</TestContainer>
581586
);
582587

@@ -601,6 +606,7 @@ describe('EditCard', () => {
601606
{...{...editCardProps, hasUnsavedHighlight: false}}
602607
onHeightChange={onHeightChange}
603608
isActive={true}
609+
shouldFocusCard={true}
604610
/>
605611
</TestContainer>
606612
</div>
@@ -662,6 +668,7 @@ describe('EditCard', () => {
662668
isActive={true}
663669
data={highlightData}
664670
hasUnsavedHighlight={true}
671+
shouldFocusCard={true}
665672
/>
666673
</TestContainer>
667674
);
@@ -696,6 +703,7 @@ describe('EditCard', () => {
696703
{...editCardProps}
697704
isActive={true}
698705
data={undefined}
706+
shouldFocusCard={true}
699707
/>
700708
</TestContainer>
701709
);
@@ -775,6 +783,7 @@ describe('EditCard', () => {
775783
{...editCardProps}
776784
isActive={true}
777785
onHeightChange={onHeightChange}
786+
shouldFocusCard={true}
778787
/>
779788
</TestContainer>,
780789
{createNodeMock}

‎src/app/content/highlights/components/EditCard.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export interface EditCardProps {
4646
data?: HighlightData;
4747
className: string;
4848
shouldFocusCard: boolean;
49+
minimize?: boolean;
4950
}
5051

5152
// tslint:disable-next-line:variable-name
@@ -73,18 +74,22 @@ function LoginOrEdit({
7374
role='dialog'
7475
aria-label={formatMessage({id: 'i18n:highlighter:edit-note:label'})}
7576
>
76-
<form
77-
ref={mergeRefs(fref, element)}
78-
data-analytics-region='edit-note'
79-
data-highlight-card
80-
>
81-
{authenticated ? (
82-
<ActiveEditCard props={props} element={element}
83-
/>
84-
) : (
85-
<LoginConfirmation onBlur={props.onBlur} />
86-
)}
87-
</form>
77+
{
78+
(props.shouldFocusCard || props.data?.annotation) ?
79+
<form
80+
ref={mergeRefs(fref, element)}
81+
data-analytics-region='edit-note'
82+
data-highlight-card
83+
>
84+
{authenticated ? (
85+
<ActiveEditCard props={props} element={element}
86+
/>
87+
) : (
88+
<LoginConfirmation onBlur={props.onBlur} />
89+
)}
90+
</form> :
91+
<i>Press Enter or double-click highlight to edit highlight</i>
92+
}
8893
</div>
8994
);
9095
}
@@ -506,7 +511,6 @@ export default styled(EditCard)`
506511
background: ${theme.color.neutral.formBackground};
507512
user-select: none;
508513
overflow: visible;
509-
padding-top: 0 !important;
510514
511515
${ButtonGroup} {
512516
margin-top: ${cardPadding}rem;

‎src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
449449
flex-direction: row;
450450
overflow: visible;
451451
gap: 0.8rem;
452-
padding: 0.8rem 0.3rem;
452+
padding: 0 0.3rem 0.8rem;
453453
}
454454
455455
.c4 {

‎src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Card matches snapshot when focused without note 1`] = `
44
.c0 {
5-
visibility: hidden;
5+
visibility: visible;
66
-webkit-animation: 600ms bcCCNc ease-out;
77
animation: 600ms bcCCNc ease-out;
88
display: block;
@@ -121,7 +121,7 @@ exports[`Card matches snapshot when focused without note 1`] = `
121121

122122
exports[`Card matches snapshot when passed data without note 1`] = `
123123
.c0 {
124-
visibility: hidden;
124+
visibility: visible;
125125
-webkit-animation: 600ms bcCCNc ease-out;
126126
animation: 600ms bcCCNc ease-out;
127127
display: block;
@@ -215,7 +215,7 @@ exports[`Card matches snapshot when passed data without note 1`] = `
215215

216216
exports[`Card matches snapshot without data 1`] = `
217217
.c0 {
218-
visibility: hidden;
218+
visibility: visible;
219219
-webkit-animation: 600ms bcCCNc ease-out;
220220
animation: 600ms bcCCNc ease-out;
221221
display: block;

‎src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
320320
flex-direction: row;
321321
overflow: visible;
322322
gap: 0.8rem;
323-
padding: 0.8rem 0.3rem;
323+
padding: 0 0.3rem 0.8rem;
324324
}
325325
326326
<div

‎src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap‎

Lines changed: 9 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@ exports[`EditCard matches snapshot when editing 1`] = `
9696
-ms-user-select: none;
9797
user-select: none;
9898
overflow: visible;
99-
padding-top: 0 !important;
10099
}
101100
102101
.c0 .c1 {
@@ -172,7 +171,6 @@ exports[`EditCard matches snapshot when focused 1`] = `
172171
-ms-user-select: none;
173172
user-select: none;
174173
overflow: visible;
175-
padding-top: 0 !important;
176174
}
177175
178176
.c0 .c1 {
@@ -184,25 +182,9 @@ exports[`EditCard matches snapshot when focused 1`] = `
184182
className="c0"
185183
role="dialog"
186184
>
187-
<form
188-
data-analytics-region="edit-note"
189-
data-highlight-card={true}
190-
>
191-
<div
192-
data-props={
193-
Object {
194-
"confirmLink": "/accounts/login?r=/",
195-
"confirmMessage": "i18n:highlighting:login:link",
196-
"data-analytics-label": "login",
197-
"data-analytics-region": "highlighting-login",
198-
"drawFocus": false,
199-
"message": "i18n:highlighting:login:prompt",
200-
"onCancel": [MockFunction],
201-
}
202-
}
203-
mock-confirmation="true"
204-
/>
205-
</form>
185+
<i>
186+
Press Enter or double-click highlight to edit highlight
187+
</i>
206188
</div>
207189
`;
208190

@@ -214,7 +196,6 @@ exports[`EditCard matches snapshot with data 1`] = `
214196
-ms-user-select: none;
215197
user-select: none;
216198
overflow: visible;
217-
padding-top: 0 !important;
218199
}
219200
220201
.c0 .c1 {
@@ -226,39 +207,9 @@ exports[`EditCard matches snapshot with data 1`] = `
226207
className="c0"
227208
role="dialog"
228209
>
229-
<form
230-
data-analytics-region="edit-note"
231-
data-highlight-card={true}
232-
>
233-
<div
234-
className=""
235-
>
236-
<div
237-
data-props={
238-
Object {
239-
"color": undefined,
240-
"onChange": [Function],
241-
"onRemove": null,
242-
}
243-
}
244-
mock-color-picker="true"
245-
/>
246-
<div
247-
data-props={
248-
Object {
249-
"edit": false,
250-
"note": "",
251-
"onChange": [Function],
252-
"onFocus": [Function],
253-
"textareaRef": Object {
254-
"current": null,
255-
},
256-
}
257-
}
258-
mock-note="true"
259-
/>
260-
</div>
261-
</form>
210+
<i>
211+
Press Enter or double-click highlight to edit highlight
212+
</i>
262213
</div>
263214
`;
264215

@@ -270,7 +221,6 @@ exports[`EditCard matches snapshot without data 1`] = `
270221
-ms-user-select: none;
271222
user-select: none;
272223
overflow: visible;
273-
padding-top: 0 !important;
274224
}
275225
276226
.c0 .c1 {
@@ -282,24 +232,8 @@ exports[`EditCard matches snapshot without data 1`] = `
282232
className="c0"
283233
role="dialog"
284234
>
285-
<form
286-
data-analytics-region="edit-note"
287-
data-highlight-card={true}
288-
>
289-
<div
290-
data-props={
291-
Object {
292-
"confirmLink": "/accounts/login?r=/",
293-
"confirmMessage": "i18n:highlighting:login:link",
294-
"data-analytics-label": "login",
295-
"data-analytics-region": "highlighting-login",
296-
"drawFocus": false,
297-
"message": "i18n:highlighting:login:prompt",
298-
"onCancel": [MockFunction],
299-
}
300-
}
301-
mock-confirmation="true"
302-
/>
303-
</form>
235+
<i>
236+
Press Enter or double-click highlight to edit highlight
237+
</i>
304238
</div>
305239
`;

0 commit comments

Comments
 (0)