Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix project column title overflow (#31011)

Browse Source 
By the way:
* Re-format the "color.go" to Golang code style
* Remove unused `overflow-y: scroll;` from `.project-column` because
there is `overflow: visible`
This commit is contained in:
wxiaoguang 2024-05-20 13:21:01 +08:00 committed by GitHub
parent 47accfebbd
commit b6574099ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/util/color.go
View File

@ -1,5 +1,6 @@
// Copyright 2023 The Gitea Authors. All rights reserved. // Copyright 2023 The Gitea Authors. All rights reserved.
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
package util package util
import ( import (
@ -8,7 +9,7 @@ import (
"strings" "strings"
) )
// Get color as RGB values in 0..255 range from the hex color string (with or without #) // HexToRBGColor parses color as RGB values in 0..255 range from the hex color string (with or without #)
func HexToRBGColor(colorString string) (float64, float64, float64) { func HexToRBGColor(colorString string) (float64, float64, float64) {
hexString := colorString hexString := colorString
if strings.HasPrefix(colorString, "#") { if strings.HasPrefix(colorString, "#") {
@ -35,7 +36,7 @@ func HexToRBGColor(colorString string) (float64, float64, float64) {
return r, g, b return r, g, b
} }
// Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance // GetRelativeLuminance returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
// Keep this in sync with web_src/js/utils/color.js // Keep this in sync with web_src/js/utils/color.js
func GetRelativeLuminance(color string) float64 { func GetRelativeLuminance(color string) float64 {
r, g, b := HexToRBGColor(color) r, g, b := HexToRBGColor(color)
@ -46,8 +47,8 @@ func UseLightText(backgroundColor string) bool {
return GetRelativeLuminance(backgroundColor) < 0.453 return GetRelativeLuminance(backgroundColor) < 0.453
} }
// Given a background color, returns a black or white foreground color that the highest // ContrastColor returns a black or white foreground color that the highest contrast ratio.
// contrast ratio. In the future, the APCA contrast function, or CSS `contrast-color` will be better. // In the future, the APCA contrast function, or CSS `contrast-color` will be better.
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42 // https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
func ContrastColor(backgroundColor string) string { func ContrastColor(backgroundColor string) string {
if UseLightText(backgroundColor) { if UseLightText(backgroundColor) {

12
templates/projects/view.tmpl
View File

@ -68,18 +68,14 @@
{{range .Columns}} {{range .Columns}}
<div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> <div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}"> <div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
<div class="ui large label project-column-title tw-py-1"> <div class="ui circular label project-column-issue-count">
<div class="ui small circular grey label project-column-issue-count">
{{.NumIssues ctx}} {{.NumIssues ctx}}
</div> </div>
<span class="project-column-title-label">{{.Title}}</span> <div class="project-column-title-label gt-ellipsis">{{.Title}}</div>
</div>
{{if $canWriteProject}} {{if $canWriteProject}}
<div class="ui dropdown jump item"> <div class="ui dropdown tw-p-1">
<div class="tw-px-2">
{{svg "octicon-kebab-horizontal"}} {{svg "octicon-kebab-horizontal"}}
</div> <div class="menu">
<div class="menu user-menu">
<a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}"> <a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}">
{{svg "octicon-pencil"}} {{svg "octicon-pencil"}}
{{ctx.Locale.Tr "repo.projects.column.edit"}} {{ctx.Locale.Tr "repo.projects.column.edit"}}

13
web_src/css/features/projects.css
View File

@ -14,7 +14,6 @@
width: 320px; width: 320px;
height: calc(100vh - 450px); height: calc(100vh - 450px);
min-height: 60vh; min-height: 60vh;
overflow-y: scroll;
flex: 0 0 auto; flex: 0 0 auto;
overflow: visible; overflow: visible;
display: flex; display: flex;
@ -30,17 +29,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.5em;
} }
.project-column-title { .ui.label.project-column-issue-count {
background: none !important; color: inherit;
line-height: 1.25 !important;
cursor: inherit;
} }
.project-column-title, .project-column-title-label {
.project-column-issue-count { flex: 1;
color: inherit !important;
} }
.project-column > .cards { .project-column > .cards {