Skip to content

Commit 709de85

Browse files
committed
Scaling the canvas inside the feedback modal
1 parent fedf6de commit 709de85

File tree

2 files changed

+32
-7
lines changed

2 files changed

+32
-7
lines changed

packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,45 @@ import { DOCUMENT } from '../../constants';
66
export function createScreenshotInputStyles(): HTMLStyleElement {
77
const style = DOCUMENT.createElement('style');
88

9+
const surface200 = '#FAF9FB';
10+
const gray100 = '#F0ECF3';
11+
912
style.textContent = `
1013
.dialog__content:has(.editor) {
1114
top: var(--bottom);
1215
left: var(--right);
1316
}
1417
1518
.editor {
16-
background: red;
19+
display: flex;
20+
flex: 1 0 auto;
21+
22+
background-color: ${surface200};
23+
background-image: repeating-linear-gradient(
24+
-145deg,
25+
transparent,
26+
transparent 8px,
27+
${surface200} 8px,
28+
${surface200} 11px
29+
),
30+
repeating-linear-gradient(
31+
-45deg,
32+
transparent,
33+
transparent 15px,
34+
${gray100} 15px,
35+
${gray100} 16px
36+
);
37+
}
38+
39+
.canvasContainer {
1740
flex: 1 0 auto;
41+
display: contents;
1842
}
1943
20-
.editor .image {
21-
width: 100%;
22-
height: 100%;
44+
.canvasContainer canvas {
45+
flex: 1 0 auto;
46+
width: 0; /* reasons... */
47+
align-self: center;
2348
}
2449
`;
2550

packages/feedback2/src/screenshot/components/ScreenshotInput.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export function makeInput(h: typeof hType, canvas: HTMLCanvasElement, dialog: Di
2828
if (!context) {
2929
throw new Error('Could not get canvas context');
3030
}
31-
// canvas.width = imageSource.videoWidth;
32-
// canvas.height = imageSource.videoHeight;
31+
canvas.width = imageSource.videoWidth;
32+
canvas.height = imageSource.videoHeight;
3333
context.drawImage(imageSource, 0, 0);
3434
},
3535
[canvas],
@@ -42,7 +42,7 @@ export function makeInput(h: typeof hType, canvas: HTMLCanvasElement, dialog: Di
4242
return (
4343
<div class="editor">
4444
<style dangerouslySetInnerHTML={styles} />
45-
<div ref={canvasContainerRef} />
45+
<div class="canvasContainer" ref={canvasContainerRef} />
4646
</div>
4747
);
4848
};

0 commit comments

Comments
 (0)