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 (#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.

[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.