infrastructure/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ settings page

Browse Source
This commit is contained in:
Lucas Colombo
2025-01-22 00:48:56 -03:00
parent 5eb2e10d87
commit 93c89fd96a
28 changed files with 684 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/themes/scss/theme/modules/index.scss
View File

@ -2,4 +2,5 @@
@forward './issues';
@forward './chroma';
@forward './codemirror';
@forward './monaco';
@forward './monaco';
@forward './settings';

86
src/themes/scss/theme/modules/issues/_issue-sidebar.scss
View File

@ -3,6 +3,13 @@
@use '../../components/button' as button;
@mixin sidebar {
--spc: #{var.get('measure/1x')}; // var(--spc) 16px
--spc-7_8: calc(var(--spc) * .875); // 7/8 of the base var(--spc-7_8) 14px
--spc-6_8: calc(var(--spc) * .750); // 6/8 = 3/4 of the base var(--spc-6_8) 12px
--spc-4_8: calc(var(--spc) * .500); // 4/8 = 1/2 of the base var(--spc-4_8) 8px
--spc-3_8: calc(var(--spc) * .375); // 3/8 of the base var(--spc-3_8) 6px
--spc-2_8: calc(var(--spc) * .250); // 2/8 = 1/4 of the base var(--spc-2_8) 4px
display: flex;
flex-direction: column;
border: none !important;
@ -18,7 +25,7 @@
// alignment for main children elements
>.ui, >.text, >.ui {
padding-left: var.get('measure/.5x') !important;
padding-left: var(--spc-4_8) !important;
padding-right: 0 !important;
}
@ -43,16 +50,11 @@
text-decoration: none !important;
}
.ui.label {
height: 20px;
border-radius: 20px;
}
// dividers
>.divider {
width: calc(100% - var.get('measure/.5x')) !important;
width: calc(100% - var(--spc-4_8)) !important;
align-self: flex-end;
margin: var.get('measure/.875x') 0 !important;
margin: var(--spc-7_8) 0 !important;
}
@ -66,7 +68,7 @@
+.divider {
border: none !important;
margin: var.get('measure/.5x') 0 !important;
margin: var(--spc-4_8) 0 !important;
}
.menu {
@ -77,7 +79,7 @@
}
.branch-tag-item {
--border-radius: #{var.get('measure/.5x')};
--border-radius: #{var(--spc-4_8)};
&:hover {
color: currentColor !important;
@ -89,16 +91,16 @@
.issue-sidebar-combo {
display: flex;
flex-direction: column;
gap: var.get('measure/.5x') !important;
gap: var(--spc-4_8) !important;
> * {
padding-left: var.get('measure/.5x') !important;
padding-right: var.get('measure/.5x') !important;
padding-left: var(--spc-4_8) !important;
padding-right: var(--spc-4_8) !important;
}
.ui.dropdown {
padding-top: var.get('measure/.375x') !important;
padding-bottom: var.get('measure/.375x') !important;
padding-top: var(--spc-3_8) !important;
padding-bottom: var(--spc-3_8) !important;
font-size: var.get('font-size/sm');
transition: background-color .1s ease;
border-radius: var(--border-radius) !important;
@ -127,23 +129,21 @@
display: flex !important;
justify-content: space-between;
font-weight: 500 !important;
margin-bottom: var.get('measure/.75x') !important;
margin-bottom: var(--spc-6_8) !important;
strong {
font-weight: 500 !important;
}
}
.watching, .depending {
.watching {
display: flex;
flex-direction: column;
gap: var.get('measure/.75x') !important;
}
gap: var(--spc-6_8) !important;
.watching {
button {
font-weight: 500;
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
padding: var(--spc-4_8) var(--spc-6_8) !important;
border-radius: var(--border-radius) !important;
svg {
@ -153,10 +153,20 @@
}
.depending {
// title
>.text {
display: inline-block;
margin-bottom: var(--spc-6_8) !important;
}
>p {
margin-bottom: var(--spc-4_8) !important;
}
.divided.list {
display: flex;
flex-direction: column;
gap: var.get('measure/1x') !important;
gap: var(--spc) !important;
.dependency {
border: none !important;
@ -188,17 +198,28 @@
}
}
.selection.dropdown {
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
#new-dependency-drop-list {
padding: var(--spc-3_8) var(--spc-6_8) !important;
// make radius to the right be 0 to merge with the add button
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
&.active {
// restore right border to 1px when active
border-top-left-radius: var(--border-radius) !important;
border-bottom-left-radius: var(--border-radius) !important;
border-color: color.get('elevation/5') !important;
outline: 2px solid var(--color-accent);
}
input {
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
padding: var(--spc-3_8) var(--spc-6_8) !important;
line-height: 20px !important;
}
}
button {
padding: var.get('measure/.5x') !important;
padding: var(--spc-4_8) !important;
}
}
@ -209,7 +230,6 @@
display: flex;
color: color.get('subtle') !important;
width: unset !important;
// padding: var.get('measure/.5x') !important;
}
}
@ -221,13 +241,13 @@
// input of type date
input[type="date"] {
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
padding: var(--spc-4_8) var(--spc-6_8) !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
button {
padding: var.get('measure/.5x') !important;
padding: var(--spc-4_8) !important;
border-top-right-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important;
}
@ -237,7 +257,7 @@
>form, .form {
display: flex;
flex-direction: column;
gap: var.get('measure/.5x') !important;
gap: var(--spc-4_8) !important;
}
// buttons at the end of the sidebar
@ -245,10 +265,10 @@
font-size: var.get('font-size/sm') !important;
border: none !important;
background: transparent !important;
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
padding: var(--spc-3_8) var(--spc-4_8) !important;
justify-content: start !important;
gap: var.get('measure/.5x') !important;
margin-bottom: var.get('measure/.25x') !important;
gap: var(--spc-4_8) !important;
margin-bottom: var(--spc-2_8) !important;
border-radius: var(--border-radius) !important;
svg {

21
src/themes/scss/theme/modules/settings/_pages.scss Normal file
View File

@ -0,0 +1,21 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@use './section';
@mixin settings-pages {
.page-content.user.settings, .page-content.admin {
.ui.flex-container {
column-gap: 40px;
.flex-container-nav {
width: 232px;
@include section.nav;
}
.flex-container-main {
@include section.content;
}
}
}
}

5
src/themes/scss/theme/modules/settings/index.scss Normal file
View File

@ -0,0 +1,5 @@
@use './pages';
@mixin settings {
@include pages.settings-pages;
}

80
src/themes/scss/theme/modules/settings/section/_content.scss Normal file
View File

@ -0,0 +1,80 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin content {
.ui.top.attached.header {
background: unset;
border: none;
font-size: var.get('font-size/3xl');
font-weight: 400;
padding: 0 0 var.get('measure/.5x') 0;
border-bottom: 1px solid var(--color-secondary);
margin-bottom: var.get('measure/1x');
// if not the first header, add a margin top
&:not(:first-child) {
margin-top: var.get('measure/2.5x');
}
&.error {
border-color: var(--color-secondary) !important;
background: unset !important;
}
}
.ui.segment {
border-radius: var(--border-radius);
>*:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
.ui.attached.segment {
background: unset;
padding:0;
border: none;
margin: 0;
&.bottom {
margin-top: var.get('measure/2x');
}
a:not(.button) {
color: var(--color-primary);
text-decoration: underline;
display: inline-flex;
align-items: center;
column-gap: var.get('measure/.375x');
svg {
margin-left: var.get('measure/.25x');
}
}
.field {
margin: var.get('measure/1x') 0;
}
.divider {
margin: var.get('measure/1x') 0;
}
.list {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
.item {
margin-left: 0;
margin-right: 0;
&:not(:first-child), &:first-child {
padding: 1rem;
margin: 0rem 0rem 0rem 0rem;
}
}
}
}
}

94
src/themes/scss/theme/modules/settings/section/_nav.scss Normal file
View File

@ -0,0 +1,94 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin nav {
.vertical.menu {
--spacing: #{var.get('measure/.375x')} #{var.get('measure/.75x')};
--min-height: #{var.get('measure/2x')};
background-color: transparent;
border: none;
.header.item {
display: flex;
align-items: center;
padding: var(--spacing);
font-size: var.get('font-size/sm');
font-weight: 600;
color: color.get('subtle');
background-color: transparent;
min-height: var(--min-height);
}
a.item, details.item {
min-height: var(--min-height);
&:before {
content: none;
}
&:not(:last-child) {
margin-bottom: var.get('measure/.25x');
}
&.active {
font-weight: 600;
background-color: var(--color-menu);
position: relative;
&:hover {
background-color: var(--color-hover);
}
&:after {
background: var(--color-primary);
border-radius: .375rem;
content: "";
height: 24px;
width: 4px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(0px - 4px - #{var.get('measure/.375x')});
}
}
}
a.item, details.item summary {
padding: var(--spacing);
border-radius: var(--border-radius);
}
details.item {
--octicon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"></path></svg>');
summary {
&:after {
color: color.get('subtle');
transform: scaleY(1);
transition: transform .12s linear;
mask-image: var(--octicon-chevron-down);
-webkit-mask-image: var(--octicon-chevron-down);
}
}
&[open] summary {
&:after {
transform: scaleY(-1);
}
}
.menu {
.item {
display: flex;
align-items: center;
color: color.get('text') !important;
&:hover {
background-color: var(--color-hover);
}
}
margin: 0 !important;
}
}
}
}

2
src/themes/scss/theme/modules/settings/section/index.scss Normal file
View File

@ -0,0 +1,2 @@
@forward './nav';
@forward './content';