Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Fixes #5002 - UI fixes in non-Firefox #5071

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion server/src/delete-shot-button.js
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {

let deleteButtonStyle = null;
if (this.props.isIcon) {
deleteButtonStyle = `button transparent trash ${deletePanelOpenClass}`;
deleteButtonStyle = `button transparent icon-trash ${deletePanelOpenClass}`;
} else {
deleteButtonStyle = `button nav-button transparent ${deletePanelOpenClass}`;
}
11 changes: 9 additions & 2 deletions server/src/pages/shot/text-tool.js
Original file line number Diff line number Diff line change
@@ -214,12 +214,19 @@ exports.TextTool = class TextTool extends React.Component {
}
const styles = window.getComputedStyle(this.textInput.current);
const FONT_SIZE = parseInt(styles["font-size"], 10);
let line_height = styles["line-height"];

// Depending on the user agent computed styles
// line-height can have value as normal
if (line_height.toLowerCase() === "normal") {
line_height = 1.1 * FONT_SIZE;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using value 1.1 (approximate default 1.2) to compute line-height for the fonts used in TextTool

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm. This special case doesn't cover other weird stuff, like ems or percentages, that might be set as a user agent's default. Can we just set the line-height in the CSS directly?

}

// Due to line-height differences of how fonts are rendered across platforms
// adjust text y position to one-third of difference of line-height and font-size
const ADJUST_VERTICAL_SHIFT = (parseFloat(styles["line-height"]) - FONT_SIZE) / 3;
const ADJUST_VERTICAL_SHIFT = (parseFloat(line_height) - FONT_SIZE) / 3;
const x = this.state.left + parseFloat(styles["padding-left"]);
const y = this.state.top + TEXT_INPUT_PADDING + parseFloat(styles["line-height"]) / 2 + ADJUST_VERTICAL_SHIFT;
const y = this.state.top + TEXT_INPUT_PADDING + parseFloat(line_height) / 2 + ADJUST_VERTICAL_SHIFT;

const textCanvas = document.createElement("canvas");
textCanvas.width = this.props.baseCanvas.width;
2 changes: 1 addition & 1 deletion server/src/pages/shotindex/view.js
Original file line number Diff line number Diff line change
@@ -159,7 +159,7 @@ class Body extends React.Component {
<div>
<Localized id="shotIndexAlertErrorFavoriteShot">
<div id="shotIndexAlertErrorFavoriteShot" hidden></div>
</Localized>,
</Localized>
<Localized id="shotIndexPageErrorDeletingShot">
<div id="shotIndexPageErrorDeletingShot" hidden></div>
</Localized>
1 change: 1 addition & 0 deletions static/css/frame.scss
Original file line number Diff line number Diff line change
@@ -674,6 +674,7 @@ body {
// CSS used for Annotation Text Tool
.text-select {
-moz-appearance: none; //sass-lint:disable-line no-vendor-prefixes
-webkit-appearance: none;
appearance: none;
background-color: $light-default;
background-image: url("../img/icon-dropdown.svg");
7 changes: 7 additions & 0 deletions static/css/partials/_delete-confirmation.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
.delete-shot-button {
position: relative;
.icon-trash {
z-index: 1;
img {
width: 20px;
height: 20px;
}
}
}

.delete-confirmation-dialog {