Skip to content

Commit 8454567

Browse files
durgatechvardurgatechvar
committed
feature completed
1 parent f644be4 commit 8454567

7 files changed

Lines changed: 83 additions & 53 deletions

File tree

‎src/components/common/buttons/icon-button-basic/icon-button-basic.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@ export class IconButtonBasic {
3737
render() {
3838
return (
3939
<button
40-
class={`flex border border-transparent ${this.sizeClasses[this.size]} bg-${this.colorClasses[this.color]}-500 text-${this.colorClasses[this.color]}-600 hover:text-${
41-
this.colorClasses[this.color]
42-
}-800 justify-center w-${this.width} ${this.customClass} cursor-pointer disabled:cursor-default disabled:text-${this.colorClasses[this.color]}-400 `}
40+
class={`flex border border-transparent ${this.sizeClasses[this.size]} text-${this.colorClasses[this.color]}-600 hover:text-${this.colorClasses[this.color]
41+
}-800 justify-center w-${this.width} ${this.customClass} cursor-pointer disabled:cursor-default disabled:text-${this.colorClasses[this.color]}-400 `}
4342
title={this.title}
4443
onClick={this.clickHandler}
4544
disabled={this.disabled || this.loading}

‎src/components/common/custom-drop-down/custom-drop-down.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class CustomDropDown {
5555
class="justify-between bg-gray-100 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 w-full"
5656
type="button"
5757
>
58-
{`Selected Node: ${this.dropdownSearchKey || ''}`}
58+
{`Selected Label: ${this.dropdownSearchKey || ''}`}
5959
<svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
6060
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
6161
</svg>
@@ -106,16 +106,16 @@ export class CustomDropDown {
106106
);
107107
})}
108108
</ul>
109-
<button
109+
{(this.dropdownSearchKey !== undefined && this.dropdownSearchKey.length > 0) && <button
110110
type="button"
111111
onClick={() => this.handleSelect()}
112112
class="flex w-full items-center p-3 text-sm font-medium text-gray-700 border-t border-gray-400 rounded-b-lg bg-gray-100 dark:border-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 "
113113
>
114114
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
115115
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
116116
</svg>
117-
<span class="px-3">Select</span>
118-
</button>
117+
<span class="px-3">Select {`"${this.dropdownSearchKey}"`}</span>
118+
</button>}
119119
</form>
120120
</Host>
121121
);

‎src/components/editorPage/editor-page/editor-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export class EditorPage {
123123
<div>
124124
<aside class="w-full lg:w-80" aria-label="Sidebar">
125125
<div class="w-full flex justify-between ">
126-
<h2 class="font-mono text-lg font-bold leading-7 text-gray-600">Nodes</h2>
126+
<h2 class="font-mono text-lg font-bold leading-7 text-gray-600">Labels</h2>
127127
<icon-button-basic
128128
color="secondary"
129129
size="md"

‎src/components/editorPage/menu-drop-down/menu-drop-down.tsx‎

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ export class MenuDropDown {
1616
this.showDropdown = !this.showDropdown;
1717
}
1818

19+
viewHandler(item) {
20+
state.page = 1;
21+
this.fetchData(item);
22+
this.toggleDropdown();
23+
}
24+
1925
buttonHandler(item) {
2026
state.page = 1;
2127
this.fetchData(item);
@@ -29,26 +35,44 @@ export class MenuDropDown {
2935
render() {
3036
return (
3137
<Host class="relative w-full py-2">
32-
{/* Header */}
33-
{/* <h2 onClick={() => this.toggleDropdown()} class="font-sans text-gray-600 hover:text-indigo-800 cursor-pointer transition text-sm capitalize flex gap-1 items-center">
34-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
35-
<path
36-
stroke-linecap="round"
37-
stroke-linejoin="round"
38-
d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
39-
/>
40-
</svg>
41-
</h2> */}
42-
<div onClick={() => this.toggleDropdown()} class='w-full pl-3 cursor-pointer'>
38+
<div onClick={() => this.toggleDropdown()} class='w-full font-semibold pl-3 flex justify-between text-indigo-700'>
4339
{this.listTitle}
40+
<div
41+
id="dropdownDefaultButton"
42+
data-dropdown-toggle="dropdown"
43+
>
44+
<ul id="dropdown" class="flex gap-5 ml-2 mr-4 pt-1">
45+
{this.list?.map(item => (
46+
<li>
47+
{item === 'Edit' && <a href="#" class="block text-sm">
48+
<div class="cursor-pointer" title={item} onClick={() => this.buttonHandler(this.listTitle)}>
49+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" class="w-5 h-5">
50+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
51+
</svg>
52+
53+
</div>
54+
</a>}
55+
{item === 'View' && <a href="#" class="block text-sm ">
56+
<div class="cursor-pointer" title={item} onClick={() => this.viewHandler(this.listTitle)}>
57+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" class="w-5 h-5">
58+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
59+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
60+
</svg>
61+
62+
</div>
63+
</a>}
64+
</li>
65+
))}
66+
</ul>
67+
</div>
4468
</div>
4569
<backdrop-filter showBackDrop={this.showDropdown} backDropHandler={this.backDropHandler}></backdrop-filter>
4670
{/* List */}
47-
<div
71+
{/* <div
4872
id="dropdownDefaultButton"
4973
data-dropdown-toggle="dropdown"
5074
style={{ right: '0px' }}
51-
class={this.showDropdown ? 'absolute bg-gray-300 z-50 w-44 text-sm list-none mt-2 rounded-md divide-y -bottom-1 right-0 divide-gray-100 shadow ' : 'hidden'}
75+
class={this.showDropdown ? 'absolute bg-gray-300 z-50 w-44 text-sm list-none mt-2 rounded-md divide-y -bottom-1 right-2 divide-gray-100 shadow ' : 'hidden'}
5276
>
5377
<ul id="dropdown" class="py-1 bg-gray-300 rounded-b-md">
5478
{this.list?.map(item => (
@@ -59,7 +83,7 @@ export class MenuDropDown {
5983
</li>
6084
))}
6185
</ul>
62-
</div>
86+
</div> */}
6387
</Host>
6488
);
6589
}

‎src/components/editorPage/node-item/node-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export class NodeItem {
2727
{state.availableNodes.map(item => {
2828
return (
2929
<li>
30-
<div class="flex justify-between text-base font-normal text-gray-900 rounded-lg bg-gray-200">
30+
<div class="flex justify-between text-base font-normal text-gray-900 rounded-lg bg-gray-300">
3131
{/* <div class="ml-3">{item}</div> */}
3232
<menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={nodeName => this.nodeChangeHandler(nodeName)}></menu-drop-down>
3333
</div>

‎src/components/usersPage/edit-user/edit-user.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export class EditUser {
155155
</div>
156156

157157
<div class="w-full">
158-
<p class="z-10 text-md text-gray-500 mb-4">Select permissions</p>
158+
<p class="z-10 text-md text-gray-500 mb-4">Select Role</p>
159159
<label class="block text-left">
160160
<select name="role" class="form-multiselect block w-full mt-1 border rounded-md " multiple>
161161
{this.rolesobj.map((role: any) => (

‎src/global/global.css‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -571,32 +571,20 @@ Ensure the default browser behavior of the `hidden` attribute.
571571
top: 0.25rem;
572572
}
573573

574-
.bottom-0 {
575-
bottom: 0px;
574+
.-bottom-1 {
575+
bottom: -0.25rem;
576576
}
577577

578578
.right-0 {
579579
right: 0px;
580580
}
581581

582-
.bottom-3 {
583-
bottom: 0.75rem;
584-
}
585-
586-
.-bottom-3 {
587-
bottom: -0.75rem;
588-
}
589-
590-
.-bottom-4 {
591-
bottom: -1rem;
582+
.bottom-0 {
583+
bottom: 0px;
592584
}
593585

594-
.-bottom-2 {
595-
bottom: -0.5rem;
596-
}
597-
598-
.-bottom-1 {
599-
bottom: -0.25rem;
586+
.right-2 {
587+
right: 0.5rem;
600588
}
601589

602590
.z-10 {
@@ -611,10 +599,6 @@ Ensure the default browser behavior of the `hidden` attribute.
611599
z-index: 30;
612600
}
613601

614-
.z-40 {
615-
z-index: 40;
616-
}
617-
618602
.order-2 {
619603
order: 2;
620604
}
@@ -1118,6 +1102,14 @@ Ensure the default browser behavior of the `hidden` attribute.
11181102
gap: 0.25rem;
11191103
}
11201104

1105+
.gap-6 {
1106+
gap: 1.5rem;
1107+
}
1108+
1109+
.gap-5 {
1110+
gap: 1.25rem;
1111+
}
1112+
11211113
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
11221114
--tw-space-y-reverse: 0;
11231115
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1233,6 +1225,11 @@ Ensure the default browser behavior of the `hidden` attribute.
12331225
border-bottom-right-radius: 0.5rem;
12341226
}
12351227

1228+
.rounded-b-md {
1229+
border-bottom-right-radius: 0.375rem;
1230+
border-bottom-left-radius: 0.375rem;
1231+
}
1232+
12361233
.rounded-t-lg {
12371234
border-top-left-radius: 0.5rem;
12381235
border-top-right-radius: 0.5rem;
@@ -1243,11 +1240,6 @@ Ensure the default browser behavior of the `hidden` attribute.
12431240
border-top-right-radius: 0.75rem;
12441241
}
12451242

1246-
.rounded-b-md {
1247-
border-bottom-right-radius: 0.375rem;
1248-
border-bottom-left-radius: 0.375rem;
1249-
}
1250-
12511243
.border {
12521244
border-width: 1px;
12531245
}
@@ -1430,14 +1422,29 @@ Ensure the default browser behavior of the `hidden` attribute.
14301422
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
14311423
}
14321424

1425+
.bg-gray-300 {
1426+
--tw-bg-opacity: 1;
1427+
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
1428+
}
1429+
1430+
.bg-gray-800 {
1431+
--tw-bg-opacity: 1;
1432+
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
1433+
}
1434+
14331435
.bg-sky-100 {
14341436
--tw-bg-opacity: 1;
14351437
background-color: rgb(224 242 254 / var(--tw-bg-opacity));
14361438
}
14371439

1438-
.bg-gray-300 {
1440+
.bg-indigo-300 {
14391441
--tw-bg-opacity: 1;
1440-
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
1442+
background-color: rgb(165 180 252 / var(--tw-bg-opacity));
1443+
}
1444+
1445+
.bg-gray-700 {
1446+
--tw-bg-opacity: 1;
1447+
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
14411448
}
14421449

14431450
.bg-opacity-75 {

0 commit comments

Comments
 (0)