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

Merge Portlet UI Cleanup Meeds-io/MIPs#81 #707

Merged
merged 4 commits into from
Nov 14, 2023
Merged

Merge Portlet UI Cleanup Meeds-io/MIPs#81 #707

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c75bc4b
feat: Apply Generic UI to existing portlet - MEED-2573 - Meeds-io/MIP…
SaraBoutej Oct 23, 2023
47ddefb
feat: Apply default radius to rounded button -MEED-2798 - Meeds-io/MI…
SaraBoutej Oct 27, 2023
ee3dc77
feat: update the default radius : MEED-2758 - Meeds-io/MIPs#81 (#701)
SaraBoutej Oct 27, 2023
e36ec5e
Use baseBorderRadius instead of borderRadius
SaraBoutej Nov 14, 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
8 changes: 8 additions & 0 deletions platform-ui-skin/src/main/webapp/skin/less/core/helpers.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@
.text-font-size {
font-size: @fontSizeLarge !important;
}
.widget-text-header{
font-size: @textHeaderFontSize !important;
color: @greyColorLighten1 !important;
font-weight: normal !important;
}
.text-sub-title {
color: @greyColorLighten1 !important;
}
Expand Down Expand Up @@ -181,6 +186,9 @@
.border-radius {
border-radius: @inputBorderRadius !important;
}
.card-border-radius {
border-radius: @borderRadius !important;
}
.no-border-radius {
border-radius: 0 !important;
}
Expand Down
4 changes: 3 additions & 1 deletion platform-ui-skin/src/main/webapp/skin/less/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@

@baseFontSize: 14px;
@inputFontSize: 15px;
@textHeaderFontSize: 18px;
@baseFontFamily: @fontFamily;
@baseLineHeight: 20px;

Expand All @@ -266,9 +267,10 @@
@fontSizeXlarge: var(--allPagesFontSizeXlarge, 16px);
@fontsizeXlarge: @fontSizeXlarge;

@baseBorderRadius: 5px;
@baseBorderRadius: 4px;
@borderRadiusLarge: 5px;
@borderRadiusSmall: 3px;
@borderRadius: var(--allPagesBorderRadius, @baseBorderRadius);


// COMPONENT VARIABLES
Expand Down
1 change: 1 addition & 0 deletions platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ Modifications applied on imported libraries:
- .v-tabs--centered > .v-tabs-bar .v-tabs-slider-wrapper (centered tabs) doesn't use centered tabs because of bad usage of CSS priorities, thus !important is added to effectively center tabs
- delete '!important' from .v-card-flat:@box-shadow (line 22363) to avoid force disabling box-shadow on cards when using flat attribute on v-card
- Add fix on v-alert.prominent.dense icon size introduced in 2.4
- Add @borderRadius with 5px instead of using 4px for defaut border radius
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Add @borderRadius with 5px instead of using 4px for defaut border radius
- Add @borderRadius with 4px instead of using 5px for defaut border radius

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Add @borderRadius with 5px instead of using 4px for defaut border radius
- Add @baseBorderRadius variable to use centralized border radius for Vuetify components

@SaraBoutej we may need to delete the usage of @borderRadius here. In fact, the brandable @borderRadius should be used for applications parent DOM element only.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

72 changes: 36 additions & 36 deletions platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6507,7 +6507,7 @@ html.overflow-y-hidden {
}

.v-application .rounded {
border-radius: 4px !important;
border-radius: @baseBorderRadius !important;
}

.v-application .rounded-lg {
Expand Down Expand Up @@ -18075,7 +18075,7 @@ html.overflow-y-hidden {

.v-btn {
align-items: center;
border-radius: 4px;
border-radius: @baseBorderRadius;
display: inline-flex;
flex: 0 0 auto;
font-weight: 500;
Expand Down Expand Up @@ -18518,7 +18518,7 @@ html.overflow-y-hidden {
}

.v-sheet.v-alert {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-sheet.v-alert:not(.v-sheet--outlined) {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
Expand All @@ -18536,7 +18536,7 @@ html.overflow-y-hidden {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.v-alert:not(.v-sheet--tile) {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-application--is-ltr .v-alert > .v-icon,
.v-application--is-ltr .v-alert > .v-alert__content {
Expand Down Expand Up @@ -19028,7 +19028,7 @@ html.overflow-y-hidden {
min-height: 40px;
}
.v-text-field--outlined {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-text-field--full-width .v-input__prepend-outer,
.v-text-field--full-width .v-input__prepend-inner,
Expand Down Expand Up @@ -19082,7 +19082,7 @@ html.overflow-y-hidden {
top: 11px;
}
.v-text-field--filled {
border-radius: 4px 4px 0 0;
border-radius: @baseBorderRadius @baseBorderRadius 0 0;
}
.v-text-field--filled:not(.v-text-field--single-line) input {
margin-top: 22px;
Expand Down Expand Up @@ -19139,7 +19139,7 @@ html.overflow-y-hidden {
display: none;
}
.v-text-field--outlined, .v-text-field--solo {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-text-field--outlined {
margin-bottom: 16px;
Expand Down Expand Up @@ -19601,7 +19601,7 @@ html.overflow-y-hidden {
}

.v-chip--label {
border-radius: 4px !important;
border-radius: @baseBorderRadius !important;
}

.v-chip.v-chip--outlined {
Expand Down Expand Up @@ -19665,7 +19665,7 @@ html.overflow-y-hidden {
contain: content;
will-change: transform;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-menu__content--active {
pointer-events: none;
Expand Down Expand Up @@ -19872,7 +19872,7 @@ html.overflow-y-hidden {
}
.v-list--nav .v-list-item,
.v-list--nav .v-list-item:before {
border-radius: 4px;
border-radius: @baseBorderRadius;
}

.v-application--is-ltr .v-list.v-sheet--shaped .v-list-item, .v-application--is-ltr .v-list.v-sheet--shaped .v-list-item::before,
Expand Down Expand Up @@ -21438,7 +21438,7 @@ html.overflow-y-hidden {
}
}
.v-dialog {
border-radius: 4px;
border-radius: @baseBorderRadius;
margin: 24px;
overflow-y: auto;
pointer-events: auto;
Expand Down Expand Up @@ -21682,7 +21682,7 @@ html.overflow-y-hidden {
}

.v-btn-toggle {
border-radius: 4px;
border-radius: @baseBorderRadius;
display: inline-flex;
max-width: 100%;
}
Expand Down Expand Up @@ -21789,7 +21789,7 @@ html.overflow-y-hidden {
line-height: 20px;
margin-right: -1px;
z-index: 1;
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-calendar .v-event-more {
overflow: hidden;
Expand Down Expand Up @@ -21817,7 +21817,7 @@ html.overflow-y-hidden {
text-overflow: ellipsis;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
border-radius: @baseBorderRadius;
pointer-events: all;
}
.v-calendar.v-calendar-events .v-calendar-weekly__head-weekday {
Expand Down Expand Up @@ -22243,7 +22243,7 @@ html.overflow-y-hidden {
}

.v-sheet.v-card {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-sheet.v-card:not(.v-sheet--outlined) {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
Expand Down Expand Up @@ -22760,7 +22760,7 @@ html.overflow-y-hidden {

.v-color-picker {
align-self: flex-start;
border-radius: 4px;
border-radius: @baseBorderRadius;
contain: content;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
Expand Down Expand Up @@ -23177,7 +23177,7 @@ html.overflow-y-hidden {
margin-left: 8px;
}
.v-color-picker__input input {
border-radius: 4px;
border-radius: @baseBorderRadius;
margin-bottom: 8px;
min-width: 0;
outline: none;
Expand Down Expand Up @@ -23341,7 +23341,7 @@ html.overflow-y-hidden {
}

.v-data-table {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-data-table tbody tr.v-data-table__expanded {
border-bottom: 0;
Expand Down Expand Up @@ -23899,7 +23899,7 @@ html.overflow-y-hidden {
}

.v-picker {
border-radius: 4px;
border-radius: @baseBorderRadius;
contain: layout style;
display: inline-flex;
flex-direction: column;
Expand Down Expand Up @@ -24066,7 +24066,7 @@ html.overflow-y-hidden {
}

.v-expansion-panels {
border-radius: 4px;
border-radius: @baseBorderRadius;
display: flex;
flex-wrap: wrap;
justify-content: center;
Expand All @@ -24087,15 +24087,15 @@ html.overflow-y-hidden {
border-bottom-right-radius: inherit;
}
.v-expansion-panels:not(.v-expansion-panels--accordion):not(.v-expansion-panels--tile) > .v-expansion-panel--active {
border-radius: 4px;
border-radius: @baseBorderRadius;
}
.v-expansion-panels:not(.v-expansion-panels--accordion):not(.v-expansion-panels--tile) > .v-expansion-panel--active + .v-expansion-panel {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: @baseBorderRadius;
border-top-right-radius: @baseBorderRadius;
}
.v-expansion-panels:not(.v-expansion-panels--accordion):not(.v-expansion-panels--tile) > .v-expansion-panel--next-active {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: @baseBorderRadius;
border-bottom-right-radius: @baseBorderRadius;
}
.v-expansion-panels:not(.v-expansion-panels--accordion):not(.v-expansion-panels--tile) > .v-expansion-panel--next-active .v-expansion-panel-header {
border-bottom-left-radius: inherit;
Expand Down Expand Up @@ -26669,10 +26669,10 @@ html.overflow-y-hidden {
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}
.v-overflow-btn.v-input--is-focused .v-input__slot {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
}
.v-overflow-btn.v-select--is-menu-active .v-input__slot {
border-radius: 4px 4px 0 0;
border-radius: @borderRadius @borderRadius 0 0;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
}
.v-overflow-btn .v-select__selections {
width: 0px;
Expand Down Expand Up @@ -26758,7 +26758,7 @@ html.overflow-y-hidden {
}
.v-pagination__item {
background: transparent;
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
font-size: 1rem;
height: 34px;
margin: 0.3rem;
Expand All @@ -26774,7 +26774,7 @@ html.overflow-y-hidden {
}
.v-pagination__navigation {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 4px;
border-radius: @borderRadius;
SaraBoutej marked this conversation as resolved.
Show resolved Hide resolved
display: inline-flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -26993,7 +26993,7 @@ html.overflow-y-hidden {
}

.v-skeleton-loader {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
position: relative;
vertical-align: top;
}
Expand All @@ -27017,7 +27017,7 @@ html.overflow-y-hidden {
.v-skeleton-loader .v-skeleton-loader__list-item-avatar-two-line,
.v-skeleton-loader .v-skeleton-loader__list-item-three-line,
.v-skeleton-loader .v-skeleton-loader__list-item-avatar-three-line {
border-radius: 4px;
border-radius: @borderRadius;
SaraBoutej marked this conversation as resolved.
Show resolved Hide resolved
}
.v-skeleton-loader .v-skeleton-loader__actions::after,
.v-skeleton-loader .v-skeleton-loader__article::after,
Expand Down Expand Up @@ -27079,7 +27079,7 @@ html.overflow-y-hidden {
width: 48px;
}
.v-skeleton-loader__button {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
height: 36px;
width: 64px;
}
Expand Down Expand Up @@ -27115,7 +27115,7 @@ html.overflow-y-hidden {
margin: 0 auto;
}
.v-skeleton-loader__date-picker-days .v-skeleton-loader__avatar {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
flex: 1 1 auto;
margin: 4px;
height: 40px;
Expand Down Expand Up @@ -27332,7 +27332,7 @@ html.overflow-y-hidden {
}

.v-sheet.v-snack__wrapper {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
}
.v-sheet.v-snack__wrapper:not(.v-sheet--outlined) {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
Expand Down Expand Up @@ -27624,7 +27624,7 @@ html.overflow-y-hidden {
}

.v-stepper {
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
overflow: hidden;
position: relative;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
Expand Down Expand Up @@ -28847,7 +28847,7 @@ html.overflow-y-hidden {
.v-tooltip__content {
background: rgba(97, 97, 97, 0.9);
color: #FFFFFF;
border-radius: 4px;
border-radius: @borderRadius;
boubaker marked this conversation as resolved.
Show resolved Hide resolved
font-size: 14px;
line-height: 22px;
display: inline-block;
Expand Down