feat: add mobile pull workspace navigation (Closes #965)
This commit is contained in:
1 parent
762614b2d3
commit
311396cfac
5 files changed
+153
-13
No files matched your search
@@ -469,25 +469,26 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
.issue-sheet-panel { width:min(560px,100%); height:100%; overflow:auto; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }
|
||||
.issue-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
|
||||
.issue-sheet-header button { min-height:44px; }
|
||||
.mobile-issue-detail-nav { display:none; }
|
||||
.mobile-issue-detail-nav, .mobile-pull-detail-nav { display:none; }
|
||||
@media (max-width:600px) {
|
||||
.issue-sheet-panel { padding-top:max(12px,env(safe-area-inset-top)); }
|
||||
.mobile-issue-detail-nav {
|
||||
.issue-sheet-panel, .pull-sheet-panel { padding-top:max(12px,env(safe-area-inset-top)); }
|
||||
.mobile-issue-detail-nav, .mobile-pull-detail-nav {
|
||||
position:sticky; top:env(safe-area-inset-top); z-index:6;
|
||||
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
|
||||
margin:8px -6px 12px; padding:6px;
|
||||
background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
|
||||
}
|
||||
.mobile-issue-detail-nav button {
|
||||
.mobile-issue-detail-nav button, .mobile-pull-detail-nav button {
|
||||
min-width:0; min-height:44px; padding:4px; overflow-wrap:anywhere;
|
||||
border-color:transparent; font-size:12px;
|
||||
}
|
||||
.mobile-issue-detail-nav button[aria-current="location"] {
|
||||
.mobile-issue-detail-nav button[aria-current="location"], .mobile-pull-detail-nav button[aria-current="location"] {
|
||||
border-color:#60a5fa; background:#17365a; color:#fff;
|
||||
}
|
||||
#issue-overview, #issue-conversation, #issue-comment, #issue-planning { scroll-margin-top:72px; }
|
||||
#pull-overview, #pull-conversation, #pull-comment, #pull-review { scroll-margin-top:72px; }
|
||||
}
|
||||
@media (min-width:601px) { .mobile-issue-detail-nav { display:none; } }
|
||||
@media (min-width:601px) { .mobile-issue-detail-nav, .mobile-pull-detail-nav { display:none; } }
|
||||
.completed-filed-actions { position:fixed; right:0; bottom:0; z-index:57; box-sizing:border-box; width:min(560px,100%); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:8px; margin:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border:1px solid #4ade80; border-radius:12px 0 0; background:rgba(11,21,38,.98); overflow-wrap:anywhere; }
|
||||
.completed-filed-actions[hidden] { display:none; }
|
||||
.completed-filed-actions button { min-height:44px; min-width:0; }
|
||||
|
||||
@@ -29,6 +29,20 @@
|
||||
prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
|
||||
});
|
||||
mobileIssueDetailNavigation.start();
|
||||
const pullDetailPanel = qs('#pull-sheet .pull-sheet-panel');
|
||||
const mobilePullDetailNavigation = createMobileIssueDetailNavigation({
|
||||
root:pullDetailPanel,
|
||||
buttons:Object.fromEntries(Array.from(document.querySelectorAll('[data-pull-section]')).map(button => [button.dataset.pullSection, button])),
|
||||
targets:{
|
||||
overview:qs('#pull-overview'),
|
||||
conversation:qs('#pull-conversation'),
|
||||
reply:qs('#pull-comment'),
|
||||
review:qs('#pull-review'),
|
||||
},
|
||||
beforeNavigate:{review(target) { target.open = true; }},
|
||||
prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
|
||||
});
|
||||
mobilePullDetailNavigation.start();
|
||||
[
|
||||
[qs('.app-menu'), qs('#app-menu-toggle')],
|
||||
[qs('.work-settings'), qs('#work-settings-toggle')],
|
||||
|
||||
+17
-7
@@ -1208,13 +1208,23 @@
|
||||
<div><div class="small" id="pull-sheet-key"></div><h3 id="pull-sheet-title">Assigned pull request</h3></div>
|
||||
<button id="close-pull-sheet" type="button">Close</button>
|
||||
</div>
|
||||
<div id="pull-sheet-status" class="small" aria-live="polite">Choose a pull request.</div>
|
||||
<button class="pull-retry" id="retry-pull-load" type="button" hidden>Retry loading pull request</button>
|
||||
<div class="pull-sheet-content markdown-content" id="pull-sheet-body"></div>
|
||||
<h2>Full conversation</h2><div id="pull-comments"></div>
|
||||
<button class="conversation-more" id="load-older-pull-comments" type="button" hidden>Load older messages</button>
|
||||
<div id="pull-conversation-status" class="small" aria-live="assertive"></div>
|
||||
<button class="conversation-actions-retry" id="retry-pull-comment-actions" type="button" hidden>Retry comment tools</button>
|
||||
<nav class="mobile-detail-nav mobile-pull-detail-nav" aria-label="Pull request sections">
|
||||
<button type="button" data-pull-section="overview">Overview</button>
|
||||
<button type="button" data-pull-section="conversation">Conversation</button>
|
||||
<button type="button" data-pull-section="reply">Reply</button>
|
||||
<button type="button" data-pull-section="review">Review & merge</button>
|
||||
</nav>
|
||||
<div id="pull-overview">
|
||||
<div id="pull-sheet-status" class="small" aria-live="polite">Choose a pull request.</div>
|
||||
<button class="pull-retry" id="retry-pull-load" type="button" hidden>Retry loading pull request</button>
|
||||
<div class="pull-sheet-content markdown-content" id="pull-sheet-body"></div>
|
||||
</div>
|
||||
<section id="pull-conversation" tabindex="-1">
|
||||
<h2>Full conversation</h2><div id="pull-comments"></div>
|
||||
<button class="conversation-more" id="load-older-pull-comments" type="button" hidden>Load older messages</button>
|
||||
<div id="pull-conversation-status" class="small" aria-live="assertive"></div>
|
||||
<button class="conversation-actions-retry" id="retry-pull-comment-actions" type="button" hidden>Retry comment tools</button>
|
||||
</section>
|
||||
<section class="pull-comment-composer" aria-labelledby="pull-comment-title">
|
||||
<h2 id="pull-comment-title">Add comment</h2>
|
||||
<textarea id="pull-comment" maxlength="10000" placeholder="Write a comment"></textarea>
|
||||
|
||||
@@ -17,6 +17,8 @@ function createMobileIssueDetailNavigation(options) {
|
||||
function navigate(name) {
|
||||
const target = targets[name];
|
||||
if (!target) return false;
|
||||
const prepare = options.beforeNavigate && options.beforeNavigate[name];
|
||||
if (prepare) prepare(target);
|
||||
if (name === 'actions' && options.planning) options.planning.open = true;
|
||||
target.scrollIntoView({
|
||||
block: 'start',
|
||||
|
||||
Reference in new issue
Block a user