Skip to content

fix: OPTIC-1835: Address issue affecting OCR region panel visualization #7259

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.

Sign up for GitHub

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

Merged
merged 11 commits into from
Mar 20, 2025
Merged

fix: OPTIC-1835: Address issue affecting OCR region panel visualization #7259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a53971b
fix: OPTIC-1835: Address issue affecting OCR region panel visualization
yyassi-heartex Mar 20, 2025
a35985f
adding quick fix for comment form button alignment
yyassi-heartex Mar 20, 2025
0215077
lint cleanup
yyassi-heartex Mar 20, 2025
3490ca4
Merge branch 'develop' into 'fb-optic-1835/ocr-region'
robot-ci-heartex Mar 20, 2025
e9fbd04
Sync Follow Merge dependencies
robot-ci-heartex Mar 20, 2025
31818d2
cleaning up flex styling
yyassi-heartex Mar 20, 2025
bf8a72f
further supporting smaller sizes
yyassi-heartex Mar 20, 2025
29cd3c1
minor visual tweaks to handle smaller sizes
yyassi-heartex Mar 20, 2025
0e6890e
even smaller size
yyassi-heartex Mar 20, 2025
ca64f37
cleaning up layout so we leverage collapsed
yyassi-heartex Mar 20, 2025
06ed0da
lint cleanup
yyassi-heartex Mar 20, 2025
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: 2 additions & 0 deletions web/libs/editor/src/components/Comments/Comment/CommentFormButtons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
.comment-form-buttons {
&__buttons {
display: flex;
height: 100%;
align-items: center;
}

&__action {
Expand Down
4 changes: 3 additions & 1 deletion web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,8 @@ const RootTitle: FC<any> = observer(
toggleCollapsed={toggleCollapsed}
/>
</Elem>
{hasControls && isArea && (

{!collapsed && hasControls && isArea && (
<Elem name="ocr">
<RegionItemDesc
item={item}
Expand Down Expand Up @@ -613,6 +614,7 @@ const RegionItemDesc: FC<RegionItemOCSProps> = observer(({ item, collapsed, setC
setCollapsed={setCollapsed}
color={css}
outliner
canDelete={false}
/>
) : null;
})}
Expand Down
17 changes: 11 additions & 6 deletions web/libs/editor/src/components/SidePanels/OutlinerPanel/TreeView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,8 @@
&-node {
&-content-wrapper {
flex: 1;
padding: 0 4px;
padding: var(--spacing-small-x, 4px);
display: flex;
max-width: 100%;
align-items: center;
}
}
Expand Down Expand Up @@ -93,6 +92,8 @@
display: inline;
line-height: 1.2; // make it dense for multiline labels
padding: 2px 0; // + add a little padding so it won't be too close to the item edges
overflow: hidden;
text-overflow: ellipsis;
}
}

Expand Down Expand Up @@ -122,15 +123,16 @@
min-height: 32px;
align-items: center;
justify-content: space-between;
gap: var(--spacing-small-x, 4px);
}

&__index {
width: 18px;
height: 18px;
display: flex;
flex: none;
font-size: 9px;
color: var(--sand_0);
margin-right: 4px;
text-align: center;
align-items: center;
border-radius: 4px;
Expand All @@ -143,7 +145,12 @@
display: inline-flex;
flex: 1;
color: var(--text-color, var(--sand_900));
min-width: 0;
min-width: 50px;
}

&__ocr {
flex: 1 1 auto;
min-width: 50px;
}

&__text {
Expand Down Expand Up @@ -209,7 +216,6 @@

&-wrapper {
display: flex;
margin-left: 13px;
}

.region-context-menu {
Expand All @@ -235,7 +241,6 @@
.ocr {
background: none;
position: relative;
padding: 0 0 8px;

&_empty {
display: none;
Expand Down
7 changes: 1 addition & 6 deletions web/libs/editor/src/tags/control/TextArea/TextArea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,6 @@
--border-color: var(--sand_300);
}

&_outliner &__item,
&_outliner &__form {
margin: 0 0 0 -8px;
}

&_outliner &__item + &__item,
&_outliner &__item + &__form,
&_outliner &__form + &__item,
Expand All @@ -80,7 +75,7 @@
background: none;
font-size: 14px;
line-height: normal;
padding: 8px 20px 8px 8px;
padding: 8px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid transparent;
Expand Down
10 changes: 6 additions & 4 deletions web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import "./TextArea.scss";
const { TextArea } = Input;

const HtxTextAreaResultLine = forwardRef(
({ idx, value, readOnly, onChange, onDelete, onFocus, validate, control, collapsed }, ref) => {
({ idx, value, readOnly, onChange, onDelete, onFocus, validate, control, collapsed, canDelete = true }, ref) => {
const rows = Number.parseInt(control.rows);
const isTextarea = rows > 1;
const [stateValue, setStateValue] = useState(value ?? "");
Expand Down Expand Up @@ -75,7 +75,7 @@ const HtxTextAreaResultLine = forwardRef(
return (
<Elem name="item">
<Elem name="input" tag={isTextarea ? TextArea : Input} {...inputProps} ref={ref} />
{!collapsed && !readOnly && (
{canDelete && !collapsed && !readOnly && (
<Elem
name="action"
aria-label="Delete Region"
Expand All @@ -93,7 +93,7 @@ const HtxTextAreaResultLine = forwardRef(
},
);

const HtxTextAreaResult = observer(({ item, control, firstResultInputRef, onFocus, collapsed }) => {
const HtxTextAreaResult = observer(({ item, control, firstResultInputRef, onFocus, collapsed, canDelete = true }) => {
const value = item.mainValue;
const editable = !item.isReadOnly() && item.from_name.editable && !item.area.isReadOnly();

Expand Down Expand Up @@ -133,12 +133,13 @@ const HtxTextAreaResult = observer(({ item, control, firstResultInputRef, onFocu
onFocus={onFocus}
collapsed={collapsed}
validate={item.from_name.validateText}
canDelete={item.from_name.isDeleteable && canDelete}
/>
);
});
});

const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, outliner, color }) => {
const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, outliner, color, canDelete = true }) => {
const rows = Number.parseInt(item.rows);
const isTextArea = rows > 1;
const isActive = item.perRegionArea === area;
Expand Down Expand Up @@ -254,6 +255,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
collapsed={collapsed}
firstResultInputRef={firstResultInputRef}
onFocus={expand}
canDelete={canDelete}
/>
) : null}

Expand Down
Loading