webui/src/web-components/demo/diff-header-demo.html - sketch - Gitiles

 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diff Header Demo</title>
     <style>
       body {
         font-family: system-ui, sans-serif;
         margin: 20px;
         background: #f5f5f5;
       }
       .demo-container {
         background: white;
         border: 1px solid #ddd;
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 20px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
       .demo-title {
         font-size: 18px;
         font-weight: bold;
         margin-bottom: 15px;
         color: #333;
       }
       .demo-description {
         margin-bottom: 15px;
         color: #666;
       }
       .demo-layout {
         border: 2px dashed #ccc;
         padding: 15px;
         background: #fafafa;
       }
       .header-section {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 8px 16px;
         border: 1px solid #e0e0e0;
         background: #f8f8f8;
         margin-bottom: 10px;
       }
       .commits-section {
         display: flex;
         align-items: center;
         gap: 12px;
         flex: 1;
       }
       .commits-label {
         font-weight: 500;
         color: #333;
       }
       .commit-selector {
         display: flex;
         align-items: center;
         gap: 8px;
       }
       .file-selector-container {
         display: flex;
         align-items: center;
         gap: 8px;
       }
       .file-selector {
         min-width: 200px;
         padding: 8px 12px;
         border: 1px solid #ccc;
         border-radius: 4px;
       }
       .expand-button {
         background: transparent;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
         padding: 6px 8px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         min-width: 32px;
         min-height: 32px;
       }
       .expand-button:hover {
         background: #e8e8e8;
       }
       .spacer {
         flex: 1;
       }
       .old-layout {
         opacity: 0.6;
       }
       .new-layout {
         border-color: #4caf50;
         background: #f8fff8;
       }
       .change-highlight {
         background: #ffffcc;
         padding: 2px 4px;
         border-radius: 3px;
       }
     </style>
   </head>
   <body>
     <h1>Diff Header Layout Changes</h1>

     <div class="demo-container">
       <div class="demo-title">Before: Original Layout</div>
       <div class="demo-description">
         File selector on left, Commits with expand button, range picker on right
       </div>
       <div class="demo-layout old-layout">
         <div class="header-section">
           <select class="file-selector">
             <option>All files (3)</option>
             <option>Modified: src/file1.ts</option>
             <option>Added: src/file2.ts</option>
           </select>
           <div class="spacer"></div>
           <div class="commits-section">
             <button class="expand-button">▶ Commits</button>
             <!-- Hidden by default -->
           </div>
         </div>
       </div>
     </div>

     <div class="demo-container">
       <div class="demo-title">After: New Layout</div>
       <div class="demo-description">
         <span class="change-highlight">From/To selectors directly visible</span>
         on left,
         <span class="change-highlight">file selector moved to right</span>,
         <span class="change-highlight"
           >expand button in header when single file selected</span
         >
       </div>
       <div class="demo-layout new-layout">
         <div class="header-section">
           <div class="commits-section">
             <div class="commit-selector">
               <label>From:</label>
               <select>
                 <option>abc1234 Initial commit</option>
                 <option selected>def5678 Add feature</option>
               </select>
             </div>
             <div class="commit-selector">
               <label>To:</label>
               <select>
                 <option selected>Uncommitted Changes</option>
                 <option>ghi9012 Fix bug</option>
               </select>
             </div>
           </div>
           <div class="spacer"></div>
           <div class="file-selector-container">
             <select class="file-selector">
               <option>All files (3)</option>
               <option>Modified: src/file1.ts</option>
               <option>Added: src/file2.ts</option>
             </select>
             <!-- No expand button when "All files" selected -->
           </div>
         </div>
       </div>
     </div>

     <div class="demo-container">
       <div class="demo-title">After: Single File Selected</div>
       <div class="demo-description">
         When a single file is selected,
         <span class="change-highlight"
           >expand/collapse button appears in header</span
         >
       </div>
       <div class="demo-layout new-layout">
         <div class="header-section">
           <div class="commits-section">
             <div class="commit-selector">
               <label>From:</label>
               <select>
                 <option>abc1234 Initial commit</option>
                 <option selected>def5678 Add feature</option>
               </select>
             </div>
             <div class="commit-selector">
               <label>To:</label>
               <select>
                 <option selected>Uncommitted Changes</option>
                 <option>ghi9012 Fix bug</option>
               </select>
             </div>
           </div>
           <div class="spacer"></div>
           <div class="file-selector-container">
             <select class="file-selector">
               <option>All files (3)</option>
               <option selected>Modified: src/file1.ts</option>
               <option>Added: src/file2.ts</option>
             </select>
             <button
               class="expand-button"
               title="Expand: Show all lines including unchanged regions"
             >
               <svg
                 width="16"
                 height="16"
                 viewBox="0 0 16 16"
                 fill="currentColor"
               >
                 <!-- Dotted line in the middle -->
                 <line
                   x1="2"
                   y1="8"
                   x2="14"
                   y2="8"
                   stroke="currentColor"
                   stroke-width="1"
                   stroke-dasharray="2,1"
                 />
                 <!-- Large arrow pointing up -->
                 <path d="M8 2 L5 6 L11 6 Z" fill="currentColor" />
                 <!-- Large arrow pointing down -->
                 <path d="M8 14 L5 10 L11 10 Z" fill="currentColor" />
               </svg>
             </button>
           </div>
         </div>
       </div>
     </div>

     <h2>Summary of Changes</h2>
     <ul>
       <li>
         ✅ Removed the "Commits" expand/collapse button and label - From/To now
         directly visible
       </li>
       <li>✅ Moved file selector from left to right side of header</li>
       <li>
         ✅ Added expand/collapse button in header when single file is selected
       </li>
       <li>
         ✅ All controls (From, To, File Selector) now on same horizontal line
       </li>
       <li>
         ✅ Expand/collapse button controls showing/hiding unchanged regions in
         diff
       </li>
     </ul>
   </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Diff Header Demo</title>
	<style>
	body {
	font-family: system-ui, sans-serif;
	margin: 20px;
	background: #f5f5f5;
	}
	.demo-container {
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.demo-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
	}
	.demo-description {
	margin-bottom: 15px;
	color: #666;
	}
	.demo-layout {
	border: 2px dashed #ccc;
	padding: 15px;
	background: #fafafa;
	}
	.header-section {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border: 1px solid #e0e0e0;
	background: #f8f8f8;
	margin-bottom: 10px;
	}
	.commits-section {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	}
	.commits-label {
	font-weight: 500;
	color: #333;
	}
	.commit-selector {
	display: flex;
	align-items: center;
	gap: 8px;
	}
	.file-selector-container {
	display: flex;
	align-items: center;
	gap: 8px;
	}
	.file-selector {
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}
	.expand-button {
	background: transparent;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 6px 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	}
	.expand-button:hover {
	background: #e8e8e8;
	}
	.spacer {
	flex: 1;
	}
	.old-layout {
	opacity: 0.6;
	}
	.new-layout {
	border-color: #4caf50;
	background: #f8fff8;
	}
	.change-highlight {
	background: #ffffcc;
	padding: 2px 4px;
	border-radius: 3px;
	}
	</style>
	</head>
	<body>
	<h1>Diff Header Layout Changes</h1>

	<div class="demo-container">
	<div class="demo-title">Before: Original Layout</div>
	<div class="demo-description">
	File selector on left, Commits with expand button, range picker on right
	</div>
	<div class="demo-layout old-layout">
	<div class="header-section">
	<select class="file-selector">
	<option>All files (3)</option>
	<option>Modified: src/file1.ts</option>
	<option>Added: src/file2.ts</option>
	</select>
	<div class="spacer"></div>
	<div class="commits-section">
	<button class="expand-button">▶ Commits</button>
	<!-- Hidden by default -->
	</div>
	</div>
	</div>
	</div>

	<div class="demo-container">
	<div class="demo-title">After: New Layout</div>
	<div class="demo-description">
	<span class="change-highlight">From/To selectors directly visible</span>
	on left,
	<span class="change-highlight">file selector moved to right</span>,
	<span class="change-highlight"
	>expand button in header when single file selected</span
	>
	</div>
	<div class="demo-layout new-layout">
	<div class="header-section">
	<div class="commits-section">
	<div class="commit-selector">
	<label>From:</label>
	<select>
	<option>abc1234 Initial commit</option>
	<option selected>def5678 Add feature</option>
	</select>
	</div>
	<div class="commit-selector">
	<label>To:</label>
	<select>
	<option selected>Uncommitted Changes</option>
	<option>ghi9012 Fix bug</option>
	</select>
	</div>
	</div>
	<div class="spacer"></div>
	<div class="file-selector-container">
	<select class="file-selector">
	<option>All files (3)</option>
	<option>Modified: src/file1.ts</option>
	<option>Added: src/file2.ts</option>
	</select>
	<!-- No expand button when "All files" selected -->
	</div>
	</div>
	</div>
	</div>

	<div class="demo-container">
	<div class="demo-title">After: Single File Selected</div>
	<div class="demo-description">
	When a single file is selected,
	<span class="change-highlight"
	>expand/collapse button appears in header</span
	>
	</div>
	<div class="demo-layout new-layout">
	<div class="header-section">
	<div class="commits-section">
	<div class="commit-selector">
	<label>From:</label>
	<select>
	<option>abc1234 Initial commit</option>
	<option selected>def5678 Add feature</option>
	</select>
	</div>
	<div class="commit-selector">
	<label>To:</label>
	<select>
	<option selected>Uncommitted Changes</option>
	<option>ghi9012 Fix bug</option>
	</select>
	</div>
	</div>
	<div class="spacer"></div>
	<div class="file-selector-container">
	<select class="file-selector">
	<option>All files (3)</option>
	<option selected>Modified: src/file1.ts</option>
	<option>Added: src/file2.ts</option>
	</select>
	<button
	class="expand-button"
	title="Expand: Show all lines including unchanged regions"
	>
	<svg
	width="16"
	height="16"
	viewBox="0 0 16 16"
	fill="currentColor"
	>
	<!-- Dotted line in the middle -->
	<line
	x1="2"
	y1="8"
	x2="14"
	y2="8"
	stroke="currentColor"
	stroke-width="1"
	stroke-dasharray="2,1"
	/>
	<!-- Large arrow pointing up -->
	<path d="M8 2 L5 6 L11 6 Z" fill="currentColor" />
	<!-- Large arrow pointing down -->
	<path d="M8 14 L5 10 L11 10 Z" fill="currentColor" />
	</svg>
	</button>
	</div>
	</div>
	</div>
	</div>

	<h2>Summary of Changes</h2>
	<ul>
	<li>
	✅ Removed the "Commits" expand/collapse button and label - From/To now
	directly visible
	</li>
	<li>✅ Moved file selector from left to right side of header</li>
	<li>
	✅ Added expand/collapse button in header when single file is selected
	</li>
	<li>
	✅ All controls (From, To, File Selector) now on same horizontal line
	</li>
	<li>
	✅ Expand/collapse button controls showing/hiding unchanged regions in
	diff
	</li>
	</ul>
	</body>
	</html>