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

feat(ui): add tags to workspace widget #543

Merged
merged 2 commits into from
Jul 27, 2023
Merged

feat(ui): add tags to workspace widget #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7372b1
wip
leg100 Jul 27, 2023
f61966b
wip
leg100 Jul 27, 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
5 changes: 4 additions & 1 deletion internal/http/html/static/css/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
@apply text-blue-600
}
.widget {
@apply flex flex-col gap-4 place-content-between border border-black mt-3 p-2;
@apply flex flex-col gap-3 place-content-between border border-black mt-3 p-2;
}
.widget > div:first-child {
@apply flex gap-2 items-baseline pb-2;
Expand All @@ -69,4 +69,7 @@
th, td {
@apply p-2;
}
.tag {
@apply text-sm rounded-lg bg-blue-800 text-white font-semibold p-1
}
}
22 changes: 17 additions & 5 deletions internal/http/html/static/css/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,7 +551,7 @@ select {
display: flex;
flex-direction: column;
place-content: space-between;
gap: 1rem;
gap: 0.75rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
Expand Down Expand Up @@ -601,6 +601,18 @@ th, td {
padding: 0.5rem;
}

.tag {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
padding: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
Expand Down Expand Up @@ -776,6 +788,10 @@ th, td {
margin-bottom: 1.25rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -976,10 +992,6 @@ th, td {
border-radius: 9999px;
}

.rounded-lg {
border-radius: 0.5rem;
}

.border {
border-width: 1px;
}
Expand Down
30 changes: 16 additions & 14 deletions internal/http/html/static/templates/content/workspace_get.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,20 +56,22 @@
<div>Connected to <span class="bg-gray-200">{{ .Repo }} ({{ $.VCSProvider.CloudConfig }})</span></div>
{{ end }}
<div class="flex flex-col gap-2">
<h3 class="font-semibold mb-2">Tags</h3>
<div id="tags" class="flex flex-wrap gap-1">
{{ range .Workspace.Tags }}
<form action="{{ deleteTagWorkspacePath $.Workspace.ID }}" method="POST">
<input type="hidden" name="tag_name" id="remove-tag-name" value="{{ . }}" required>
<div class="flex gap-1 items-center bg-blue-800 text-white p-1 font-semibold rounded-lg">
<span>{{ . }}</span>
{{ if $.CanRemoveTags }}
<button class="btn text-xs p-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
{{ end }}
</div>
</form>
{{ end }}
</div>
<h3 class="font-semibold mb-1">Tags</h3>
{{ with .Workspace.Tags }}
<div id="tags" class="flex flex-wrap gap-1">
{{ range . }}
<form action="{{ deleteTagWorkspacePath $.Workspace.ID }}" method="POST">
<input type="hidden" name="tag_name" id="remove-tag-name" value="{{ . }}" required>
<div class="flex gap-1 items-center tag">
<span>{{ . }}</span>
{{ if $.CanRemoveTags }}
<button class="btn text-md p-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
{{ end }}
</div>
</form>
{{ end }}
</div>
{{ end }}
{{ if .CanAddTags }}
{{ template "search-dropdown" .TagsDropdown }}
{{ end }}
Expand Down
2 changes: 1 addition & 1 deletion internal/http/html/static/templates/content/workspace_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{{ range $k, $v := .TagFilters }}
<div>
<input id="workspace-tag-filter-{{ $k }}" class="hidden peer" name="search[tags]" value="{{ $k }}" type="checkbox" {{ checked $v }} onchange="this.form.submit()" />
<label for="workspace-tag-filter-{{ $k }}" class="bg-gray-300 text-white p-1 font-semibold rounded-lg peer-checked:bg-blue-800 cursor-pointer">
<label for="workspace-tag-filter-{{ $k }}" class="tag bg-gray-300 peer-checked:bg-blue-800 cursor-pointer">
{{ $k }}
</label>
</div>
Expand Down
9 changes: 8 additions & 1 deletion internal/http/html/static/templates/partials/workspace_item.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
{{ template "run-status" . }}
{{ end }}
</div>
{{ template "identifier" . }}
<div>
<div class="flex gap-2 items-center">
{{ template "identifier" . }}
{{ range .Tags }}
<span class="tag">{{ . }}</span>
{{ end }}
</div>
</div>
</div>
{{ end }}