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

feat: ✨ monaco editor and other improvements

Browse Source
This commit is contained in:
Lucas Colombo 2024-03-13 14:49:47 -03:00
parent 4bee2a7f60
commit 67b639832e
13 changed files with 394 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
dist/public/assets/css/theme-dark.css vendored
View File

@ -2189,9 +2189,9 @@
--color-menu: var(--c-elevation_3);
--color-card: var(--c-elevation_3);
--color-markup-table-row: rgba(var(--c-text-rgb), 0.02);
--color-markup-code-block: rgba(var(--c-text-rgb), 0.05);
--color-markup-code-block: var(--c-elevation_2);
--color-button: var(--c-elevation_4);
--color-code-bg: var(--c-elevation_2);
--color-code-bg: $lvl1;
--color-code-sidebar-bg: var(--c-elevation_4);
--color-shadow: rgba(var(--c-elevation_3-rgb), 0.1);
--color-secondary-bg: var(--c-elevation_4);
@ -2206,7 +2206,7 @@
--color-nav-bg: var(--c-elevation_2);
--color-nav-hover-bg: var(--c-elevation_6);
--color-label-active-bg: var(--c-elevation_6);
--color-label-text: var(--c-text);
--color-label-text: var(--c-primary_base-c);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: var(--c-elevation_5);
@ -2784,6 +2784,99 @@ footer .ui.dropdown .menu {
color: var(--c-theme_red_base);
}
.monaco-editor {
--vscode-editor-background: var(--c-elevation_0) !important;
--vscode-editorGutter-background: var(--c-elevation_0) !important;
}
.monaco-editor .selected-text {
background-color: var(--c-elevation_4) !important;
}
.monaco-editor .margin-view-overlays .line-numbers {
color: var(--c-elevation_10) !important;
}
.monaco-editor .line-numbers.active-line-number {
color: var(--c-primary_base) !important;
}
.monaco-editor .view-overlays .current-line,
.monaco-editor .margin-view-overlays .current-line-margin {
background-color: var(--c-elevation_2) !important;
}
.monaco-editor .mtk1 {
color: var(--c-text) !important;
}
.monaco-editor .mtk2 {
color: #ff69b4 !important;
}
.monaco-editor .mtk3 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk4 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk5 {
color: var(--c-text) !important;
}
.monaco-editor .mtk6 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk7 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk8 {
color: var(--c-elevation_9) !important;
}
.monaco-editor .mtk9 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk10 {
color: var(--c-elevation_10) !important;
}
.monaco-editor .mtk11 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk12 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk13 {
color: #ff69b4 !important;
}
.monaco-editor .mtk14 {
color: #ff69b4 !important;
}
.monaco-editor .mtk15 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk16 {
color: var(--c-elevation_9) !important;
}
.monaco-editor .mtk17 {
color: #ff69b4 !important;
}
.monaco-editor .mtk18 {
color: #ff69b4 !important;
}
.monaco-editor .mtk19 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk20 {
color: #ff69b4 !important;
}
.monaco-editor .mtk21 {
color: var(--c-theme_green_base) !important;
}
.monaco-editor .mtk22 {
color: #ff69b4 !important;
}
.monaco-editor .mtk23 {
color: var(--c-theme_blue_base) !important;
}
.monaco-editor .mtk24 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk25 {
color: var(--c-theme_pink_base) !important;
}
.header-wrapper {
display: flex;
flex-direction: column;
@ -2893,7 +2986,7 @@ footer .ui.dropdown .menu {
display: none;
}
}
@media (max-width: 768px) {
@media (max-width: 1200px) {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view {
flex-direction: column;
column-gap: 0;
@ -3001,4 +3094,8 @@ footer .ui.dropdown .menu {
justify-content: center;
line-height: 16px;
padding: 0 var(--v-measure_\.25x) !important;
}
.markup table {
width: fit-content;
}

105
dist/public/assets/css/theme-light.css vendored
View File

@ -2189,9 +2189,9 @@
--color-menu: var(--c-elevation_3);
--color-card: var(--c-elevation_3);
--color-markup-table-row: rgba(var(--c-text-rgb), 0.02);
--color-markup-code-block: rgba(var(--c-text-rgb), 0.05);
--color-markup-code-block: var(--c-elevation_2);
--color-button: var(--c-elevation_4);
--color-code-bg: var(--c-elevation_2);
--color-code-bg: $lvl1;
--color-code-sidebar-bg: var(--c-elevation_4);
--color-shadow: rgba(var(--c-elevation_3-rgb), 0.1);
--color-secondary-bg: var(--c-elevation_4);
@ -2206,7 +2206,7 @@
--color-nav-bg: var(--c-elevation_2);
--color-nav-hover-bg: var(--c-elevation_6);
--color-label-active-bg: var(--c-elevation_6);
--color-label-text: var(--c-text);
--color-label-text: var(--c-primary_base-c);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: var(--c-elevation_5);
@ -2784,6 +2784,99 @@ footer .ui.dropdown .menu {
color: var(--c-theme_red_base);
}
.monaco-editor {
--vscode-editor-background: var(--c-elevation_0) !important;
--vscode-editorGutter-background: var(--c-elevation_0) !important;
}
.monaco-editor .selected-text {
background-color: var(--c-elevation_4) !important;
}
.monaco-editor .margin-view-overlays .line-numbers {
color: var(--c-elevation_10) !important;
}
.monaco-editor .line-numbers.active-line-number {
color: var(--c-primary_base) !important;
}
.monaco-editor .view-overlays .current-line,
.monaco-editor .margin-view-overlays .current-line-margin {
background-color: var(--c-elevation_2) !important;
}
.monaco-editor .mtk1 {
color: var(--c-text) !important;
}
.monaco-editor .mtk2 {
color: #ff69b4 !important;
}
.monaco-editor .mtk3 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk4 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk5 {
color: var(--c-text) !important;
}
.monaco-editor .mtk6 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk7 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk8 {
color: var(--c-elevation_9) !important;
}
.monaco-editor .mtk9 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk10 {
color: var(--c-elevation_10) !important;
}
.monaco-editor .mtk11 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk12 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk13 {
color: #ff69b4 !important;
}
.monaco-editor .mtk14 {
color: #ff69b4 !important;
}
.monaco-editor .mtk15 {
color: var(--c-theme_sapphire_base) !important;
}
.monaco-editor .mtk16 {
color: var(--c-elevation_9) !important;
}
.monaco-editor .mtk17 {
color: #ff69b4 !important;
}
.monaco-editor .mtk18 {
color: #ff69b4 !important;
}
.monaco-editor .mtk19 {
color: var(--c-theme_teal_base) !important;
}
.monaco-editor .mtk20 {
color: #ff69b4 !important;
}
.monaco-editor .mtk21 {
color: var(--c-theme_green_base) !important;
}
.monaco-editor .mtk22 {
color: #ff69b4 !important;
}
.monaco-editor .mtk23 {
color: var(--c-theme_blue_base) !important;
}
.monaco-editor .mtk24 {
color: var(--c-theme_peach_base) !important;
}
.monaco-editor .mtk25 {
color: var(--c-theme_pink_base) !important;
}
.header-wrapper {
display: flex;
flex-direction: column;
@ -2893,7 +2986,7 @@ footer .ui.dropdown .menu {
display: none;
}
}
@media (max-width: 768px) {
@media (max-width: 1200px) {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view {
flex-direction: column;
column-gap: 0;
@ -3001,4 +3094,8 @@ footer .ui.dropdown .menu {
justify-content: center;
line-height: 16px;
padding: 0 var(--v-measure_\.25x) !important;
}
.markup table {
width: fit-content;
}

2
dist/templates/home.tmpl vendored
View File

@ -2,7 +2,7 @@
<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
<div class="gt-mb-5 gt-px-5">
<div class="center">
<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
</div>
</div>
</div>

2
dist/templates/repo/home.tmpl vendored
View File

@ -1,7 +1,7 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}}
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="lugit-repo-header-data">
{{template "base/alert" .}}
{{template "repo/code/recently_pushed_new_branches" .}}

2
src/templates/home.tmpl
View File

@ -2,7 +2,7 @@
<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
<div class="gt-mb-5 gt-px-5">
<div class="center">
<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
</div>
</div>
</div>

2
src/templates/repo/home.tmpl
View File

@ -1,7 +1,7 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}}
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="lugit-repo-header-data">
{{template "base/alert" .}}
{{template "repo/code/recently_pushed_new_branches" .}}

8
src/themes/scss/theme/index.scss
View File

@ -1,5 +1,6 @@
@use '@lucas-labs/lui-micro/color' as color;
@use './modules/chroma' as chroma;
@use './modules/monaco' as monaco;
@use './modules/codemirror' as codemirror;
@use './modules/custom' as custom;
@use '@lucas-labs/lui-micro/var' as var;
@ -221,9 +222,9 @@
--color-menu: #{color.get('elevation/3')};
--color-card: #{color.get('elevation/3')};
--color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
--color-markup-code-block: rgba(#{color.get('text', 'rgb')}, 0.05);
--color-markup-code-block: #{color.get('elevation/2')};
--color-button: #{color.get('elevation/4')};
--color-code-bg: #{color.get('elevation/2')};
--color-code-bg: $lvl1;
--color-code-sidebar-bg: #{color.get('elevation/4')};
--color-shadow: rgba(#{$lvl1-rgb}, 0.1);
--color-secondary-bg: #{color.get('elevation/4')};
@ -238,7 +239,7 @@
--color-nav-bg: #{$lvl2};
--color-nav-hover-bg: #{color.get('elevation/6')};
--color-label-active-bg: #{color.get('elevation/6')};
--color-label-text: #{color.get('text')};
--color-label-text: #{color.get('primary/base', 'contrast')};
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #{color.get('elevation/5')};
@ -360,6 +361,7 @@
@include chroma.make-chroma-styles;
@include codemirror.make-code-mirror-styles;
@include monaco.make-monaco-styles($is-dark: true);
@include custom.apply-custom-styles;
}

6
src/themes/scss/theme/modules/_chroma.scss
View File

@ -2,12 +2,6 @@
@use '@lucas-labs/lui-micro/var' as var;
// variables: (
// 'base-font-size': 16px,
// 'font-family': 'Roboto, sans-serif',
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
// ),
@mixin make-chroma-styles {
.chroma .code-inner{
font: 14px var.get('code-font-family');

155
src/themes/scss/theme/modules/_monaco.scss Normal file
View File

@ -0,0 +1,155 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin make-monaco-styles($is-dark: true) {
$surface0: #{color.get('elevation/4')};
$subtext0: #{color.get('elevation/10')};
$overlay2: #{color.get('elevation/9')};
$mantle: #{color.get('elevation/0')};
$base: #{color.get('elevation/3')};
$accent: #{color.get('primary/base')};
$text: #{color.get('text')};
$mauve: #{color.get('theme/sapphire/base')};
$peach: #{color.get('theme/peach/base')};
$teal: #{color.get('theme/teal/base')};
$green: #{color.get('theme/green/base')};
$blue: #{color.get('theme/blue/base')};
$pink: #{color.get('theme/pink/base')};
.monaco-editor {
--vscode-editor-background: #{$mantle} !important;
--vscode-editorGutter-background: #{$mantle} !important;
// selected text
.selected-text {
background-color: $surface0 !important;
}
// line numbers
.margin-view-overlays .line-numbers {
color: $subtext0 !important;
}
.line-numbers.active-line-number {
color: $accent !important;
}
// current / cursor line
.view-overlays .current-line,
.margin-view-overlays .current-line-margin {
background-color: #{color.get('elevation/2')} !important;
}
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
// plaintext
.mtk1 {
color: $text !important;
}
.mtk2 {
color: #ff69b4 !important;
}
// decorators
.mtk3 {
color: $peach !important;
}
// shell arguments
.mtk4 {
color: $teal !important;
}
// css constants & pre-defineds
.mtk5 {
color: $text !important;
}
// keywords
.mtk6 {
color: $mauve !important;
}
// numbers
.mtk7 {
color: $peach !important;
}
// comments
.mtk8 {
color: $overlay2 !important;
}
// sometimes a keyword, apparently
.mtk9 {
color: $mauve !important;
}
// braces, brackets, parentheses
.mtk10 {
color: $subtext0 !important;
}
// arrow brackets & equal signs in HTML
.mtk11 {
color: $teal !important;
}
// @ sign in javascript ¯\_(ツ)_/¯
.mtk12 {
color: $teal !important;
}
.mtk13 {
color: #ff69b4 !important;
}
.mtk14 {
color: #ff69b4 !important;
}
// regex, css classnames, and HTML keywords (huh)
.mtk15 {
color: $mauve !important;
}
// shebangs
.mtk16 {
color: $overlay2 !important;
}
.mtk17 {
color: #ff69b4 !important;
}
.mtk18 {
color: #ff69b4 !important;
}
// glob operator i guess
.mtk19 {
color: $teal !important;
}
.mtk20 {
color: #ff69b4 !important;
}
// strings
.mtk21 {
color: $green !important;
}
.mtk22 {
color: #ff69b4 !important;
}
// functions
.mtk23 {
color: $blue !important;
}
// shell variables
.mtk24 {
color: $peach !important;
}
// weird variables
.mtk25 {
color: $pink !important;
}
// .bracket-highlighting-0 {
// color: color.mix($text, $red, 40%) !important;
// }
// .bracket-highlighting-1 {
// color: color.mix($text, $peach, 40%) !important;
// }
// .bracket-highlighting-2 {
// color: color.mix($text, $yellow, 40%) !important;
// }
// .bracket-highlighting-3 {
// color: color.mix($text, $green, 40%) !important;
// }
// .bracket-highlighting-4 {
// color: color.mix($text, $blue, 40%) !important;
// }
// .bracket-highlighting-5 {
// color: color.mix($text, $mauve, 40%) !important;
// }
}
}

14
src/themes/scss/theme/modules/custom/_home.scss Normal file
View File

@ -0,0 +1,14 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles {
.page-content.home {
div.center {
img {
// background-color: color.get('primary/base');
// border-radius: var.get('measure/4x');
// padding: var.get('measure/1.25x');
}
}
}
}

9
src/themes/scss/theme/modules/custom/_markup.scss Normal file
View File

@ -0,0 +1,9 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles() {
.markup {
table {
width: fit-content;
}
}
}

4
src/themes/scss/theme/modules/custom/index.scss
View File

@ -1,9 +1,13 @@
@use './repo-header';
@use './repo';
@use './project';
@use './home';
@use './markup';
@mixin apply-custom-styles {
@include repo-header.apply-styles();
@include repo.apply-styles();
@include project.apply-styles();
@include home.apply-styles();
@include markup.apply-styles();
}

2
src/themes/scss/theme/modules/custom/repo/_file-list.scss
View File

@ -58,7 +58,7 @@
}
}
@media (max-width: 768px) {
@media (max-width: 1200px) {
flex-direction: column;
column-gap: 0;
row-gap: 24px;