wcrisman/DistrictCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout change.

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2022-07-13 17:40:38 -07:00
parent dd6437613b
commit d22aca7ff3
1 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
imports/ui/Assets/AssetDataEntry.svelte
View File

@@ -2,10 +2,10 @@
import {Meteor} from "meteor/meteor"; import {Meteor} from "meteor/meteor";
import {onMount} from "svelte"; import {onMount} from "svelte";
import {writable} from "svelte/store"; import {writable} from "svelte/store";
import Select, { Option } from '@smui/select'; import Select, {Option} from '@smui/select';
import Dialog, { Title, Content, Actions } from '@smui/dialog'; import Dialog, {Title, Content, Actions} from '@smui/dialog';
import Button, { Label } from '@smui/button'; import Button, {Label} from '@smui/button';
import List, {Item,Text,PrimaryText,SecondaryText} from '@smui/list'; import List, {Item, Text, PrimaryText, SecondaryText} from '@smui/list';
import TextField from '@smui/textfield'; import TextField from '@smui/textfield';
import u from 'umbrellajs'; import u from 'umbrellajs';
import {AssetTypes} from "/imports/api/asset-types"; import {AssetTypes} from "/imports/api/asset-types";
@@ -33,10 +33,9 @@
isOpen_AddAssetType = !isOpen_AddAssetType; isOpen_AddAssetType = !isOpen_AddAssetType;
//openAddAssetTypeButton.innerHTML = isOpen_AddAssetType ? "close" : "add"; //openAddAssetTypeButton.innerHTML = isOpen_AddAssetType ? "close" : "add";
if(isOpen_AddAssetType) { if (isOpen_AddAssetType) {
openAddAssetTypeButton.classList.add("reject-button"); openAddAssetTypeButton.classList.add("reject-button");
} } else {
else {
openAddAssetTypeButton.classList.remove("reject-button"); openAddAssetTypeButton.classList.remove("reject-button");
} }
} }
@@ -50,9 +49,9 @@
openDialog = true; openDialog = true;
} }
const dialogClosed = (e) => { const dialogClosed = (e) => {
switch(e.detail.action) { switch (e.detail.action) {
case 'accept': case 'accept':
if(!selectedAssetTypes.some(e => e._id === assetTypeDialogSelectedValue._id)) { if (!selectedAssetTypes.some(e => e._id === assetTypeDialogSelectedValue._id)) {
selectedAssetTypes = [...selectedAssetTypes, assetTypeDialogSelectedValue]; selectedAssetTypes = [...selectedAssetTypes, assetTypeDialogSelectedValue];
} }
break; break;
@@ -72,12 +71,14 @@
</script> </script>
<div class="listContainer"> <div class="listContainer">
<Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);" on:SMUIDialog:closed={dialogClosed}> <Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);"
on:SMUIDialog:closed={dialogClosed}>
<Title id="large-scroll-title">Asset Types</Title> <Title id="large-scroll-title">Asset Types</Title>
<Content id="large-scroll-content"> <Content id="large-scroll-content">
<List class="assetTypesList" twoLine singleSelection bind:selectedIndex={assetTypeDialogSelectedIndex}> <List class="assetTypesList" twoLine singleSelection bind:selectedIndex={assetTypeDialogSelectedIndex}>
{#each $assetTypes as type} {#each $assetTypes as type}
<Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)} selected={assetTypeDialogSelectedValue === type}> <Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)}
selected={assetTypeDialogSelectedValue === type}>
<Text> <Text>
<PrimaryText>{type.name}</PrimaryText> <PrimaryText>{type.name}</PrimaryText>
<SecondaryText>{type.description}</SecondaryText> <SecondaryText>{type.description}</SecondaryText>
@@ -96,76 +97,69 @@
</Actions> </Actions>
</Dialog> </Dialog>
<div class="columnContainer"> <h3 style="display: inline-block">Asset Types</h3>
<div class="listColumn"> <Button class="addBtn" on:click={openAssetTypesDialog}>
<h3 style="display: inline-block">Asset Types</h3> <Label>Add...</Label>
<Button class="addBtn" on:click={openAssetTypesDialog}> </Button>
<Label>Add...</Label> <List class="assetTypeList" singleSelection dense>
</Button> {#each selectedAssetTypes as type}
<List class="assetTypeList" singleSelection dense> <Item on:SMUI:action={() => (selectedAssetType = type)} selected={selectedAssetType === type}>
{#each selectedAssetTypes as type} <Text>{type.name}</Text>
<Item on:SMUI:action={() => (selectedAssetType = type)} selected={selectedAssetType === type}> </Item>
<Text>{type.name}</Text> {/each}
</Item> </List>
{/each} <div style="grid-column: 1/span 1">
</List> <TextField type="text" style="width: 100%" bind:value={assetId} label="AssetId">
</TextField>
</div> </div>
<div class="fieldColumn"> <div style="grid-column: 1/span 1">
<div style="grid-column: 1/span 1"> <TextField type="text" style="width: 100%" bind:value={serial} label="Serial">
<TextField type="text" style="width: 100%" bind:value={assetId} label="AssetId"> </TextField>
</TextField> </div>
</div> <div style="text-align: right">
<div style="grid-column: 1/span 1"> <Button on:click={addAsset} variant="raised">Add</Button>
<TextField type="text" style="width: 100%" bind:value={serial} label="Serial">
</TextField>
</div>
</div>
</div> </div>
<Button on:click={addAsset}>Add</Button>
</div> </div>
<style> <style>
.columnContainer { .columnContainer {
display: grid; display: grid;
grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr); grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr);
} }
:global(.addBtn) {
margin-left: 4rem; :global(.addBtn) {
} margin-left: 4rem;
}
:global(.assetTypeList) { :global(.assetTypeList) {
--mdc-ripple-color: blue; --mdc-ripple-color: blue;
--mdc-ripple-selected-opacity: 0.2; --mdc-ripple-selected-opacity: 0.2;
} }
.listContainer {
display: inline-block;
margin: 1rem;
max-width: 500px;
}
div.listContainer h2 { div.listContainer h2 {
margin: 0; margin: 0;
} }
.list {
//border: 2px solid #4f4e4e;
}
.listItem:nth-child(even) { .listItem:nth-child(even) {
/*background: #f6f6f6;*/ /*background: #f6f6f6;*/
background: white; background: white;
} }
.listItem { .listItem {
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 0.4rem; padding-top: 0.4rem;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
} }
.listItem:last-child { .listItem:last-child {
border: 0; border: 0;
} }
.listItem.selected { .listItem.selected {
background-color: rgba(255, 255, 0, 0.38); background-color: rgba(255, 255, 0, 0.38);
} }