ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

improve sizes of some inputs

Browse Source
This commit is contained in:
mbecker20
2023-01-16 23:02:21 +00:00
parent bf442f5cdf
commit f4bba8febc
5 changed files with 105 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/build/tabs/Owners.tsx
View File

@@ -68,7 +68,10 @@ const Owners: Component<{}> = (p) => {
return (
<Show when={build.loaded}>
<Grid class="config">
<Grid class="config-items scroller" style={{ height: "100%" }}>
<Grid
class="config-items scroller"
style={{ height: "100%", "min-height": "400px" }}
>
<Grid class={combineClasses("config-item shadow")} gap="0.5rem">
<Menu
show={userSearch() ? true : false}
@@ -78,7 +81,6 @@ const Owners: Component<{}> = (p) => {
placeholder="add user"
value={userSearch()}
onEdit={setUserSearch}
style={{ width: "12rem" }}
/>
}
content={

200
frontend/src/components/deployment/tabs/config/Permissions.tsx
View File

@@ -67,111 +67,111 @@ const Permissions: Component<{}> = (p) => {
onCleanup(() => unsub());
return (
<Grid class="config">
<Grid class="config-items scroller" style={{ height: "100%" }}>
<Grid class={combineClasses("config-item shadow")} gap="0.5rem">
<Menu
show={userSearch() ? true : false}
close={() => setUserSearch("")}
target={
<Input
placeholder="add user"
value={userSearch()}
onEdit={setUserSearch}
style={{ width: "12rem" }}
/>
}
content={
<>
<For each={searchUsers()}>
{(user) => (
<ConfirmButton
class="grey"
style={{
width: "100%",
"justify-content": "flex-start",
}}
onConfirm={() => {
client.update_user_permissions_on_target({
user_id: getId(user),
permission: PermissionLevel.Read,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
setUserSearch("");
}}
confirm="add user"
>
{user.username}
</ConfirmButton>
)}
</For>
<Show when={users().length === 0}>no matching users</Show>
</>
}
menuStyle={{ width: "12rem" }}
/>
<For
each={Object.entries(deployment.permissions!)
.filter(
([_, permission]) => permission !== PermissionLevel.None
)
.map(([user_id, _]) => user_id)}
>
{(user_id) => {
const u = () => getUser(user_id)!;
const permissions = () => deployment.permissions![user_id];
return (
<Show when={u()}>
<Flex
alignItems="center"
justifyContent="space-between"
class={combineClasses("grey-no-hover")}
<Grid
class="config-items scroller"
style={{ height: "100%", "min-height": "400px" }}
>
<Grid class={combineClasses("config-item shadow")} gap="0.5rem">
<Menu
show={userSearch() ? true : false}
close={() => setUserSearch("")}
target={
<Input
placeholder="add user"
value={userSearch()}
onEdit={setUserSearch}
/>
}
content={
<>
<For each={searchUsers()}>
{(user) => (
<ConfirmButton
class="grey"
style={{
padding: "0.5rem",
width: "100%",
"justify-content": "flex-start",
}}
onConfirm={() => {
client.update_user_permissions_on_target({
user_id: getId(user),
permission: PermissionLevel.Read,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
setUserSearch("");
}}
confirm="add user"
>
<div class="big-text">
{u().username}
{user_id === getId(user()) && " ( you )"}
</div>
<Show when={!u().admin && user_id !== getId(user())}>
<Flex alignItems="center">
<Selector
selected={permissions()}
items={PERMISSIONS_OPTIONS}
onSelect={(permission) => {
client.update_user_permissions_on_target({
user_id,
permission: permission as PermissionLevel,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
}}
position="bottom center"
/>
<ConfirmButton
class="red"
onConfirm={() => {
client.update_user_permissions_on_target({
user_id,
permission: PermissionLevel.None,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
}}
>
remove
</ConfirmButton>
</Flex>
</Show>
</Flex>
</Show>
);
}}
</For>
</Grid>
{user.username}
</ConfirmButton>
)}
</For>
<Show when={users().length === 0}>no matching users</Show>
</>
}
menuStyle={{ width: "12rem" }}
/>
<For
each={Object.entries(deployment.permissions!)
.filter(([_, permission]) => permission !== PermissionLevel.None)
.map(([user_id, _]) => user_id)}
>
{(user_id) => {
const u = () => getUser(user_id)!;
const permissions = () => deployment.permissions![user_id];
return (
<Show when={u()}>
<Flex
alignItems="center"
justifyContent="space-between"
class={combineClasses("grey-no-hover")}
style={{
padding: "0.5rem",
}}
>
<div class="big-text">
{u().username}
{user_id === getId(user()) && " ( you )"}
</div>
<Show when={!u().admin && user_id !== getId(user())}>
<Flex alignItems="center">
<Selector
selected={permissions()}
items={PERMISSIONS_OPTIONS}
onSelect={(permission) => {
client.update_user_permissions_on_target({
user_id,
permission: permission as PermissionLevel,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
}}
position="bottom center"
/>
<ConfirmButton
class="red"
onConfirm={() => {
client.update_user_permissions_on_target({
user_id,
permission: PermissionLevel.None,
target_type: PermissionsTarget.Deployment,
target_id: params.id,
});
}}
>
remove
</ConfirmButton>
</Flex>
</Show>
</Flex>
</Show>
);
}}
</For>
</Grid>
</Grid>
</Grid>
);
};

3
frontend/src/components/server/tabs/Owners.tsx
View File

@@ -68,7 +68,7 @@ const Owners: Component<{}> = (p) => {
return (
<Show when={server.loaded}>
<Grid class="config">
<Grid class="config-items scroller" style={{ height: "100%" }}>
<Grid class="config-items scroller" style={{ height: "100%", "min-height": "400px" }}>
<Grid class={combineClasses("config-item shadow")} gap="0.5rem">
<Menu
show={userSearch() ? true : false}
@@ -78,7 +78,6 @@ const Owners: Component<{}> = (p) => {
placeholder="add user"
value={userSearch()}
onEdit={setUserSearch}
style={{ width: "12rem" }}
/>
}
content={

1
frontend/src/components/server/tabs/config/Address.tsx
View File

@@ -16,7 +16,6 @@ const Address: Component<{}> = (p) => {
value={server.address}
placeholder="address"
onEdit={(value) => setServer("address", value)}
style={{ width: "13rem" }}
/>
</Flex>
);

2
frontend/src/components/server/tabs/config/Info.tsx
View File

@@ -15,7 +15,6 @@ const Info: Component<{}> = (p) => {
<Input
value={server.region}
onEdit={(value) => setServer("region", value)}
style={{ width: "12rem" }}
/>
</Flex>
{/* <Flex justifyContent="space-between" alignItems="center">
@@ -23,7 +22,6 @@ const Info: Component<{}> = (p) => {
<Input
value={server.instanceID}
onEdit={(value) => setServer("instanceID", value)}
style={{ width: "12rem" }}
/>
</Flex> */}
</Grid>