jyapayne/screenshot-chrome-extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add copy to clipboard and save to pc toggle.

Browse source 
* escaped node modules from vcs

* feat: added copy to clipboard feature

* feat: added tests

* feat: added feature spec

* feat: added toggle for save to pc

* feat: added tests

* refactor: change toggle from '?' button to the 'switch' component

* Fix failing tests

* Update gitignore and remove unnecessary files

* Remove tooltips because they are unnecessary

---------

Co-authored-by: Joey Yakimowich-Payne <jyapayne@gmail.com>
This commit is contained in:
Karthikeyan N 2025-08-14 00:59:57 +05:30 • committed by Joey
commit 9dd4d706fa
12 changed files with 7780 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

129
popup.html
View file

@ -80,6 +80,76 @@
background: #545b62;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.toggle-label {
font-weight: 500;
color: #333;
font-size: 14px;
margin: 0;
cursor: pointer;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #007bff;
}
input:focus + .toggle-slider {
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.toggle-help {
font-size: 11px;
color: #666;
margin-top: 4px;
line-height: 1.3;
}
.shortcut-info {
font-size: 11px;
color: #666;
@ -107,6 +177,23 @@
background: #f8d7da;
color: #721c24;
}
.status.warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.btn:disabled {
background: #6c757d;
color: #fff;
cursor: not-allowed;
opacity: 0.6;
}
.btn:disabled:hover {
background: #6c757d;
}
</style>
</head>
<body>
@ -124,6 +211,48 @@
</select>
</div>
<div class="setting-group">
<div class="toggle-container">
<label class="toggle-label">Save to PC</label>
<label class="toggle-switch" for="save-to-pc-toggle">
<input
type="checkbox"
id="save-to-pc-toggle"
checked
aria-describedby="save-to-pc-help"
aria-label="Toggle save screenshot to PC"
>
<span class="toggle-slider" role="presentation"></span>
</label>
</div>
<div id="save-to-pc-help" class="toggle-help">
Automatically download screenshots as PNG files to your default downloads folder.
</div>
</div>
<div class="setting-group">
<div class="toggle-container">
<label class="toggle-label">Copy to Clipboard</label>
<label class="toggle-switch" for="clipboard-toggle">
<input
type="checkbox"
id="clipboard-toggle"
checked
aria-describedby="clipboard-help"
aria-label="Toggle copy screenshot to clipboard"
>
<span class="toggle-slider" role="presentation"></span>
</label>
</div>
<div id="clipboard-help" class="toggle-help">
Automatically copy screenshots to your clipboard for quick pasting.
</div>
</div>
<div id="validation-warning" class="status warning" style="display: none;" role="alert" aria-live="polite">
⚠️ Please enable at least one output method (Save to PC or Copy to Clipboard) to capture screenshots.
</div>
<button id="start-selector" class="btn btn-primary">
Start Element Selector
</button>