Skip to content

search-matrix: Align left edge of regex boxes #147

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

Open
djvill wants to merge 1 commit into
base: main
Choose a base branch
from
Open

search-matrix: Align left edge of regex boxes #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 30 additions & 14 deletions .../src/main/angular/projects/labbcat-view/src/app/search-matrix/search-matrix.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,6 @@ fieldset.anchor-end span.anchor-end img {
position: relative;
width: 100%;
}
span.regexp, span.ipa, span.numeric {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
div.match {
display: flex;
flex-direction: row;
Expand All @@ -97,30 +91,52 @@ div.match {
}
div.match > span {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.left-container.number {
flex-basis: 50%
}
.right-container.number {
flex-basis: 50%
}
.number > input {
flex-grow: 1;
}
.left-container.regexp {
flex-basis: 40%
}
.right-container.regexp {
flex-basis: 60%
}
.not {
flex-grow: 1;
}
span.match {
flex-grow: 1;
}
div.match > .target.segment {
flex-grow: revert;
}
span.help lib-button {
span.help lib-button, .add-match lib-button {
position: relative;
left: 10px;
}

.add-match {
display: flex;
flex-direction: column;
}
.target img {
vertical-align: middle;
height: 10pt;
}
.segment.target img {
vertical-align: bottom;
height: 10pt;
}
.deselected {
opacity: 0.33;
}

span.not { width: 40%; }
span.not select { width: 100%; }
span.match { width: 60%; }
input.numeric { width: 45%; }

.adj {
Expand Down
140 changes: 65 additions & 75 deletions ...src/main/angular/projects/labbcat-view/src/app/search-matrix/search-matrix.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,17 @@
>
</span>
<div class="match" *ngFor="let match of column.layers[layerId]; index as m">
<span *ngIf="isSegmentLayer(schema.layers[layerId])"
class="target segment"
i18n-title title="Target this match">
<img
i18n-title title="Target this match"
alt="🎯" [src]="imagesLocation+'/target.svg'"
[class]="column.layers[layerId][m].target?'selected':'deselected'"
(click)="setTarget(column.layers[layerId][m])">
</span>
<ng-container
*ngIf="layerId != schema.turnLayerId && layerId != schema.utteranceLayerId"
[ngSwitch]="schema.layers[layerId].type">

<span *ngSwitchCase="'number'" class="numeric">
<ng-container *ngIf="layerId != schema.turnLayerId && layerId != schema.utteranceLayerId && schema.layers[layerId].type == 'number'">
<span class="left-container number">
<span *ngIf="isSegmentLayer(schema.layers[layerId])"
class="target segment"
i18n-title title="Target this match">
<img
i18n-title title="Target this match"
alt="🎯" [src]="imagesLocation+'/target.svg'"
[class]="column.layers[layerId][m].target?'selected':'deselected'"
(click)="setTarget(column.layers[layerId][m])">
</span>
<span className="ge">&ge;</span>
<input
class="numeric minimum"
Expand All @@ -64,16 +61,42 @@
[(ngModel)]="match.min"
appAutofocus="true"
(keydown.enter)="startSearch($event)">
</span>
<span class="right-container number">
<span className="lt">&lt;</span>
<input
class="numeric maximum"
type="number"
i18n-placeholder placeholder="Maximum"
[(ngModel)]="match.max"
(keydown.enter)="startSearch($event)">
<div class="add-match"
*ngIf="m+1 == column.layers[layerId].length && (layerId == 'segment' || schema.layers[layerId].parentId == 'segment')">
<lib-button
i18n-title title="Add word-internal segment pattern"
class="small"
icon="➕" img="add.svg"
(press)="addMatch(column, layerId)"></lib-button>
<lib-button
*ngIf="column.layers[layerId].length > 1"
class="small"
icon="➖" img="remove.svg"
i18n-title title="Remove word-internal segment pattern"
(press)="removeMatch(column, layerId)"></lib-button>
</div>
</span>

<span *ngSwitchCase="'ipa'" class="ipa">
</ng-container>
<ng-container *ngIf="layerId != schema.turnLayerId && layerId != schema.utteranceLayerId && (schema.layers[layerId].type == 'ipa' || schema.layers[layerId].type == 'string')">
<span class="left-container regexp">
<span *ngIf="isSegmentLayer(schema.layers[layerId])"
class="target segment"
i18n-title title="Target this match">
<img
i18n-title title="Target this match"
alt="🎯" [src]="imagesLocation+'/target.svg'"
[class]="column.layers[layerId][m].target?'selected':'deselected'"
(click)="setTarget(column.layers[layerId][m])">
</span>
<span class="not">
<select class="not"
i18n-title title="match or not"
Expand All @@ -82,12 +105,15 @@
<option value="true" i18n>doesn't match</option>
</select>
</span>
</span>
<span class="right-container regexp">
<span class="match">
<lib-input-regexp
*ngIf="isCaseSensitive(match)"
i18n-placeholder placeholder="Regular expression (A≠a)"
i18n-title title="Regular expression (case sensitive)"
type="text"
[className]="schema.layers[layerId].type == 'string' ? 'string' : ''"
[(value)]="match.pattern"
autofocus="true"
id="regexp-{{c}}-{{layerId}}-{{m}}"
Expand All @@ -97,17 +123,26 @@
i18n-placeholder placeholder="Regular expression (A=a)"
i18n-title title="Regular expression (case sensitive)"
type="text"
[className]="schema.layers[layerId].type == 'string' ? 'string' : ''"
[(value)]="match.pattern"
autofocus="true"
id="regexp-{{c}}-{{layerId}}-{{m}}"
(keydown.enter)="startSearch($event)"></lib-input-regexp>
</span>
<span class="help">
<span *ngIf="schema.layers[layerId].type == 'ipa' || hasValidLabels(schema.layers[layerId])"
class="help">
<lib-button
*ngIf="schema.layers[layerId].type == 'ipa'"
i18n-title title="Phoneme symbol selector"
class="small"
icon="«" [img]="helperMatch == match?'collapse-down.svg':'expand-down.svg'"
(press)="helperMatch = (helperMatch == match?null:match); $event.stopPropagation();"></lib-button>
<lib-button
i18n-title title="Symbol selector"
*ngIf="schema.layers[layerId].type == 'string'"
class="small"
icon="«" [img]="helperMatch == match?'collapse-down.svg':'expand-down.svg'"
(press)="helperMatch = (helperMatch == match?null:match); $event.stopPropagation();"></lib-button>
<lib-disc-helper
*ngIf="!hasValidLabels(schema.layers[layerId]) && helperMatch == match"
(symbolSelected)="appendToPattern(match, $event, 'regexp-'+c+'-'+layerId+'-'+m)"></lib-disc-helper>
Expand All @@ -117,68 +152,23 @@
[layer]="schema.layers[layerId]"
(symbolSelected)="appendToPattern(match, $event, 'regexp-'+c+'-'+layerId+'-'+m)"></lib-valid-label-helper>
</span>
</span>

<span *ngSwitchDefault class="regexp">
<span class="not">
<select class="not"
i18n-title title="match or not"
[value]="match.not" (change)="match.not = $event.target.value == 'true'">
<option value="false" i18n>matches</option>
<option value="true" i18n>doesn't match</option>
</select>
</span>
<span class="match">
<lib-input-regexp
*ngIf="isCaseSensitive(match)"
i18n-placeholder placeholder="Regular expression (A≠a)"
i18n-title title="Regular expression (case sensitive)"
type="text" className="string"
[(value)]="match.pattern"
autofocus="true"
id="regexp-{{c}}-{{layerId}}-{{m}}"
(keydown.enter)="startSearch($event)"></lib-input-regexp>
<lib-input-regexp
*ngIf="!isCaseSensitive(match)"
i18n-placeholder placeholder="Regular expression (A=a)"
i18n-title title="Regular expression (case insensitive)"
type="text" className="string"
[(value)]="match.pattern"
autofocus="true"
id="regexp-{{c}}-{{layerId}}-{{m}}"
(keydown.enter)="startSearch($event)"></lib-input-regexp>
</span>
<span class="help" *ngIf="hasValidLabels(schema.layers[layerId])">
<div class="add-match"
*ngIf="m+1 == column.layers[layerId].length && (layerId == 'segment' || schema.layers[layerId].parentId == 'segment')">
<lib-button
i18n-title title="Symbol selector"
i18n-title title="Add word-internal segment pattern"
class="small"
icon="«" [img]="helperMatch == match?'collapse-down.svg':'expand-down.svg'"
(press)="helperMatch = (helperMatch == match?null:match); $event.stopPropagation();"></lib-button>
<lib-valid-label-helper
*ngIf="helperMatch == match"
regularExpression="{{true}}"
[layer]="schema.layers[layerId]"
(symbolSelected)="appendToPattern(match, $event, 'regexp-'+c+'-'+layerId+'-'+m)"></lib-valid-label-helper>
</span>
icon="➕" img="add.svg"
(press)="addMatch(column, layerId)"></lib-button>
<lib-button
*ngIf="column.layers[layerId].length > 1"
class="small"
icon="➖" img="remove.svg"
i18n-title title="Remove word-internal segment pattern"
(press)="removeMatch(column, layerId)"></lib-button>
</div>
</span>

</ng-container> <!-- switch on layer.type -->
</ng-container>
</div> <!-- match -->

<div class="add-match"
*ngIf="layerId == 'segment' || schema.layers[layerId].parentId == 'segment'">
<lib-button
i18n-title title="Add word-internal segment pattern"
class="small"
icon="➕" img="add.svg"
(press)="addMatch(column, layerId)"></lib-button>
<lib-button
*ngIf="column.layers[layerId].length > 1"
class="small"
icon="➖" img="remove.svg"
i18n-title title="Remove word-internal segment pattern"
(press)="removeMatch(column, layerId)"></lib-button>
</div>
<span *ngIf=isAnchorableLayer(schema.layers[layerId])
i18n-title title="Anchor to end of {{schema.wordLayerId}}"
class="anchor-end"> <!-- last match in column -->
Expand Down