Browse Source

Add tooltip to maximize button and remove grey background

pull/3348/head
kimsible Rigel Kent <par@rigelk.eu> 6 days ago
parent
commit
01d0147ef5
3 changed files with 20 additions and 5 deletions
  1. +2
    -2
      client/src/app/shared/shared-forms/markdown-textarea.component.html
  2. +15
    -3
      client/src/app/shared/shared-forms/markdown-textarea.component.scss
  3. +3
    -0
      client/src/app/shared/shared-forms/markdown-textarea.component.ts

+ 2
- 2
client/src/app/shared/shared-forms/markdown-textarea.component.html View File

@@ -24,11 +24,11 @@
</ng-container>

<my-button
*ngIf="!isMaximized" icon="fullscreen" (click)="onMaximizeClick()"
*ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()"
></my-button>

<my-button
*ngIf="isMaximized" icon="exit-fullscreen" (click)="onMaximizeClick()"
*ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()"
></my-button>
</div>



+ 15
- 3
client/src/app/shared/shared-forms/markdown-textarea.component.scss View File

@@ -42,8 +42,20 @@ $input-border-radius: 3px;
display: none !important;
}

.grey-button {
padding: 0 7px 0 12px;
.maximize-button {
padding: 0 7px;
cursor: pointer;

svg {
stroke: var(--mainForegroundColor);
opacity: 0.6;
}

&:hover, &:active {
svg {
opacity: 1;
}
}
}
}
}
@@ -77,7 +89,7 @@ $input-border-radius: 3px;
opacity: .7;
}

.grey-button {
.maximize-button {
margin-left: 5px;
}
}


+ 3
- 0
client/src/app/shared/shared-forms/markdown-textarea.component.ts View File

@@ -35,6 +35,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
previewHTML = ''
isMaximized = false

maximizeInText = $localize`Maximize editor`
maximizeOutText = $localize`Exit maximized editor`

private contentChanged = new Subject<string>()
private scrollPosition: [number, number]



Loading…
Cancel
Save