mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-12 00:26:13 +01:00
89a5d3132c
Summary:
This diff adds a copy button to every repo uri in the clone repo modal. I have made the button to select the text to a merely structural span before the input - it just shows the type of the repository uri. When you click inside the input, the entire uri will be selected. Also I have uncluttered the HTML structure. A table is not needed here, nothing a flex block can't handle.
| Before | After |
|-----------|-----------|
| {F1360344} | {F1368592} |
While at it, I have extended the used javascript copy behavior. First of all: `document.execCommand('copy')` [[ https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand | could stop working every moment in every browser ]]. The [[ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard | new clipboard API ]] is the way to go, so I have implemented it as the preferred method. The old method is kept as a fallback. And I have added a very nice feature: If defined, the behavior will now issue success or error notifications. See the changed UIExamples for that.
To support the shrinking of JS code with async functions I have patched the JsShrink source.
Test Plan: Go to a repository, hit the clone button and use the new copy button. You will see a shiny notification as a reward.
Reviewers: O1 Blessed Committers, avivey, valerio.bozzolan
Reviewed By: O1 Blessed Committers, avivey, valerio.bozzolan
Subscribers: avivey, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Differential Revision: https://we.phorge.it/D25536
64 lines
1.1 KiB
CSS
64 lines
1.1 KiB
CSS
/**
|
|
* @provides diffusion-icons-css
|
|
*/
|
|
|
|
.diffusion-clone-extras {
|
|
font-size: 11px;
|
|
text-align: right;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.diffusion-clone-label {
|
|
height: 30px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.diffusion-browse-name {
|
|
margin-left: 8px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.diffusion-link-icon + .diffusion-link-icon {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.diffusion-search-boxen {
|
|
padding: 16px;
|
|
}
|
|
|
|
.diffusion-search-boxen .phui-form-view {
|
|
padding: 0;
|
|
}
|
|
|
|
.diffusion-clone-uri-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.diffusion-clone-uri-wrapper .diffusion-clone-uri-io {
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid {$greyborder};
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
display: flex;
|
|
width: 38px;
|
|
}
|
|
|
|
.diffusion-clone-uri-wrapper a.button {
|
|
width: 12px;
|
|
height: 19px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.diffusion-clone-uri-wrapper a.button .phui-icon-view {
|
|
left: 15px;
|
|
top: 7px;
|
|
}
|
|
|
|
.diffusion-clone-uri-wrapper input.diffusion-clone-uri {
|
|
border-left: none;
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
display: block;
|
|
width: 100%;
|
|
}
|