-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(feedback): Update user feedback screenshot and cropping to align with designs #11227
Merged
Merged
Changes from 20 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
de4562c
customize crop color, BES naming & padding
c298lee e441bc8
fix BEM naming
c298lee 66565b6
feat(opentelemetry): Do not capture exceptions for timed events (#11221)
lforst d87efcf
fix(metrics): use web-vitals ttfb calculation (#11185)
AbhiPrasad 77ef529
fix(node): Clear ANR timer on stop (#11229)
timfish e0e0c17
fix(feedback): Fix screenshot black bars in Safari (#11233)
c298lee 6c770ad
meta: CHANGELOG for 8.0.0-alpha.5
AbhiPrasad 5a2e064
Apply suggestions from code review
Lms24 829ab27
release: 8.0.0-alpha.5
getsentry-bot ecb82fb
build(bundles): Use ES2018 for bundles (#11201)
s1gr1d f6149d8
fix(sveltekit): Ensure sub requests are recorded as child spans of pa…
Lms24 02f1ba6
fix(node): Local variables skipped after Promise (#11234)
timfish 28d5ebe
ref(replay): Move `@sentry/replay` code to `@sentry-internal/replay` …
s1gr1d 5dd7202
feat(tracing): Remove `instrumentRoutingWithDefaults` (#11240)
AbhiPrasad 1e0c078
ref(v8): change integration.setupOnce signature (#11238)
AbhiPrasad d5d661e
chore: Add angular note to 8.0.0-alpha.5 changelog (#11254)
AbhiPrasad 856766a
crop looks more like photoshop
c298lee 8566ce8
Merge branch 'develop' into cl/screenshot-styles
c298lee 1c11f74
Merge branch 'develop' into cl/screenshot-styles
c298lee 1167d02
Merge branch 'develop' into cl/screenshot-styles
c298lee 8c2bc3a
move crop corner border styles to constants
c298lee 85522f6
PR comment fix
c298lee 7b41ae0
lint
c298lee File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,8 +6,8 @@ import { DOCUMENT } from '../../constants'; | |
export function createScreenshotInputStyles(): HTMLStyleElement { | ||
const style = DOCUMENT.createElement('style'); | ||
|
||
const surface200 = '#FAF9FB'; | ||
const gray100 = '#F0ECF3'; | ||
const surface200 = '#1A141F'; | ||
const gray100 = '#302735'; | ||
|
||
style.textContent = ` | ||
.dialog__content:has(.editor) { | ||
|
@@ -16,6 +16,9 @@ export function createScreenshotInputStyles(): HTMLStyleElement { | |
} | ||
|
||
.editor { | ||
padding: 10px; | ||
padding-top: 65px; | ||
padding-bottom: 65px; | ||
flex-grow: 1; | ||
|
||
background-color: ${surface200}; | ||
|
@@ -35,24 +38,19 @@ export function createScreenshotInputStyles(): HTMLStyleElement { | |
); | ||
} | ||
|
||
.canvasContainer { | ||
.editor__canvas-container { | ||
width: 100%; | ||
height: 100%; | ||
position: relative; | ||
} | ||
|
||
.canvasContainer canvas { | ||
.editor__canvas-container canvas { | ||
width: 100%; | ||
height: 100%; | ||
object-fit: contain; | ||
} | ||
|
||
.cropper { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
.crop-btn-group { | ||
.editor__crop-btn-group { | ||
padding: 8px; | ||
gap: 8px; | ||
border-radius: var(--form-content-border-radius); | ||
|
@@ -61,11 +59,34 @@ export function createScreenshotInputStyles(): HTMLStyleElement { | |
position: absolute; | ||
} | ||
|
||
.crop-btn { | ||
.editor__crop-corner { | ||
width: 30px; | ||
height: 30px; | ||
position: absolute; | ||
background: none; | ||
border: solid #FFFFFF; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we add this to constants and share it with the canvas style? |
||
border-width: 3px; | ||
} | ||
|
||
.editor__crop-corner--top-left { | ||
cursor: nwse-resize; | ||
border-right: none; | ||
border-bottom: none; | ||
} | ||
.editor__crop-corner--top-right { | ||
cursor: nesw-resize; | ||
border-left: none; | ||
border-bottom: none; | ||
} | ||
.editor__crop-corner--bottom-left { | ||
cursor: nesw-resize; | ||
border-right: none; | ||
border-top: none; | ||
} | ||
.editor__crop-corner--bottom-right { | ||
cursor: nwse-resize; | ||
border-left: none; | ||
border-top: none; | ||
} | ||
`; | ||
|
||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This reduces the crop rectangle blurriness, which is a known issue on retina screens: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio