github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 22:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add icons to dev center sub tabs

Browse Source
This commit is contained in:
jelveh 2024-12-29 18:44:06 -08:00
parent c9fe08cea5
commit 0d0f429bd8
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/dev-center/css/style.css
View File

@ -812,7 +812,7 @@ ol li:before {
position: relative; position: relative;
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
margin-right: 5px; margin-right: 8px;
line-height: 1.42857143; line-height: 1.42857143;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
@ -1200,3 +1200,16 @@ dialog{
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
} }
.stats-cell{
width: 100px;
display: inline-block;
font-size: 14px;
opacity: 0.7;
}
.stats-cell:hover{
cursor: pointer;
opacity: 1 !important;
}
.stats-cell img{
width: 18px; margin-right: 5px; margin-bottom: -4px;
}

22
src/dev-center/js/dev-center.js
View File

@ -505,9 +505,9 @@ function generate_edit_app_section(app) {
</div> </div>
<ul class="section-tab-buttons disable-user-select"> <ul class="section-tab-buttons disable-user-select">
<li class="section-tab-btn active" data-tab="deploy"><span>Deploy</span></li> <li class="section-tab-btn active" data-tab="deploy"><span><svg style="margin-right: 7px; margin-bottom: -3px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket-takeoff" viewBox="0 0 16 16"> <path d="M9.752 6.193c.599.6 1.73.437 2.528-.362s.96-1.932.362-2.531c-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532"/> <path d="M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9 9 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a10 10 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093q.1.026.16.045c.184.06.279.13.351.295l.029.073a3.5 3.5 0 0 1 .157.721c.055.485.051 1.178-.159 2.065m-4.828 7.475.04-.04-.107 1.081a1.54 1.54 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a9 9 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006M5.205 5c-.625.626-.94 1.351-1.004 2.09a9 9 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a3 3 0 0 0-.045-.283 3 3 0 0 0-.3-.041Z"/> <path d="M7.009 12.139a7.6 7.6 0 0 1-1.804-1.352A7.6 7.6 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z"/> </svg>Deploy</span></li>
<li class="section-tab-btn" data-tab="info"><span>Settings</span></li> <li class="section-tab-btn" data-tab="info"><span><svg style="margin-right: 7px; margin-bottom: -3px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16"> <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/> <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/> </svg>Settings</span></li>
<li class="section-tab-btn" data-tab="analytics"><span>Analytics</span></li> <li class="section-tab-btn" data-tab="analytics"><span><svg style="margin-right: 7px; margin-bottom: -3px;" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="#444"><path d="m1 15v-15h-1v16h16v-1z"/><path d="m9 8-3-3-4 4v2l4-4 3 3 7-7v-2z"/></g></svg>Analytics</span></li>
</ul> </ul>
<div class="section-tab active" data-tab="deploy"> <div class="section-tab active" data-tab="deploy">
@ -788,7 +788,7 @@ function resetToOriginalValues() {
} }
} }
async function edit_app_section(cur_app_name) { async function edit_app_section(cur_app_name, tab = 'deploy') {
$('section:not(.sidebar)').hide(); $('section:not(.sidebar)').hide();
$('.tab-btn').removeClass('active'); $('.tab-btn').removeClass('active');
$('.tab-btn[data-tab="apps"]').addClass('active'); $('.tab-btn[data-tab="apps"]').addClass('active');
@ -810,6 +810,12 @@ async function edit_app_section(cur_app_name) {
render_analytics('today') render_analytics('today')
// show the correct tab
$('.section-tab').hide();
$(`.section-tab[data-tab="${tab}"]`).show();
$('.section-tab-buttons .section-tab-btn').removeClass('active');
$(`.section-tab-buttons .section-tab-btn[data-tab="${tab}"]`).addClass('active');
const filetype_association_input = document.querySelector('textarea[id=edit-app-filetype-associations]'); const filetype_association_input = document.querySelector('textarea[id=edit-app-filetype-associations]');
let tagify = new Tagify(filetype_association_input, { let tagify = new Tagify(filetype_association_input, {
pattern: /\.(?:[a-z0-9]+)|(?:[a-z]+\/(?:[a-z0-9.-]+|\*))/, pattern: /\.(?:[a-z0-9]+)|(?:[a-z]+\/(?:[a-z0-9.-]+|\*))/,
@ -1603,12 +1609,12 @@ function generate_app_card(app) {
// users count // users count
h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`; h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`;
h += `<span title="Users" style="margin-right:20px; width: 100px; display: inline-block; font-size: 14px;"><img style="width: 18px; margin-right: 5px; margin-bottom: -4px;" src="./img/users.svg">${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}</span>`; h += `<span class="stats-cell" data-app-name="${html_encode(app.name)}" data-app-uid="${html_encode(app.uid)}" title="Users" style="margin-right:20px;"><img src="./img/users.svg">${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}</span>`;
h += `</td>`; h += `</td>`;
// opens // opens
h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`; h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`;
h += `<span title="Opens" style="width: 100px; display: inline-block; font-size: 14px;"><img style="width: 18px; margin-right: 5px; margin-bottom: -4px;" src="./img/views.svg">${number_format(app.stats.open_count)}</span>`; h += `<span class="stats-cell" data-app-name="${html_encode(app.name)}" data-app-uid="${html_encode(app.uid)}" title="Opens"><img src="./img/views.svg">${number_format(app.stats.open_count)}</span>`;
h += `</td>`; h += `</td>`;
// Created // Created
@ -2933,3 +2939,7 @@ async function render_analytics(period){
puter.ui.hideSpinner(); puter.ui.hideSpinner();
} }
$(document).on('click', '.stats-cell', function(e) {
edit_app_section($(this).attr('data-app-name'), 'analytics');
})