wisecolt/smarthome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create ui component

Browse Source
This commit is contained in:
szbk
2024-04-07 01:20:20 +03:00
parent 500c3d7a05
commit b8cb55f7f1
5 changed files with 194 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -15,6 +15,6 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #F2F2F2; background-color: #F3F4F9;
width: 100vw; width: 100vw;
} }

23
src/components/Header.svelte
View File

@@ -1,15 +1,14 @@
<div class="head">SMART HOME</div>
<div class="head">SMART HOME</div>
<style> <style>
.head { .head {
background-color: #fff; background-color: #fff;
width: 100vw; width: 100vw;
height: 70px; height: 70px;
display: flex; display: flex;
align-items:center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 20px; padding-left: 20px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05); box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
} }
</style> </style>

127
src/libs/DeviceDetails.svelte
View File

@@ -1,5 +1,8 @@
<script> <script>
import Button from "./ui/Button.svelte";
import Stepper from "./ui/Stepper.svelte";
export let deviceLog; export let deviceLog;
let buttonText = "Run";
</script> </script>
<div class="table-wrapper"> <div class="table-wrapper">
@@ -24,7 +27,11 @@
<div>{log.sensor_value}</div> <div>{log.sensor_value}</div>
<div>{log.battery_life}</div> <div>{log.battery_life}</div>
{:else} {:else}
<div>door switch</div> <div>door switch</div>
<div><Button {buttonText} /></div>
<br>
<div><Stepper /></div>
<br>
{/if} {/if}
{/each} {/each}
<div class="divider"></div> <div class="divider"></div>
@@ -32,65 +39,59 @@
</div> </div>
<style> <style>
.table-wrapper { .table-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
width: 95%; width: 95%;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05); box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
} }
.table { .table {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.table-head-item { .table-head-item {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
padding: 5px 10px 10px 10px; padding: 5px 10px 10px 10px;
color: #535151; color: #535151;
font-size: 16px; font-size: 16px;
} }
.table-row { .table-row {
display: flex; display: flex;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
.table-body-item { .table-head {
width: calc(100% / 7); font-size: 15px;
display: flex; }
justify-content: start; .divider {
padding: 5px 10px 10px 10px; width: 100%;
} background-color: #f2f2f2;
.table-head { height: 1px;
font-size: 15px; }
} /* Link bileşeni üzerinde cursor:pointer stilini uygulama */
.divider { :global(.svelte-routing-link) {
width: 100%; display: flex;
background-color: #f2f2f2; width: 100%;
height: 1px; text-decoration: none;
} color: inherit;
/* Link bileşeni üzerinde cursor:pointer stilini uygulama */ }
:global(.svelte-routing-link) { :global(.svelte-routing-link:hover) {
display: flex; cursor: pointer;
width: 100%; display: flex;
text-decoration: none; width: 100%;
color: inherit; text-decoration: none;
} color: inherit;
:global(.svelte-routing-link:hover) { background-color: #f3f3f3;
cursor: pointer; }
display: flex; </style>
width: 100%;
text-decoration: none;
color: inherit;
background-color: #f3f3f3;
}
</style>

32
src/libs/ui/Button.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script>
export let buttonText;
</script>
<div class="button">
{buttonText}
</div>
<style>
.button {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px;
width: 100px;
height: 38px;
border-radius: 5px;
background-color: #364bc5;
color: #fff;
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.button:active {
background-color: #6a7bdd;
}
</style>

86
src/libs/ui/Stepper.svelte Normal file
View File

@@ -0,0 +1,86 @@
<script>
let counter = 0;
const increaseCounter = () => {
counter++;
};
const decreaseCounter = () => {
counter = counter < 1 ? 0 : counter - 1;
};
</script>
<div class="stepper">
<div
class="button decrease"
on:click={decreaseCounter}
tabindex="0"
role="button"
on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
>
-
</div>
<div class="number">{counter}</div>
<div
class="button increase"
on:click={increaseCounter}
tabindex="0"
role="button"
on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
>
+
</div>
</div>
<style>
.stepper {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: solid 1px #7B819E;
box-sizing: border-box;
padding: 0px;
}
.number {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-left: solid 1px #7B819E;
border-right: solid 1px #7B819E;
color: #4a4d5d;
}
.button {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #7B819E;
cursor: pointer;
box-sizing: border-box;
padding: 0px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.button:hover {
background-color: #4759ba;
color: #fff;
}
.button:active {
background-color: #6a7bdd;
}
.increase {
border-radius: 0px 3px 3px 0px;
}
.decrease {
border-radius: 3px 0px 0px 3px;
}
</style>