omar/MosisDesigner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement data model binding

Browse Source
This commit is contained in:
omigamedev
2026-01-16 08:12:11 +01:00
parent 67b337b84e
commit ac5ca2beb6
18 changed files with 1219 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/screens/browser.rml
View File

@@ -40,6 +40,11 @@
.browser-nav-btn.disabled {
color: #444444;
cursor: default;
}
.browser-nav-btn.disabled:hover {
background-color: transparent;
}
.browser-url-bar {
@@ -92,6 +97,10 @@
.browser-page-link {
color: #1a0dab;
cursor: pointer;
}
.browser-page-link:hover {
text-decoration: underline;
}
@@ -101,6 +110,11 @@
.browser-search-item {
margin-bottom: 24px;
cursor: pointer;
}
.browser-search-item:hover {
background-color: #f0f0f0;
}
.browser-search-title {
@@ -161,7 +175,7 @@
}
</style>
</head>
<body class="browser-screen">
<body class="browser-screen" data-model="browser">
<!-- Status Bar -->
<div class="status-bar">
<span class="status-bar-time">12:30</span>
@@ -174,34 +188,43 @@
<!-- Browser Toolbar -->
<div class="browser-toolbar">
<div class="browser-nav-btn" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="browser-nav-btn disabled"><img src="../icons/forward.tga" style="width: 24px; height: 24px; opacity: 0.3;"/></div>
<div class="browser-url-bar">
<input class="browser-url" type="text" value="example.com"/>
<div class="browser-nav-btn" data-class-disabled="!can_go_back" onclick="goBack()">
<img src="../icons/back.tga" style="width: 24px; height: 24px;"/>
</div>
<div class="browser-nav-btn disabled">
<img src="../icons/forward.tga" style="width: 24px; height: 24px; opacity: 0.3;"/>
</div>
<div class="browser-url-bar">
<span class="browser-secure-icon">🔒</span>
<input class="browser-url" type="text" data-value="current_url"/>
</div>
<div class="browser-nav-btn" data-event-click="refresh()">
<img src="../icons/refresh.tga" style="width: 24px; height: 24px;"/>
</div>
<div class="browser-nav-btn">
<img src="../icons/more.tga" style="width: 24px; height: 24px;"/>
</div>
<div class="browser-nav-btn"><img src="../icons/refresh.tga" style="width: 24px; height: 24px;"/></div>
<div class="browser-nav-btn"><img src="../icons/more.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Browser Content -->
<div class="browser-content">
<div class="browser-page">
<div class="browser-page-title">Example Domain</div>
<div class="browser-page-title">{{ page_title }}</div>
<div class="browser-page-text">
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
{{ page_content }}
</div>
<div class="browser-page-text">
<span class="browser-page-link">More information...</span>
<span class="browser-page-link" data-event-click="navigate('iana.org')">More information...</span>
</div>
<div style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
<div class="browser-page-title" style="font-size: 18px;">Related Links</div>
<div class="browser-search-item">
<div class="browser-search-item" data-event-click="navigate('iana.org/domains')">
<div class="browser-search-title">IANA — IANA-managed Reserved Domains</div>
<div class="browser-search-url">www.iana.org > domains > reserved</div>
<div class="browser-search-desc">Certain domains are set aside and unavailable for registration. Learn about reserved top-level domains.</div>
</div>
<div class="browser-search-item">
<div class="browser-search-item" data-event-click="navigate('tools.ietf.org/html/rfc2606')">
<div class="browser-search-title">RFC 2606 - Reserved Top Level DNS Names</div>
<div class="browser-search-url">tools.ietf.org > html > rfc2606</div>
<div class="browser-search-desc">This document describes some domain names that are reserved for documentation purposes.</div>
@@ -217,7 +240,7 @@
<span class="browser-tab-label">Home</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tabs-indicator">3</span>
<span class="browser-tabs-indicator">{{ tabs.size }}</span>
<span class="browser-tab-label">Tabs</span>
</div>
<div class="browser-tab-btn">