Skip to content

Commit

Permalink
refactor: Replace all hardcoded values with the variable
Browse files Browse the repository at this point in the history 
Replace scss variable with css one and remove declaration

Co-authored-by: Marco <marcoambrosini@proton.me>
Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Marco <marcoambrosini@proton.me>
  • Loading branch information
@marcoambrosini @susnux
marcoambrosini and susnux committed Jun 20, 2024
1 parent ad85850 commit 38955b0
Show file tree
Hide file tree
Showing 39 changed files with 135 additions and 145 deletions.
20 changes: 10 additions & 10 deletions src/assets/NcAppNavigationItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
min-height: $clickable-area;
min-height: var(--default-clickable-area);
transition: background-color var(--animation-quick) ease-in-out;
transition: background-color 200ms ease-in-out;
border-radius: var(--border-radius-element, var(--border-radius-pill));
Expand Down Expand Up @@ -86,22 +86,22 @@
overflow: hidden;
flex: 1 1 0;
box-sizing: border-box;
min-height: $clickable-area;
min-height: var(--default-clickable-area);
padding: 0;
white-space: nowrap;
color: var(--color-main-text);
background-repeat: no-repeat;
background-position: $icon-margin center;
background-size: $icon-size $icon-size;
line-height: $clickable-area;
line-height: var(--default-clickable-area);

.app-navigation-entry-icon {
display: flex;
align-items: center;
flex: 0 0 $clickable-area;
flex: 0 0 var(--default-clickable-area);
justify-content: center;
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
background-size: $icon-size $icon-size;
background-repeat: no-repeat;
background-position: $icon-margin center;
Expand All @@ -115,7 +115,7 @@
}

.editingContainer {
width: calc(100% - #{$clickable-area});
width: calc(100% - var(--default-clickable-area));
margin: auto;
}

Expand Down Expand Up @@ -146,21 +146,21 @@
.app-navigation-entry__deleted {
display: inline-flex;
flex: 1 1 0;
padding-left: $clickable-area - $icon-margin !important;
padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
.app-navigation-entry__deleted-description {
position: relative;
overflow: hidden;
flex: 1 1 0;
white-space: nowrap;
text-overflow: ellipsis;
line-height: $clickable-area;
line-height: var(--default-clickable-area);
}
}

/* counter and actions */
.app-navigation-entry__utils {
display: flex;
min-width: $clickable-area;
min-width: var(--default-clickable-area);
align-items: center;
flex: 0 1 auto;
justify-content: flex-end;
Expand Down
15 changes: 7 additions & 8 deletions src/assets/action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,25 +51,25 @@

font-weight: normal;
font-size: var(--default-font-size);
line-height: $clickable-area;
line-height: var(--default-clickable-area);

& > span {
cursor: pointer;
white-space: nowrap;
}

&__icon {
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_full;
background-position: $icon-margin center;
background-size: $icon-size;
background-repeat: no-repeat;
}

&:deep(.material-design-icon) {
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_full;

.material-design-icon__svg {
Expand All @@ -83,8 +83,7 @@
max-width: 220px;
line-height: 1.6em;

// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;

cursor: pointer;
text-align: left;
Expand Down Expand Up @@ -114,7 +113,7 @@
margin-left: auto;
// Align with right end of the button
// This is the padding-right
margin-right: -$icon-margin;
margin-right: calc($icon-margin * -1);
}
}
}
12 changes: 3 additions & 9 deletions src/assets/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,13 @@
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
// recommended is 48px
// 44px is what we choose and have very good visual-to-usability ratio
$clickable-area: 44px;

// background icon size
// also used for the scss icon font
$icon-size: 16px;

// icon padding for a $clickable-area width and a $icon-size icon
// ( 44px - 16px ) / 2
$icon-margin: math.div($clickable-area - $icon-size, 2);
// icon padding for a var(--default-clickable-area) width and a $icon-size icon
// ( 34px - 16px ) / 2
$icon-margin: calc(calc(var(--default-clickable-area) - $icon-size) / 2);

// transparency background for icons
$icon-focus-bg: rgba(127, 127, 127, .25);
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionButton/NcActionButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,6 +548,6 @@ export default {
.action-button__pressed-icon {
margin-left: auto;
margin-right: -$icon-margin;
margin-right: calc($icon-margin * -1);
}
</style>
4 changes: 2 additions & 2 deletions src/components/NcActionCaption/NcActionCaption.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ export default {
<style lang="scss" scoped>
.app-navigation-caption {
color: var(--color-text-maxcontrast);
line-height: $clickable-area;
line-height: var(--default-clickable-area);
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: none !important;
user-select: none;
pointer-events: none;
margin-left: 12px;
padding-right: 14px;
height: $clickable-area;
height: var(--default-clickable-area);
display: flex;
align-items: center;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionCheckbox/NcActionCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export default {
box-shadow: none;
font-weight: normal;
line-height: $clickable-area;
line-height: var(--default-clickable-area);
/* checkbox/radio fixes */
&__checkbox {
Expand Down
10 changes: 5 additions & 5 deletions src/components/NcActionInput/NcActionInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,8 +520,8 @@ $input-margin: 4px;
justify-content: center;
&:deep(.material-design-icon) {
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_full;
.material-design-icon__svg {
Expand All @@ -540,7 +540,7 @@ $input-margin: 4px;
min-height: 0;
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
background-position: #{$icon-margin} center;
background-size: $icon-size;
Expand Down Expand Up @@ -610,12 +610,12 @@ $input-margin: 4px;
// add the same bottomMargin as the right padding
// for visual balance
li:last-child > .action-input {
padding-bottom: $icon-margin - $input-margin;
padding-bottom: calc($icon-margin - $input-margin);
}
// same for first item
li:first-child > .action-input:not(.action-input--visible-label) {
padding-top: $icon-margin - $input-margin;
padding-top: calc($icon-margin - $input-margin);
}
</style>
2 changes: 1 addition & 1 deletion src/components/NcActionRadio/NcActionRadio.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export default {
box-shadow: none;
font-weight: normal;
line-height: $clickable-area;
line-height: var(--default-clickable-area);
/* checkbox/radio fixes */
&__radio {
Expand Down
24 changes: 12 additions & 12 deletions src/components/NcActionTextEditable/NcActionTextEditable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ $input-margin: 4px;
box-shadow: none;
font-weight: normal;
line-height: $clickable-area;
line-height: var(--default-clickable-area);
& > span {
cursor: pointer;
Expand All @@ -215,15 +215,15 @@ $input-margin: 4px;
min-height: 0;
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
background-position: #{$icon-margin} center;
background-size: $icon-size;
}
&:deep(.material-design-icon) {
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_full;
.material-design-icon__svg {
Expand Down Expand Up @@ -258,10 +258,10 @@ $input-margin: 4px;
// bottom-right corner
position: absolute;
right: $icon-margin + 1;
right: calc($icon-margin + 1);
bottom: 1px;
width: #{$clickable-area - $input-margin * 2};
height: #{$clickable-area - $input-margin * 2};
width: calc(var(--default-clickable-area) - $input-margin * 2);
height: calc(var(--default-clickable-area) - $input-margin * 2);
box-sizing: border-box;
margin: 0;
padding: 7px 6px;
Expand All @@ -283,10 +283,10 @@ $input-margin: 4px;
color: inherit;
border-color: var(--color-border-maxcontrast);
min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */
max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */
min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */
max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */
// block width widening
min-width: $clickable-area * 4;
min-width: calc(var(--default-clickable-area) * 4);
width: 100% !important;
margin: 0;
Expand Down Expand Up @@ -329,11 +329,11 @@ $input-margin: 4px;
// add the same bottomMargin as the right padding
// for visual balance
li:last-child > .action-text-editable {
margin-bottom: $icon-margin - $input-margin;
margin-bottom: calc($icon-margin - $input-margin);
}
// same for first item
li:first-child > .action-text-editable {
margin-top: $icon-margin - $input-margin;
margin-top: calc($icon-margin - $input-margin);
}
</style>
2 changes: 1 addition & 1 deletion src/components/NcActions/NcActions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2009,7 +2009,7 @@ export default {
// Spacing between buttons
& > button {
margin-right: math.div($icon-margin, 2);
margin-right: calc($icon-margin / 2);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppContent/NcAppDetailsToggle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ export default {
<style lang="scss" scoped>
.app-details-toggle {
position: sticky;
width: $clickable-area;
height: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
padding: $icon-margin;
cursor: pointer;
opacity: .6;
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export default {
font-weight: bold;
color: var(--color-main-text);
font-size: var(--default-font-size);
line-height: $clickable-area;
line-height: var(--default-clickable-area);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -246,12 +246,12 @@ export default {
}
&__actions {
flex: 0 0 $clickable-area;
flex: 0 0 var(--default-clickable-area);
}
}
// extra top space if it's not the first item on the list
.app-navigation-caption:not(:first-child) {
margin-top: math.div($clickable-area, 2);
margin-top: calc(var(--default-clickable-area) / 2);
}
</style>
2 changes: 1 addition & 1 deletion src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default {
.app-navigation-entry__icon-bullet {
display: block;
// there is 2 margins
padding: $icon-margin + 1px;
padding: calc($icon-margin + 1px);
div {
width: $icon-size - 2px;
height: $icon-size - 2px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export default {
}
.newItemContainer {
width: calc(100% - #{$clickable-area});
width: calc(100% - var(--default-clickable-area));
margin: auto;
}
</style>
10 changes: 5 additions & 5 deletions src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default {
.settings-button {
display: flex;
flex: 1 1 0;
height: $clickable-area;
height: var(--default-clickable-area);
width: 100%;
padding: 0;
margin: 0;
Expand All @@ -98,17 +98,17 @@ export default {
font-size: 100%;
color: var(--color-main-text);
padding-right: 14px;
line-height: $clickable-area;
line-height: var(--default-clickable-area);
&:hover,
&:focus {
background-color: var(--color-background-hover);
}
&__icon {
width: $clickable-area;
height: $clickable-area;
min-width: $clickable-area;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
min-width: var(--default-clickable-area);
}
&__label {
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default {
position: absolute;
top: var(--app-navigation-padding);
right: calc(0px - var(--app-navigation-padding));
margin-right: - $clickable-area;
margin-right: calc(0px - var(--default-clickable-area));
}
button.app-navigation-toggle {
Expand Down
Loading

0 comments on commit 38955b0

Please sign in to comment.