Rearrange Clone Panel

[BlenderDefender]

Rearrange the clone panel to use less horizontal space. The following changes have been made to achieve this:

• Moved everything into the dropdown menu
• Moved the HTTPS/SSH Switch to a separate line and made the buttons larger
• Added a short description what HTTPS- and SSH-Cloning are for
• Moved the "Clone in VS Code"-Button up and added a divider to separate cloning and downloading
• Named the dropdown button "Code", added appropriate icon and made the button a primary button to raise more attention.

Before:

After:

This pull requests aims to fix #23202

[silverwind]

Keep note that there is a citation button in this menu (https://github.com/go-gitea/gitea/pull/19999) which makes less sense in such a popup. Maybe just remove the or line to remove the expectation that everything in the menu is related to getting the code.

[silverwind]

I'd prefer this to not use fomantic dropdown but tippy.js instead.

Assign classnames code-btn and code-popup and init via JS like this:

function initCodeButton() {
  const codeBtn = document.querySelector('.code-btn');
  if (!codeBtn) return;

  createTippy(codeBtn, {
    content: document.querySelector('.code-popup'),
    placement: 'bottom-end',
    trigger: 'click',
    maxWidth: 'none',
    interactive: true,
    hideOnClick: true,
  }); 
}

[BlenderDefender]

Keep note that there is a citation button in this menu (#19999) which makes less sense in such a popup. Maybe just remove the or line to remove the expectation that everything in the menu is related to getting the code.

Oh, I overlooked this, I'll fix this ASAP

[BlenderDefender]

I'd prefer this to not use fomantic dropdown but tippy.js instead.

Assign classnames code-btn and code-popup and init via JS like this:

function initCodeButton() {
  const codeBtn = document.querySelector('.code-btn');
  if (!codeBtn) return;

  createTippy(codeBtn, {
    content: document.querySelector('.code-popup'),
    placement: 'bottom-end',
    trigger: 'click',
    maxWidth: 'none',
    interactive: true,
    hideOnClick: true,
  }); 
}

Ok, thanks for the feedback

[silverwind]

You can clone https://try.gitea.io/silverwind/symlink-test which has a CITATION.cff that tiggers the display of the citation link.

[silverwind]

Some critique:

• I do not like about this is that it takes two clicks to copy a SSH URL in GitHub UI, while this can be done in one click in the Gitea UI.
• I'm not sure we are really starved for space like GitHub is with their condensed layout. We do have more space available to show more stuff than they do.

[wxiaoguang]

A good news, after refactoring the Clone Panel, all the code in clone_script.tmpl could be moved into a JS file.

[codecov-commenter]

Codecov Report

Merging #23231 (a1ec756) into main (33e556e) will increase coverage by 0.13%. The diff coverage is 55.50%.

:mega: This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main   #23231      +/-   ##
==========================================
+ Coverage   47.44%   47.58%   +0.13%     
==========================================
  Files        1140     1143       +3     
  Lines      150804   151076     +272     
==========================================
+ Hits        71549    71889     +340     
+ Misses      70788    70688     -100     
- Partials     8467     8499      +32     

Impacted Files	Coverage Δ
cmd/serv.go	2.59% <0.00%> (-0.06%)	:arrow_down:
models/actions/run.go	1.72% <0.00%> (+0.01%)	:arrow_up:
models/actions/run_list.go	0.00% <0.00%> (ø)
models/actions/status.go	22.85% <0.00%> (-1.39%)	:arrow_down:
models/actions/task.go	1.69% <0.00%> (-0.01%)	:arrow_down:
models/auth/oauth2.go	60.52% <ø> (ø)
models/auth/twofactor.go	19.73% <ø> (ø)
models/db/engine.go	44.80% <ø> (ø)
models/unittest/testdb.go	12.92% <0.00%> (ø)
modules/auth/password/hash/pbkdf2.go	69.69% <ø> (ø)
... and 111 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[silverwind]

I'd prefer this to not use fomantic dropdown but tippy.js instead. Assign classnames code-btn and code-popup and init via JS like this:

function initCodeButton() {
  const codeBtn = document.querySelector('.code-btn');
  if (!codeBtn) return;

  createTippy(codeBtn, {
    content: document.querySelector('.code-popup'),
    placement: 'bottom-end',
    trigger: 'click',
    maxWidth: 'none',
    interactive: true,
    hideOnClick: true,
  }); 
}

Ok, thanks for the feedback

Oh, and I forgot to mention you need to add a tippy-target class to the content element to hide it until the button is clicked. That said, we should eventually devise a system that lets one create tippy popups purely from HTML, but that's something for later.

I think we should name the two elements .code-btn and .code-btn-content.

[BlenderDefender]

Using tippy breaks the layout, do you know a fix for this?

[silverwind]

Hmm, it shouldn't, but if you could rebase this, maybe I'll play with it :)

Note that Less has been removed, so then change in less/_repository.less now needs to be done in css/repository.css .

[wxiaoguang]

Is this PR active?

[BlenderDefender]

Is this PR active?

It still should be, but I unfortunately didn't have time to work on it througout the last month. Will try to do on the weekend.

[wxiaoguang]

If there is any problem, feel free to ask, I might do some help because I also hope we can clean the clone_script.tmpl after the refactoring 😁 Thank you very much!

[a1012112796]

stale?

[BlenderDefender]

@a1012112796 I guess you can mark it as stale for now, I don't have the time to work on this atm, I'll update the files and the pr as soon as I find time for it. (Hopefully soon)

[BlenderDefender]

Okay, so, I'm trying to work on it again, and I wanted to ask, if tippy.js is still the way to go. If yes, what do I have to do to use tippy.js on that page (I can't use createTippy at the moment)? Just use a script tag leading to tippy.js (Where do I find that btw.?)? Thank you very much for helping out!

[BlenderDefender]

Alright, I've updated the files, but I know that it looks different compared to the original PR:

I'd greatly appreciate feedback to the changes made here and what I should improve.

[BlenderDefender]

Also, should I wait for #27931 to be merged in? It seems like it has a bigger impact on the code there and looks like it's probably going to be merged in sooner, since my PR still has some issues that I need to figure out and I have very limited time to work on it.

[lunny]

Also, should I wait for #27931 to be merged in? It seems like it has a bigger impact on the code there and looks like it's probably going to be merged in sooner, since my PR still has some issues that I need to figure out and I have very limited time to work on it.

I think so.