Skip to content

Commit

Permalink
use multiple class names in BEM format
Browse files Browse the repository at this point in the history
  • Loading branch information
@c298lee
c298lee committed Feb 3, 2025
1 parent 20de538 commit 5ba5800
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 69 deletions.
2 changes: 1 addition & 1 deletion packages/feedback/src/screenshot/components/CropIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function CropIconFactory({
}: FactoryParams) {
return function CropIcon(): VNode {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
stroke="currentColor"
Expand Down
2 changes: 1 addition & 1 deletion packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function PenIconFactory({
}: FactoryParams) {
return function PenIcon(): VNode {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
stroke="currentColor"
Expand Down
111 changes: 47 additions & 64 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,13 +407,13 @@ export function ScreenshotEditorFactory({
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
<div class="editor__image-container">
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
{isCropping && (
<div
class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
${confirmCrop ? 'editor__crop-container--move' : ''}`}
ref={cropContainerRef}
>
<canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
{(!options._experiments.annotations || isCropping) && (
<div>
<CropCorner
left={croppingRect.startX - CROP_BUTTON_BORDER}
Expand Down Expand Up @@ -441,48 +441,47 @@ export function ScreenshotEditorFactory({
></CropCorner>
</div>
)}
<div
style={{
left: Math.max(0, croppingRect.endX - 191),
top: Math.max(0, croppingRect.endY + 8),
display: confirmCrop ? 'flex' : 'none',
}}
class="editor__crop-btn-group"
>
<button
onClick={e => {
e.preventDefault();
if (croppingRef.current) {
setCroppingRect({
startX: 0,
startY: 0,
endX: croppingRef.current.width / DPI,
endY: croppingRef.current.height / DPI,
});
}
setConfirmCrop(false);
}}
class="btn btn--default"
>
{options.cancelButtonLabel}
</button>
<button
onClick={e => {
e.preventDefault();
applyCrop();
setConfirmCrop(false);
{(!options._experiments.annotations || isCropping) && (
<div
style={{
left: Math.max(0, croppingRect.endX - 191),
top: Math.max(0, croppingRect.endY + 8),
}}
class="btn btn--primary"
class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
>
{options.confirmButtonLabel}
</button>
</div>
<button
onClick={e => {
e.preventDefault();
if (croppingRef.current) {
setCroppingRect({
startX: 0,
startY: 0,
endX: croppingRef.current.width / DPI,
endY: croppingRef.current.height / DPI,
});
}
setConfirmCrop(false);
}}
class="btn btn--default"
>
{options.cancelButtonLabel}
</button>
<button
onClick={e => {
e.preventDefault();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
>
{options.confirmButtonLabel}
</button>
</div>
)}
</div>

<canvas
class="editor__annotation"
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
Expand All @@ -492,40 +491,24 @@ export function ScreenshotEditorFactory({
<div />
<div class="editor__tool-bar">
<button
class="editor__tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
setIsCropping(false);
}}
>
<CropIcon />
<PenIcon />
</button>
<button
class="editor__tool"
style={{
background: isCropping
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isCropping
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
onClick={e => {
e.preventDefault();
setIsCropping(!isCropping);
setIsAnnotating(false);
}}
>
<PenIcon />
<CropIcon />
</button>
</div>
<div />
Expand Down
33 changes: 30 additions & 3 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
);
}
.editor__annotation {
z-index: 1;
}
.editor__annotation--active {
z-index: 2;
}
.editor__canvas-container {
width: 100%;
height: 100%;
Expand All @@ -55,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}
.editor__crop-container {
custor: auto;
position: absolute;
z-index: 2;
}
.editor__crop-container--inactive {
z-index: 1;
}
.editor__crop-container--move {
cursor: move;
}
.editor__crop-btn-group {
Expand All @@ -65,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
display: none;
}
.editor__crop-btn-group--active {
display: flex;
}
.editor__crop-corner {
Expand Down Expand Up @@ -96,20 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-top: none;
}
.editor__tool-container {
padding-top: 10px;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__tool-bar {
height: 30px;
display: flex;
gap: 8px;
gap: 8px;
}
.editor__tool {
display: flex;
padding: 8px 12px;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
background: var(--button-background, var(--background));
color: var(--button-foreground, var(--foreground));
}
.editor__tool--active {
background: var(--button-primary-background, var(--accent-background));
color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

Expand Down

0 comments on commit 5ba5800

Please sign in to comment.