Skip to content

feat(core): Add Web UI Animations to components #69

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

Open
wants to merge 53 commits into
base: main
Choose a base branch
from
Open

feat(core): Add Web UI Animations to components #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
13d9f36
feat(core): animate bim-buttons, only
Alkebsi Mar 10, 2025
b752106
fix(core): toolbar wasn't working after button animation
Alkebsi Mar 10, 2025
53edf3c
fix(core): butttons aren't shrinking to 0 anymore
Alkebsi Mar 10, 2025
cc94e1d
chore(core): Updated the buttons animation
Alkebsi Mar 11, 2025
8269899
feat(core): animate bim-selectors
Alkebsi Mar 11, 2025
20a8a67
fix(core): selector animations works on touch screens
Alkebsi Mar 11, 2025
3e0a2a2
feat(core): animate bim-checkboxes
Alkebsi Mar 12, 2025
cbe28c5
fix(core): better browser support for animations
Alkebsi Mar 12, 2025
05fc762
feat(core): animated the bim-tab switchers
Alkebsi Mar 12, 2025
e3d7434
feat(core): animated buttons tooltips
Alkebsi Mar 13, 2025
1444474
feat(core): animate bim-panel selection hide/show
Alkebsi Mar 15, 2025
7161f21
fix(core): bim-button work without glitchs
Alkebsi Mar 15, 2025
5bc6720
feat(core): animated bim-panels hide/show
Alkebsi Mar 16, 2025
7809e98
feat(core): animate bim-panel section hide/show
Alkebsi Mar 15, 2025
0614baa
fix(core): bim-button work without glitchs
Alkebsi Mar 15, 2025
f889e3d
feat(core): animated bim-panels hide/show
Alkebsi Mar 16, 2025
b220797
Merge branch 'main' of https://github.com/Alkebsi/engine_ui-components
Alkebsi Mar 17, 2025
4aad488
fix(core): selectors animation works as expected
Alkebsi Mar 17, 2025
f610b6a
fix(core): fixed the taps switchers animation
Alkebsi Mar 17, 2025
f176f3e
fix(core): changed the checkbox animations
Alkebsi Mar 17, 2025
f2298e3
fix(core): tap switchers work better
Alkebsi Mar 18, 2025
a539229
feat(core): animated bim-tabs hide/show elements
Alkebsi Mar 18, 2025
5c3ce1b
feat(core): animate context menus
Alkebsi Mar 22, 2025
efb9fbd
fix(core): scrollable context menues work well now
Alkebsi Mar 23, 2025
c323740
fix(core): panel animations are faster a bit
Alkebsi Mar 23, 2025
f590ecf
feat(core): animated table's children dropdonws
Alkebsi Mar 23, 2025
5501bdc
chore: synced fork with base
Alkebsi Mar 26, 2025
140787c
fix(core): changed buttons animations
Alkebsi Mar 26, 2025
f454058
fix(core): changed checkboxes animations
Alkebsi Mar 26, 2025
ff5237a
fix(core): panels animation doesn't break the UI
Alkebsi Mar 28, 2025
208d446
fix(core): switchers and selectors work well
Alkebsi Mar 28, 2025
15b2ffe
fix(core): tabs work well, nothing overlaps
Alkebsi Mar 29, 2025
f4a8124
fix(core): made the table easily disabled
Alkebsi Mar 30, 2025
680d391
fix(core): tooltip correct positioning
Alkebsi Mar 30, 2025
ef10cb0
fix(core): stopped a console error on tables
Alkebsi Mar 30, 2025
bebc397
fix(core): context menus scrollable, again fixed.
Alkebsi Mar 31, 2025
623d295
fix(core): updated the tooltips animations
Alkebsi Mar 31, 2025
dc8fbc6
fix(core): tooltips have no existence once removed
Alkebsi Mar 31, 2025
16cfed3
feat(core): overall animations on load
Alkebsi Mar 31, 2025
c3bbaf7
fix(core): transform needs to be deleted
Alkebsi Mar 31, 2025
7ae6f0e
chore(core): onload animations are active, always
Alkebsi Apr 1, 2025
4bb265b
faet(core): animated theme toggling transition
Alkebsi Apr 1, 2025
7796382
fix(core): changed the theme toggle animation
Alkebsi Apr 7, 2025
85e87ba
fix(core): made the table panel animate
Alkebsi Apr 7, 2025
56af4f7
fix(core): tab animations are smoother
Alkebsi Apr 13, 2025
065b704
fix(core): added table animation timing variables
Alkebsi Apr 13, 2025
e44a186
chore:(core): added a button to hide the right panel
Alkebsi Apr 22, 2025
ee2aa52
fix(core): position independent panel animations
Alkebsi Apr 22, 2025
12a1d9c
fix(core): made the theme toggle animations faster
Alkebsi Apr 24, 2025
78dfeb8
chore: build examples
Alkebsi Apr 24, 2025
7cffefc
Merge remote-tracking branch 'upstream/main'
Alkebsi Apr 24, 2025
7c37b4e
fix(core): floating tabs gets rounded corners
Alkebsi Apr 24, 2025
d89fe71
Merge remote-tracking branch 'upstream/main'
Alkebsi Jul 14, 2025
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
91 changes: 46 additions & 45 deletions examples/Button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>
<style>
html {
font-family: sans-serif;
Expand Down Expand Up @@ -43,46 +43,47 @@
.btn-2::after {
background-color: var(--bim-ui_accent-base);
}
</style>
</style>
<script type="module" crossorigin src="../assets/button.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
<bim-button label="My Button!" icon="solar:alarm-play-bold" tooltip-title="The Button"
tooltip-text="This just activates a popup!"></bim-button>
<bim-button class="btn-1" label="An nicely styled button" icon="solar:alarm-play-bold"></bim-button>
<bim-button class="btn-2" label="An styled button" icon="solar:alarm-play-bold"></bim-button>
<bim-button label="Vertical Button" icon="solar:alarm-play-bold" vertical></bim-button>
<bim-button label="No icon"></bim-button>
<bim-button icon="solar:settings-bold"></bim-button>
<bim-button loading label="Loading..."></bim-button>
<bim-button icon="fe:elipsis-v" style="width: min-content;">
<bim-context-menu>
<bim-button label="Action A">
<bim-context-menu>
<bim-button label="Sub Action A">
<bim-context-menu>
<bim-button label="Hi there"></bim-button>
</bim-context-menu>
</bim-button>
<bim-button label="Sub Action B"></bim-button>
</bim-context-menu>
</bim-button>
<bim-button id="context-btn" label="Action B"></bim-button>
<bim-button label="Action C">
<bim-context-menu>
<bim-button label="Action"></bim-button>
<bim-button label="Another Action"></bim-button>
<bim-button label="Another Cool Action"></bim-button>
</bim-context-menu>
</bim-button>
</bim-context-menu>
</bim-button>
</div>
</body>

</head>

<body>
<div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
<bim-button label="My Button!" icon="solar:alarm-play-bold" tooltip-title="The Button"
tooltip-text="This just activates a popup!"></bim-button>
<bim-button class="btn-1" label="An nicely styled button" icon="solar:alarm-play-bold"></bim-button>
<bim-button class="btn-2" label="An styled button" icon="solar:alarm-play-bold"></bim-button>
<bim-button label="Vertical Button" icon="solar:alarm-play-bold" vertical></bim-button>
<bim-button label="No icon"></bim-button>
<bim-button icon="solar:settings-bold"></bim-button>
<bim-button loading label="Loading..."></bim-button>
<bim-button icon="fe:elipsis-v" style="width: min-content;">
<bim-context-menu>
<bim-button label="Action A">
<bim-context-menu>
<bim-button label="Sub Action A">
<bim-context-menu>
<bim-button label="Hi there"></bim-button>
</bim-context-menu>
</bim-button>
<bim-button label="Sub Action B"></bim-button>
</bim-context-menu>
</bim-button>
<bim-button id="context-btn" label="Action B"></bim-button>
<bim-button label="Action C">
<bim-context-menu>
<bim-button label="Action"></bim-button>
<bim-button label="Another Action"></bim-button>
<bim-button label="Another Cool Action"></bim-button>
</bim-context-menu>
</bim-button>
</bim-context-menu>
</bim-button>
</div>

</body>

</html>
29 changes: 15 additions & 14 deletions examples/Checkbox/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox</title>
<style>
html {
font-family: sans-serif;
Expand All @@ -13,15 +13,16 @@
body {
background-color: var(--bim-ui_bg-base);
}
</style>
</style>
<script type="module" crossorigin src="../assets/checkbox.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<bim-checkbox label="Convert to BIM Tiles" checked></bim-checkbox>
</body>

</head>

<body>
<bim-checkbox label="Convert to BIM Tiles" checked></bim-checkbox>

</body>

</html>
29 changes: 15 additions & 14 deletions examples/ColorInput/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Input</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Input</title>
<style>
html {
font-family: sans-serif;
Expand All @@ -17,15 +17,16 @@
bim-color-input {
width: 15rem;
}
</style>
</style>
<script type="module" crossorigin src="../assets/colorInput.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<bim-color-input label="Selection Color" color="#DF4E4E" opacity="20"></bim-color-input>
</body>

</head>

<body>
<bim-color-input label="Selection Color" color="#DF4E4E" opacity="20"></bim-color-input>

</body>

</html>
27 changes: 14 additions & 13 deletions examples/Component/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIComponent</title>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIComponent</title>
<style>
body {
font-family: 'Roboto';
Expand All @@ -15,14 +15,15 @@
align-items: center;
justify-content: center;
}
</style>
</style>
<script type="module" crossorigin src="../assets/component.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
</body>

</head>

<body>

</body>

</html>
39 changes: 20 additions & 19 deletions examples/ContextMenu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Context Menu</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Context Menu</title>
<style>
html {
font-family: sans-serif;
Expand All @@ -26,20 +26,21 @@
top: 10rem;
left: 20rem;
}
</style>
</style>
<script type="module" crossorigin src="../assets/contextMenu.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<div id="context-container">
<bim-context-menu visible>
<bim-button label="Show Elements"></bim-button>
<bim-button label="Settings"></bim-button>
</bim-context-menu>
</div>
</body>

</head>

<body>
<div id="context-container">
<bim-context-menu visible>
<bim-button label="Show Elements"></bim-button>
<bim-button label="Settings"></bim-button>
</bim-context-menu>
</div>

</body>

</html>
55 changes: 28 additions & 27 deletions examples/Dropdown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown</title>
<style>
html {
font-family: sans-serif;
Expand All @@ -23,28 +23,29 @@
.dropdown-1[visible] {
--bim-input--olc: rgb(239, 75, 75);
}
</style>
</style>
<script type="module" crossorigin src="../assets/dropdown.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
<bim-dropdown id="my-dropdown-1" label="IFC Entity" multiple>
<bim-option label="IfcWindow" checked></bim-option>
<bim-option label="IfcWall"></bim-option>
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown class="dropdown-1">
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown label="Vertical Layout" vertical>
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown id="my-dropdown-2" required></bim-dropdown>
</div>
</body>

</head>

<body>
<div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
<bim-dropdown id="my-dropdown-1" label="IFC Entity" multiple>
<bim-option label="IfcWindow" checked></bim-option>
<bim-option label="IfcWall"></bim-option>
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown class="dropdown-1">
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown label="Vertical Layout" vertical>
<bim-option label="IfcSlab"></bim-option>
</bim-dropdown>
<bim-dropdown id="my-dropdown-2" required></bim-dropdown>
</div>

</body>

</html>
31 changes: 16 additions & 15 deletions examples/Grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid</title>
<!DOCTYPE html>
<html lang="en" class="bim-ui-dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid</title>
<style>
* {
margin: 0;
Expand Down Expand Up @@ -34,16 +34,17 @@
bim-panel {
border-radius: 0;
}
</style>
</style>
<script type="module" crossorigin src="../assets/grid.js"></script>
<link rel="modulepreload" crossorigin href="../assets/lit-html-Cs86_c16.js">
<link rel="modulepreload" crossorigin href="../assets/ref-DXXV_dKT.js">
<link rel="modulepreload" crossorigin href="../assets/index-uc4fg9kd.js">
</head>

<body>
<bim-button label="Change Layout" icon="mingcute:layout-fill"></bim-button>
<bim-grid layout="app"></bim-grid>
</body>

</head>

<body>
<bim-button label="Change Layout" icon="mingcute:layout-fill"></bim-button>
<bim-grid layout="app"></bim-grid>

</body>

</html>
Loading