From a5d14c7113d6ed7cbcabe83af124a23ba5945b9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= Date: Tue, 30 Apr 2024 11:41:09 -0300 Subject: [PATCH] =?UTF-8?q?Melhorias=20de=20acessibilidade=20e=20ajustes?= =?UTF-8?q?=20na=20tela=20inicial=20e=20=C3=ADcones?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular.json | 5 ++ package-lock.json | 12 +++ packages/ide/package.json | 2 + packages/ide/src/app/app.component.html | 38 ++++++--- packages/ide/src/app/app.component.scss | 24 +++--- packages/ide/src/app/app.component.ts | 2 +- packages/ide/src/app/app.module.ts | 4 +- .../dialog-open-example.component.html | 28 ++++-- .../dialog-open-example.component.scss | 2 + .../dialog-open-example.component.ts | 2 +- .../app/tab-editor/tab-editor.component.html | 29 +++++-- .../app/tab-editor/tab-editor.component.scss | 3 +- .../app/tab-editor/tab-editor.component.ts | 8 +- .../src/app/tab-help/tab-help.component.html | 25 ++++-- .../src/app/tab-help/tab-help.component.scss | 12 +-- .../src/app/tab-help/tab-help.component.ts | 4 +- .../app/tab-start/tab-start.component.html | 85 ++++++++++++------- .../app/tab-start/tab-start.component.scss | 66 ++++++++++---- .../icon-book-open-page-variant-outline.svg | 1 - packages/ide/src/assets/icon-file-open.svg | 6 -- packages/ide/src/assets/icon-file-save.svg | 6 -- packages/ide/src/assets/icon-file.svg | 5 -- .../src/assets/icon-help-circle-outline.svg | 6 -- packages/ide/src/assets/icon-history.svg | 1 - .../src/assets/icon-lightbulb-on-outline.svg | 1 - packages/ide/src/assets/icon-share.svg | 1 - packages/ide/src/assets/icon-stop.svg | 6 -- packages/ide/src/index.html | 4 - packages/ide/src/styles.scss | 9 +- 29 files changed, 256 insertions(+), 141 deletions(-) delete mode 100644 packages/ide/src/assets/icon-book-open-page-variant-outline.svg delete mode 100644 packages/ide/src/assets/icon-file-open.svg delete mode 100644 packages/ide/src/assets/icon-file-save.svg delete mode 100644 packages/ide/src/assets/icon-file.svg delete mode 100644 packages/ide/src/assets/icon-help-circle-outline.svg delete mode 100644 packages/ide/src/assets/icon-history.svg delete mode 100644 packages/ide/src/assets/icon-lightbulb-on-outline.svg delete mode 100644 packages/ide/src/assets/icon-share.svg delete mode 100644 packages/ide/src/assets/icon-stop.svg diff --git a/angular.json b/angular.json index 68fbd111..7935d2cb 100644 --- a/angular.json +++ b/angular.json @@ -70,6 +70,11 @@ "input": "packages/ide/src/public/", "output": "/" }, + { + "glob": "*.svg", + "input": "./node_modules/@mdi/svg/svg/", + "output": "./assets/mdi/" + }, "packages/ide/src/favicon.ico", "packages/ide/src/assets" ], diff --git a/package-lock.json b/package-lock.json index c02014b0..ca3ef34f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3861,6 +3861,11 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.6.tgz", "integrity": "sha512-EnfRJvrnzkHwN3BPMCayCFT5lCqInzg3RdlRsDjDvB1EJli6Usj26T6lJ67BU2UcYXBS5xcp1Wj4+zRzj2NaZg==" }, + "node_modules/@fontsource/lato": { + "version": "5.0.21", + "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-5.0.21.tgz", + "integrity": "sha512-UubLwvJO2bKuhWv6+ocx2Bou/pPIT6q7VpYaHIW7ZDaLPQY3uYAhveJg6P7Lvz5HYHyLba8JUc3yP7wvcqA8zQ==" + }, "node_modules/@grpc/grpc-js": { "version": "1.9.14", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz", @@ -5331,6 +5336,11 @@ "tslib": "^2.1.0" } }, + "node_modules/@mdi/svg": { + "version": "7.4.47", + "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-7.4.47.tgz", + "integrity": "sha512-WQ2gDll12T9WD34fdRFgQVgO8bag3gavrAgJ0frN4phlwdJARpE6gO1YvLEMJR0KKgoc+/Ea/A0Pp11I00xBvw==" + }, "node_modules/@ngtools/webpack": { "version": "17.3.3", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.3.tgz", @@ -21103,7 +21113,9 @@ "@angular/platform-browser": "^17.3.3", "@angular/platform-browser-dynamic": "^17.3.3", "@angular/router": "^17.3.3", + "@fontsource/lato": "^5.0.21", "@materia-ui/ngx-monaco-editor": "^6.0.0", + "@mdi/svg": "^7.4.47", "@portugol-webstudio/antlr": "*", "@portugol-webstudio/parser": "*", "@portugol-webstudio/resources": "*", diff --git a/packages/ide/package.json b/packages/ide/package.json index c858404a..db85a183 100644 --- a/packages/ide/package.json +++ b/packages/ide/package.json @@ -40,7 +40,9 @@ "@angular/platform-browser": "^17.3.3", "@angular/platform-browser-dynamic": "^17.3.3", "@angular/router": "^17.3.3", + "@fontsource/lato": "^5.0.21", "@materia-ui/ngx-monaco-editor": "^6.0.0", + "@mdi/svg": "^7.4.47", "@portugol-webstudio/antlr": "*", "@portugol-webstudio/parser": "*", "@portugol-webstudio/resources": "*", diff --git a/packages/ide/src/app/app.component.html b/packages/ide/src/app/app.component.html index 1f0e78c6..71dc559b 100644 --- a/packages/ide/src/app/app.component.html +++ b/packages/ide/src/app/app.component.html @@ -14,11 +14,9 @@ - Ícone do Portugol + + Portugol Webstudio @@ -29,25 +27,37 @@ - - + + {{ tab.title }} - @@ -66,8 +76,14 @@ - diff --git a/packages/ide/src/app/app.component.scss b/packages/ide/src/app/app.component.scss index 44406238..41c44bd5 100644 --- a/packages/ide/src/app/app.component.scss +++ b/packages/ide/src/app/app.component.scss @@ -48,6 +48,8 @@ justify-content: flex-start; min-width: 0; font-family: $font; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; .mat-mdc-icon-button .mat-mdc-button-persistent-ripple { @@ -97,7 +99,9 @@ } &.mat-mdc-tab-disabled { - .mdc-tab__content, .mat-mdc-tab-ripple, .mdc-tab__ripple::before { + .mdc-tab__content, + .mat-mdc-tab-ripple, + .mdc-tab__ripple::before { pointer-events: all; } } @@ -111,15 +115,8 @@ $size: 30px; width: $size; height: $size; - line-height: $size; - - .mat-icon { - $isize: $size - 10px; - width: $isize; - height: $isize; - font-size: $isize; - line-height: $isize; - } + line-height: 0; + --mdc-icon-button-icon-size: 20px; } } @@ -148,7 +145,8 @@ justify-content: center; width: 1rem; margin-right: 0.5rem; - fill: $foreground-300; + color: $foreground-300; + fill: currentColor; } .tab-text { @@ -171,3 +169,7 @@ } } } + +.cap-my-height { + height: 1.15rem; +} diff --git a/packages/ide/src/app/app.component.ts b/packages/ide/src/app/app.component.ts index e52586d1..bd49f71e 100644 --- a/packages/ide/src/app/app.component.ts +++ b/packages/ide/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { OnInit, Component } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { Storage, getBlob, ref } from "@angular/fire/storage"; import { FormControl } from "@angular/forms"; import { MatSnackBar } from "@angular/material/snack-bar"; diff --git a/packages/ide/src/app/app.module.ts b/packages/ide/src/app/app.module.ts index 8c0e3108..b1e72667 100644 --- a/packages/ide/src/app/app.module.ts +++ b/packages/ide/src/app/app.module.ts @@ -1,6 +1,6 @@ import { HttpClientModule } from "@angular/common/http"; import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core"; -import { provideFirebaseApp, initializeApp } from "@angular/fire/app"; +import { initializeApp, provideFirebaseApp } from "@angular/fire/app"; import { getStorage, provideStorage } from "@angular/fire/storage"; import { FormsModule } from "@angular/forms"; import { MatButtonModule } from "@angular/material/button"; @@ -21,13 +21,13 @@ import { AngularSvgIconModule } from "angular-svg-icon"; import { KeyboardShortcutsModule } from "ng-keyboard-shortcuts"; import { NgxGoogleAnalyticsModule } from "ngx-google-analytics"; +import { environment } from "../environments/environment"; import { AppComponent } from "./app.component"; import { DialogOpenExampleComponent } from "./dialog-open-example/dialog-open-example.component"; import { MonacoService } from "./monaco.service"; import { TabEditorComponent } from "./tab-editor/tab-editor.component"; import { TabHelpComponent } from "./tab-help/tab-help.component"; import { TabStartComponent } from "./tab-start/tab-start.component"; -import { environment } from "../environments/environment"; @NgModule({ declarations: [AppComponent, TabEditorComponent, TabStartComponent, TabHelpComponent, DialogOpenExampleComponent], diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html index 294b51b9..fdaf474f 100644 --- a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html +++ b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html @@ -1,7 +1,9 @@
Abrir Exemplo… - +
@@ -14,7 +16,7 @@
  • {{ node.name }}
    • @@ -22,10 +24,24 @@
  • - {{ node.name }} diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss index 23ca2143..1846c5c4 100644 --- a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss +++ b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss @@ -36,6 +36,8 @@ ul { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; li { diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts index 54c799b2..44994b7c 100644 --- a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts +++ b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts @@ -1,6 +1,6 @@ import { NestedTreeControl } from "@angular/cdk/tree"; import { HttpClient } from "@angular/common/http"; -import { AfterViewInit, OnDestroy, OnInit, Component, EventEmitter, Output } from "@angular/core"; +import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core"; import { MatTreeNestedDataSource } from "@angular/material/tree"; import { Subscription, retry } from "rxjs"; diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.html b/packages/ide/src/app/tab-editor/tab-editor.component.html index ce79e263..7114acbd 100644 --- a/packages/ide/src/app/tab-editor/tab-editor.component.html +++ b/packages/ide/src/app/tab-editor/tab-editor.component.html @@ -9,7 +9,7 @@ [disabled]="executor.running || transpiling" title="Iniciar execução" > - +
    @@ -42,13 +55,17 @@ (click)="shareFile()" title="Compartilhar código" > - +
    diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.scss b/packages/ide/src/app/tab-editor/tab-editor.component.scss index 752cdbf7..c4f9c955 100644 --- a/packages/ide/src/app/tab-editor/tab-editor.component.scss +++ b/packages/ide/src/app/tab-editor/tab-editor.component.scss @@ -63,7 +63,8 @@ } } -.sidebar-button svg { +.sidebar-button svg, +.sidebar-button svg-icon { width: 1.5rem; height: 1.5rem; fill: currentColor; diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.ts b/packages/ide/src/app/tab-editor/tab-editor.component.ts index 46749628..7841fdf4 100644 --- a/packages/ide/src/app/tab-editor/tab-editor.component.ts +++ b/packages/ide/src/app/tab-editor/tab-editor.component.ts @@ -1,15 +1,15 @@ import { - ElementRef, - OnDestroy, - OnInit, Component, + ElementRef, EventEmitter, Input, + OnDestroy, + OnInit, Output, TemplateRef, ViewChild, } from "@angular/core"; -import { Storage, uploadString, ref } from "@angular/fire/storage"; +import { Storage, ref, uploadString } from "@angular/fire/storage"; import { MatSnackBar } from "@angular/material/snack-bar"; import { PortugolCodeError } from "@portugol-webstudio/antlr"; import { PortugolExecutor, PortugolWebWorkersRunner } from "@portugol-webstudio/runner"; diff --git a/packages/ide/src/app/tab-help/tab-help.component.html b/packages/ide/src/app/tab-help/tab-help.component.html index c7cd217e..ab495c62 100644 --- a/packages/ide/src/app/tab-help/tab-help.component.html +++ b/packages/ide/src/app/tab-help/tab-help.component.html @@ -1,7 +1,7 @@
    - + Ajuda
    @@ -10,7 +10,7 @@
  • {{ node.text }}
    • @@ -18,10 +18,23 @@
  • - {{ node.text }} diff --git a/packages/ide/src/app/tab-help/tab-help.component.scss b/packages/ide/src/app/tab-help/tab-help.component.scss index 7f3be40d..c9f59b24 100644 --- a/packages/ide/src/app/tab-help/tab-help.component.scss +++ b/packages/ide/src/app/tab-help/tab-help.component.scss @@ -1,17 +1,17 @@ @import "variables"; header { - display: block; + display: flex; + align-items: center; background-color: #121e24; margin: 7.5px; padding: 12.5px 15px; - font-size: 14px; + font-size: 1rem; + gap: 0.5rem; - svg { + svg-icon { width: 1.3rem; height: 1.3rem; - vertical-align: -0.3125em; - margin-right: 0.4rem; } } @@ -31,6 +31,8 @@ ul { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; background-color: $background-200; diff --git a/packages/ide/src/app/tab-help/tab-help.component.ts b/packages/ide/src/app/tab-help/tab-help.component.ts index bdd79221..34bd587d 100644 --- a/packages/ide/src/app/tab-help/tab-help.component.ts +++ b/packages/ide/src/app/tab-help/tab-help.component.ts @@ -1,8 +1,8 @@ import { NestedTreeControl } from "@angular/cdk/tree"; import { HttpClient } from "@angular/common/http"; -import { AfterViewInit, OnDestroy, OnInit, Component, EventEmitter, NgZone, Output } from "@angular/core"; +import { AfterViewInit, Component, EventEmitter, NgZone, OnDestroy, OnInit, Output } from "@angular/core"; import { MatTreeNestedDataSource } from "@angular/material/tree"; -import { SafeResourceUrl, DomSanitizer } from "@angular/platform-browser"; +import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser"; import { GoogleAnalyticsService } from "ngx-google-analytics"; import { Subscription } from "rxjs"; diff --git a/packages/ide/src/app/tab-start/tab-start.component.html b/packages/ide/src/app/tab-start/tab-start.component.html index b55e7f47..5f7415b0 100644 --- a/packages/ide/src/app/tab-start/tab-start.component.html +++ b/packages/ide/src/app/tab-start/tab-start.component.html @@ -2,36 +2,33 @@
    -

    - Nova versão: Podem existir problemas, caso encontre algum ou tenha sugestões/comentários, - - nos envie por aqui, estamos sempre acompanhando. -

    - -
    - -

    📰  Novidades

    +

    Novidades

    +

    30/04/2024: Melhorias de acessibilidade e ajustes na tela inicial e ícones

    10/03/2024: Otimização de desempenho na análise semântica

    09/03/2024: Novo domínio: portugol.dev e experimento com propagandas

    -

    08/03/2024: Melhorias de performance na interface da plataforma

    svg-icon, > img { margin-bottom: 1rem; - max-width: 2rem; + width: 2.5rem; + height: 2.5rem; } } } section { max-width: 600px; - margin: 20px; + margin: 2rem; letter-spacing: 0.25px; - padding: 0 15px; + padding: 0.25rem 1rem; font-family: "Lato", sans-serif; + font-size: 0.95rem; color: #fff; border: 1px solid rgba(30, 30, 30, 0.1); - border-radius: 15px; - box-shadow: 0.3px 0.5px 0.7px hsl(200deg 54% 2% / 0.36), 0.8px 1.6px 2px -0.8px hsl(200deg 54% 2% / 0.36), - 2.1px 4.1px 5.2px -1.7px hsl(200deg 54% 2% / 0.36), 5px 10px 12.6px -2.5px hsl(200deg 54% 2% / 0.36); + border-radius: 0.75rem; + box-shadow: + 0.3px 0.5px 0.7px hsl(200deg 54% 2% / 0.36), + 0.8px 1.6px 2px -0.8px hsl(200deg 54% 2% / 0.36), + 2.1px 4.1px 5.2px -1.7px hsl(200deg 54% 2% / 0.36), + 5px 10px 12.6px -2.5px hsl(200deg 54% 2% / 0.36); h3, h4, @@ -78,6 +100,23 @@ section { margin: 0.5rem 0; line-height: 1.5; list-style-type: square; + + svg-icon, + svg { + width: 1.25rem; + height: 1.25rem; + } + + svg { + vertical-align: top; + } + } + + h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1rem; } ul { @@ -85,11 +124,6 @@ section { padding-left: 1.25rem; } - mat-icon { - vertical-align: -5px; - margin-right: 7.5px; - } - a { text-decoration: underline; color: #fafafa; @@ -114,6 +148,8 @@ footer { position: absolute; bottom: 10px; left: 10px; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; summary { diff --git a/packages/ide/src/assets/icon-book-open-page-variant-outline.svg b/packages/ide/src/assets/icon-book-open-page-variant-outline.svg deleted file mode 100644 index 0f32ba90..00000000 --- a/packages/ide/src/assets/icon-book-open-page-variant-outline.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ide/src/assets/icon-file-open.svg b/packages/ide/src/assets/icon-file-open.svg deleted file mode 100644 index b99c8ad0..00000000 --- a/packages/ide/src/assets/icon-file-open.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/packages/ide/src/assets/icon-file-save.svg b/packages/ide/src/assets/icon-file-save.svg deleted file mode 100644 index 228a33a1..00000000 --- a/packages/ide/src/assets/icon-file-save.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/packages/ide/src/assets/icon-file.svg b/packages/ide/src/assets/icon-file.svg deleted file mode 100644 index 6c6c7454..00000000 --- a/packages/ide/src/assets/icon-file.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/ide/src/assets/icon-help-circle-outline.svg b/packages/ide/src/assets/icon-help-circle-outline.svg deleted file mode 100644 index 2329c774..00000000 --- a/packages/ide/src/assets/icon-help-circle-outline.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/packages/ide/src/assets/icon-history.svg b/packages/ide/src/assets/icon-history.svg deleted file mode 100644 index 330717c1..00000000 --- a/packages/ide/src/assets/icon-history.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ide/src/assets/icon-lightbulb-on-outline.svg b/packages/ide/src/assets/icon-lightbulb-on-outline.svg deleted file mode 100644 index 88ad4fb1..00000000 --- a/packages/ide/src/assets/icon-lightbulb-on-outline.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ide/src/assets/icon-share.svg b/packages/ide/src/assets/icon-share.svg deleted file mode 100644 index 7192090e..00000000 --- a/packages/ide/src/assets/icon-share.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ide/src/assets/icon-stop.svg b/packages/ide/src/assets/icon-stop.svg deleted file mode 100644 index a5e46d5f..00000000 --- a/packages/ide/src/assets/icon-stop.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/packages/ide/src/index.html b/packages/ide/src/index.html index 24e083f0..98899bcc 100644 --- a/packages/ide/src/index.html +++ b/packages/ide/src/index.html @@ -12,10 +12,6 @@ - - - - diff --git a/packages/ide/src/styles.scss b/packages/ide/src/styles.scss index 1bc47786..cf707741 100644 --- a/packages/ide/src/styles.scss +++ b/packages/ide/src/styles.scss @@ -67,8 +67,11 @@ $PortugolWebstudio-theme: mat.define-dark-theme( // that you are using. @include mat.all-component-themes($PortugolWebstudio-theme); @import "variables"; +@import "@fontsource/lato/400.css"; +@import "@fontsource/lato/700.css"; -.mat-mdc-tooltip, .mdc-tooltip__surface { +.mat-mdc-tooltip, +.mdc-tooltip__surface { --mdc-plain-tooltip-supporting-text-line-height: normal; --mdc-plain-tooltip-supporting-text-size: 0.75rem; --mdc-plain-tooltip-supporting-text-weight: 400; @@ -128,3 +131,7 @@ s { .d-flex { display: flex; } + +svg-icon > svg { + fill: currentColor; +}