Skip to content
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

Change#270/criar componente padrão para formulário #283

Merged
merged 21 commits into from
Dec 6, 2023
Merged

Change#270/criar componente padrão para formulário #283

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
77b0ddb
Formulario básico
710lucas Nov 18, 2023
887d4b8
adição de imagem, aftersave e boolean
710lucas Nov 18, 2023
4d1388f
Merge pull request #276 from universi-me/main
710lucas Nov 20, 2023
d8bfa37
Adicionando select
710lucas Nov 20, 2023
0d325e5
aplicando estrategias de validação
710lucas Nov 21, 2023
dcc10c3
removendo console.log
710lucas Nov 21, 2023
3258e12
Ajustando componente para edição de materiais
710lucas Nov 21, 2023
61d3137
ajustando carregamento de parametros predefinidos
710lucas Nov 21, 2023
92440ce
implementando formulário em conteúdos
710lucas Nov 21, 2023
cb30ae8
Finalizando e implementando em tela de grupo
710lucas Nov 22, 2023
f8d87a3
removendo console.log
710lucas Nov 22, 2023
74a8306
finalizando ✔
710lucas Nov 23, 2023
6de06d3
Corrigindo erro de build
710lucas Nov 23, 2023
1b27027
Corrigindo erros do CreatableSelect
710lucas Nov 24, 2023
44764e2
Refatorando código de UniversiForm
710lucas Nov 29, 2023
6a61cdb
resolvendo bugs
710lucas Nov 30, 2023
a01e917
Corrigindo bugs finais
710lucas Dec 5, 2023
7ddf446
Merge pull request #298 from universi-me/main
710lucas Dec 6, 2023
d4525bb
change: remove unused imports
NiiMiyo Dec 6, 2023
5131f25
change: remove unused context
NiiMiyo Dec 6, 2023
6943226
Merge pull request #301 from universi-me/main
710lucas Dec 6, 2023
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
269 changes: 269 additions & 0 deletions src/components/UniversiForm/UniversiForm.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
@import url(/src/layouts/colors.less);
@import url(/src/layouts/fonts.less);
@import url(/src/layouts/border-radius.less);
.image-wrapper {
display: flex;
flex-direction: row;
align-items: center;

.image-preview {
height: 5rem;
aspect-ratio: 1;

border-radius: 1rem;
border: 1px solid var(--secondary-color);
object-fit: cover;

&.default-image {
padding: .5rem;
}
}

fieldset {
margin-top: 0;
}
.image-button{
background-color: var(--primary-color);
color: white;
text-align: center;
padding: 0.5rem 0.5rem ;
border-radius: 0.675rem;
cursor: pointer;
}

}
.checkbox-input{
.checkbox{
width: 1rem !important;
}
legend{
display: contents !important;
}
fieldset{
display: flex;
justify-content: space-between;
}
}
#universi-form-container {
@left-padding: 2.1rem;

display: flex;
flex-direction: column;

background-color: white;
border-radius: var(--border-radius);

width: 45rem;
overflow: hidden;

box-sizing: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);

@header-padding: 1rem;
@header-image-size: 3rem;

.header {
display: flex;
flex-direction: row;
align-items: center;

padding: @header-padding @left-padding;

background-color: @primary-color;
border-bottom: 5px solid @secondary-color;

color: white;

gap: 1rem;

img {
width: @header-image-size;
height: @header-image-size;
}

.title {
color: @font-color-v1;
}
}

.universi-form-container.fields {
max-height: calc(90vh - (@header-padding * 2) - @header-image-size);
overflow: auto;

.url-wrapper {
display: flex;
flex-direction: row;
align-items: start;

.type-fieldset {
padding-right: calc(@left-padding / 2);

.material-type-trigger {
height: 3rem;
padding: .5rem;
aspect-ratio: 1;

background-color: @card-background-color;

cursor: pointer;
}

.type-dropdown-menu {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

background-color: @card-background-color;
border-radius: @border-radius;

border: 1px solid @primary-color;

.type-dropdown-arrow {
fill: @card-background-color
}

.type-dropdown-option {
outline: none;

.material-type-icon {
height: calc(4rem - 10px);
cursor: pointer;
padding: 5px;
margin: 5px;

border-radius: 10px;

&:hover {
outline: 2px solid @primary-color;
}
}
}

}
}


.url-fieldset {
width: 100%;
padding-left: 0;
}
}

fieldset {
border: none;
padding: 0 @left-padding;
margin-top: 1rem;

&:not(:last-child) {
margin-bottom: 1rem;
}

.field-input {
width: 100%;
background-color: @card-background-color;
}

input {
font-size: 1rem;
padding: 1rem .5rem;
}


textarea {
min-height: 2em;
max-height: 8rem;
padding: .5rem;

resize: vertical;
}

input, textarea, .material-type-trigger {
border: none;
border-radius: .625rem;

&:focus {
outline: solid 2px @primary-color;
}
}

> legend {
display: flex;
flex-direction: row;
align-items: end;
justify-content: space-between;

width: 100%;

font-size: 1.25rem;
padding-bottom: 0.75rem;

.char-counter {
display: inline;
margin-right: .25em;

font-size: .75em;
}
}
}

.operation-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin: 2.1rem;
gap: 1rem;

> button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

border: none;
width: 7.5em;
max-height: 2rem;
padding: .75em 0;
border-radius: .625rem;

gap: .5rem;

color: @font-color-v1;
font-size: .9rem;
font-weight: @font-weight-bold;

cursor: pointer;
will-change: background-color;

&.cancel-button {
background-color: @secondary-color;
}

&.submit-button {
&:not(:disabled) {
background-color: @primary-color;
&:hover {
background-color: @secondary-color;
}
}

&:disabled {
background-color: @font-color-v3;
}
}

.bi {
width: 1rem;
font-size: 1.2rem;
margin: 0;
}
}
}
}
}
input:required:valid, textarea:required:valid{
border: 2px solid var(--success-color) !important;
}
input:required:invalid, textarea:required:invalid{
border: 2px solid var(--wrong-invalid-color) !important;
}
Loading
Loading