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

120
assets/screens/contacts.rml
View File

@@ -67,9 +67,29 @@
color: #B3B3B3;
margin-top: 2px;
}
.contact-call-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 20px;
}
.contact-call-btn:hover {
background-color: rgba(76, 175, 80, 0.2);
}
.contact-call-btn img {
width: 20px;
height: 20px;
pointer-events: none;
}
</style>
</head>
<body class="contacts-screen">
<body class="contacts-screen" data-model="contacts">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
@@ -85,94 +105,16 @@
<!-- Contacts List -->
<div class="contacts-list">
<!-- A -->
<div class="contact-letter">A</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #E91E63;">A</div>
<div class="contact-info">
<div class="contact-name">Alice Johnson</div>
<div class="contact-phone">+1 (555) 123-4567</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #9C27B0;">A</div>
<div class="contact-info">
<div class="contact-name">Andrew Smith</div>
<div class="contact-phone">+1 (555) 234-5678</div>
</div>
</div>
<!-- B -->
<div class="contact-letter">B</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #2196F3;">B</div>
<div class="contact-info">
<div class="contact-name">Bob Williams</div>
<div class="contact-phone">+1 (555) 345-6789</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #00BCD4;">B</div>
<div class="contact-info">
<div class="contact-name">Brian Davis</div>
<div class="contact-phone">+1 (555) 456-7890</div>
</div>
</div>
<!-- C -->
<div class="contact-letter">C</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #4CAF50;">C</div>
<div class="contact-info">
<div class="contact-name">Carol Martinez</div>
<div class="contact-phone">+1 (555) 567-8901</div>
</div>
</div>
<!-- D -->
<div class="contact-letter">D</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #FF9800;">D</div>
<div class="contact-info">
<div class="contact-name">David Lee</div>
<div class="contact-phone">+1 (555) 678-9012</div>
</div>
</div>
<!-- J -->
<div class="contact-letter">J</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #F44336;">J</div>
<div class="contact-info">
<div class="contact-name">John Wilson</div>
<div class="contact-phone">+1 (555) 789-0123</div>
</div>
</div>
<!-- M -->
<div class="contact-letter">M</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #673AB7;">M</div>
<div class="contact-info">
<div class="contact-name">Mom</div>
<div class="contact-phone">+1 (555) 890-1234</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #3F51B5;">M</div>
<div class="contact-info">
<div class="contact-name">Mike Brown</div>
<div class="contact-phone">+1 (555) 901-2345</div>
</div>
</div>
<!-- S -->
<div class="contact-letter">S</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #009688;">S</div>
<div class="contact-info">
<div class="contact-name">Sarah Taylor</div>
<div class="contact-phone">+1 (555) 012-3456</div>
<div data-for="contact : contacts">
<div class="contact-item" data-event-click="select_contact(contact.id); navigateTo('contact_detail')">
<div class="contact-avatar" data-style-background-color="contact.color">{{ contact.initial }}</div>
<div class="contact-info">
<div class="contact-name">{{ contact.name }}</div>
<div class="contact-phone">{{ contact.phone }}</div>
</div>
<div class="contact-call-btn">
<img src="../icons/phone.tga"/>
</div>
</div>
</div>
</div>