moved to root
This commit is contained in:
Andrew Zambazos
@@ -0,0 +1 @@
|
||||
add_app(Sample3 main.cpp)
|
||||
@@ -0,0 +1,352 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
-webkit-user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #10121b;
|
||||
color: #e3e5e8;
|
||||
font-family: 'Inter', -apple-system, 'Segoe UI', 'Open Sans', Arial, sans-serif;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: #1a1c23;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
border: 1px solid #2d303e;
|
||||
}
|
||||
|
||||
.search-bar svg {
|
||||
fill: #6b7280;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #e3e5e8;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
background: #1a1c23;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #2d303e;
|
||||
}
|
||||
|
||||
.notification-icon svg {
|
||||
fill: #8a8d9e;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #1a1c23, #2d303e);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.2s ease;
|
||||
border: 1px solid #2d303e;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-icon svg {
|
||||
fill: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #8a8d9e;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
background: linear-gradient(135deg, #4f46e5, #8b5cf6);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
||||
}
|
||||
|
||||
.welcome-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.6);
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.welcome-text h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.welcome-text p {
|
||||
font-size: 1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.welcome-illustration {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
background: #1a1c23;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #2d303e;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chart-options {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chart-option {
|
||||
background: #2d303e;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
color: #8a8d9e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chart-option.active {
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 200px;
|
||||
background: linear-gradient(90deg, #2d303e, #1a1c23);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.search-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.notification-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* For simplicity, we're adding SVG definitions inline */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-illustration {
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- SVG Icons -->
|
||||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="search" viewBox="0 0 24 24">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
</symbol>
|
||||
<symbol id="notification" viewBox="0 0 24 24">
|
||||
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
|
||||
</symbol>
|
||||
<symbol id="users" viewBox="0 0 24 24">
|
||||
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
|
||||
</symbol>
|
||||
<symbol id="chart" viewBox="0 0 24 24">
|
||||
<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>
|
||||
</symbol>
|
||||
<symbol id="calendar" viewBox="0 0 24 24">
|
||||
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
|
||||
</symbol>
|
||||
<symbol id="settings" viewBox="0 0 24 24">
|
||||
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="top-bar">
|
||||
<h1 class="page-title">Dashboard</h1>
|
||||
|
||||
<div class="search-bar">
|
||||
<svg class="search-icon"><use xlink:href="#search" /></svg>
|
||||
<input type="text" placeholder="Search..." />
|
||||
</div>
|
||||
|
||||
<div class="user-profile">
|
||||
<div class="notification-icon">
|
||||
<svg><use xlink:href="#notification" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome-card">
|
||||
<div class="welcome-text">
|
||||
<h2>Welcome to the Dashboard!</h2>
|
||||
<p>Track your metrics, analyze data, and manage your tasks all in one place.</p>
|
||||
</div>
|
||||
<div class="welcome-illustration">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="white">
|
||||
<use xlink:href="#chart" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg><use xlink:href="#users" /></svg>
|
||||
</div>
|
||||
<div class="stat-value">1,485</div>
|
||||
<div class="stat-label">Total Users</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg><use xlink:href="#chart" /></svg>
|
||||
</div>
|
||||
<div class="stat-value">$12,489</div>
|
||||
<div class="stat-label">Total Revenue</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg><use xlink:href="#calendar" /></svg>
|
||||
</div>
|
||||
<div class="stat-value">64</div>
|
||||
<div class="stat-label">Pending Tasks</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg><use xlink:href="#settings" /></svg>
|
||||
</div>
|
||||
<div class="stat-value">89%</div>
|
||||
<div class="stat-label">System Status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">Performance Analytics</div>
|
||||
<div class="chart-options">
|
||||
<div class="chart-option">Day</div>
|
||||
<div class="chart-option active">Week</div>
|
||||
<div class="chart-option">Month</div>
|
||||
<div class="chart-option">Year</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-placeholder">
|
||||
Chart will be displayed here
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,192 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
-webkit-user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1a1c23;
|
||||
color: #8a8d9e;
|
||||
fill: #8a8d9e;
|
||||
font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
|
||||
height: 100vh;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.menu-section-title {
|
||||
color: #6b7280;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
margin: 2px 12px;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #2d303e;
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
li svg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #2d303e;
|
||||
margin: 24px 24px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #2d303e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
color: #8a8d9e;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- SVG Icons from https://www.flaticon.com/packs/basic-ui-4 -->
|
||||
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="dashboard" viewBox="0 0 24 24">
|
||||
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
|
||||
</symbol>
|
||||
<symbol id="profile" viewBox="0 0 24 24">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</symbol>
|
||||
<symbol id="favorites" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
|
||||
</symbol>
|
||||
<symbol id="documents" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
|
||||
</symbol>
|
||||
<symbol id="help" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
|
||||
</symbol>
|
||||
<symbol id="settings" viewBox="0 0 24 24">
|
||||
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="sidebar-header">
|
||||
<div class="logo"></div>
|
||||
<h2>Dashly</h2>
|
||||
</div>
|
||||
|
||||
<div class="menu-section">
|
||||
<div class="menu-section-title">Main</div>
|
||||
<ul>
|
||||
<li class="active"><svg width="20" height="20"><use xlink:href="#dashboard" /></svg>Dashboard</li>
|
||||
<li class="disabled"><svg width="20" height="20"><use xlink:href="#profile" /></svg>Profile</li>
|
||||
<li class="disabled"><svg width="20" height="20"><use xlink:href="#favorites" /></svg>Favorites</li>
|
||||
<li class="disabled"><svg width="20" height="20"><use xlink:href="#documents" /></svg>Documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="menu-section">
|
||||
<div class="menu-section-title">Support</div>
|
||||
<ul>
|
||||
<li class="disabled"><svg width="20" height="20"><use xlink:href="#help" /></svg>Help Center</li>
|
||||
<li class="disabled"><svg width="20" height="20"><use xlink:href="#settings" /></svg>Settings</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-avatar">U</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">User</div>
|
||||
<div class="user-role">Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
#include <AppCore/App.h>
|
||||
#include <AppCore/Window.h>
|
||||
#include <AppCore/Overlay.h>
|
||||
|
||||
using namespace ultralight;
|
||||
|
||||
#define WINDOW_WIDTH 900
|
||||
#define WINDOW_HEIGHT 600
|
||||
#define LEFT_PANE_WIDTH 200
|
||||
|
||||
///
|
||||
/// Welcome to Sample 3!
|
||||
///
|
||||
/// In this sample we'll continue working with the AppCore API and show how to make your app
|
||||
/// responsive to changes in window size by updating the layout of multiple overlays.
|
||||
///
|
||||
/// We will create a window with two overlays-- a left pane with a fixed width and a right pane
|
||||
/// that takes up the remaining width.
|
||||
///
|
||||
/// +----------------------------------------------------+
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | Left Pane | Right Pane |
|
||||
/// | (200px) | (Fluid) |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// | | |
|
||||
/// +----------------------------------------------------+
|
||||
///
|
||||
/// To respond to resize events, we'll attach a WindowListener to our window and re-calculate
|
||||
/// layout of our overlays in the OnResize callback.
|
||||
///
|
||||
|
||||
class MyApp : public WindowListener,
|
||||
public ViewListener {
|
||||
RefPtr<App> app_;
|
||||
RefPtr<Window> window_;
|
||||
RefPtr<Overlay> left_pane_;
|
||||
RefPtr<Overlay> right_pane_;
|
||||
public:
|
||||
MyApp() {
|
||||
///
|
||||
/// Create our main App instance.
|
||||
///
|
||||
app_ = App::Create();
|
||||
|
||||
///
|
||||
/// Create a resizable window by passing by OR'ing our window flags with
|
||||
/// kWindowFlags_Resizable.
|
||||
///
|
||||
window_ = Window::Create(app_->main_monitor(), WINDOW_WIDTH, WINDOW_HEIGHT, false,
|
||||
kWindowFlags_Titled | kWindowFlags_Resizable);
|
||||
|
||||
///
|
||||
/// Set the title of our window.
|
||||
///
|
||||
window_->SetTitle("Ultralight Sample 3 - Resize Me!");
|
||||
|
||||
///
|
||||
/// Create the overlays for our left and right panes-- we don't care about their initial size
|
||||
/// and position because they'll be set when we call OnResize() below.
|
||||
///
|
||||
left_pane_ = Overlay::Create(window_.get(), 100, 100, 0, 0);
|
||||
right_pane_ = Overlay::Create(window_.get(), 100, 100, 0, 0);
|
||||
|
||||
///
|
||||
/// Force a call to OnResize to perform initial layout and sizing of our left and right
|
||||
/// overlays.
|
||||
///
|
||||
OnResize(window_.get(), window_->width(), window_->height());
|
||||
|
||||
///
|
||||
/// Load some HTML into our left and right overlays.
|
||||
///
|
||||
left_pane_->view()->LoadURL("file:///sidebar.html");
|
||||
right_pane_->view()->LoadURL("file:///content.html");
|
||||
|
||||
///
|
||||
/// Register our MyApp instance as a WindowListener so we can handle the Window's OnResize
|
||||
/// event below.
|
||||
///
|
||||
window_->set_listener(this);
|
||||
|
||||
///
|
||||
/// Register our MyApp instance as a ViewListener so we can handle the Views' OnChangeCursor
|
||||
/// event below.
|
||||
///
|
||||
left_pane_->view()->set_view_listener(this);
|
||||
right_pane_->view()->set_view_listener(this);
|
||||
}
|
||||
|
||||
virtual ~MyApp() {}
|
||||
|
||||
///
|
||||
/// Inherited from WindowListener, called when the Window is closed.
|
||||
///
|
||||
/// We exit the application when the window is closed.
|
||||
///
|
||||
virtual void OnClose(ultralight::Window* window) override {
|
||||
app_->Quit();
|
||||
}
|
||||
|
||||
///
|
||||
/// Inherited from WindowListener, called when the Window is resized.
|
||||
///
|
||||
virtual void OnResize(ultralight::Window* window, uint32_t width, uint32_t height) override {
|
||||
uint32_t left_pane_width_px = window_->ScreenToPixels(LEFT_PANE_WIDTH);
|
||||
left_pane_->Resize(left_pane_width_px, height);
|
||||
|
||||
// Calculate the width of our right pane (window width - left width)
|
||||
int right_pane_width = (int)width - left_pane_width_px;
|
||||
|
||||
// Clamp our right pane's width to a minimum of 1
|
||||
right_pane_width = right_pane_width > 1 ? right_pane_width: 1;
|
||||
|
||||
right_pane_->Resize((uint32_t)right_pane_width, height);
|
||||
|
||||
left_pane_->MoveTo(0, 0);
|
||||
right_pane_->MoveTo(left_pane_width_px, 0);
|
||||
}
|
||||
|
||||
///
|
||||
/// Inherited from ViewListener, called when the Cursor changes.
|
||||
///
|
||||
virtual void OnChangeCursor(ultralight::View* caller, ultralight::Cursor cursor) override {
|
||||
window_->SetCursor(cursor);
|
||||
}
|
||||
|
||||
void Run() {
|
||||
app_->Run();
|
||||
}
|
||||
};
|
||||
|
||||
int main() {
|
||||
MyApp app;
|
||||
app.Run();
|
||||
|
||||
return 0;
|
||||
}
|
||||
Reference in New Issue
Block a user