Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Folder icons #7

Closed
Mirza-Glitch opened this issue Sep 25, 2023 · 20 comments
Closed

Add Folder icons #7

Mirza-Glitch opened this issue Sep 25, 2023 · 20 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@Mirza-Glitch
Copy link

Can you implement folder icons too ? If yes, then I can help you provide all the necessary folder icons and also contribute in file icons as well.

@sebastianjnuwu
Copy link
Owner

Você também pode implementar ícones de pasta? Se sim, posso ajudá-lo a fornecer todos os ícones de pasta necessários e também contribuir com ícones de arquivo.

Hello, yes it is possible to use icons in folders but unfortunately I was unable to create a code that works and maintains performance but I intend to add it.

@sebastianjnuwu sebastianjnuwu added enhancement New feature or request help wanted Extra attention is needed labels Sep 25, 2023
@sebastianjnuwu sebastianjnuwu self-assigned this Sep 25, 2023
@sebastianjnuwu sebastianjnuwu pinned this issue Sep 25, 2023
@sebastianjnuwu
Copy link
Owner

This will be a priority for this plugin, if anyone wants to help implement this, feel free

@Mirza-Glitch
Copy link
Author

Nice to hear that it's possible to add icons on folders too.

but unfortunately I was unable to create a code that works

oh, so can you try to add a feature where you can show a sample icon for the folders ? that would be great.

Can you add a list of necessary file icons for this plugin, I'm willing to contribute in the both file and folder icons for now.

@sebastianjnuwu
Copy link
Owner

sebastianjnuwu commented Sep 25, 2023

Que bom saber que também é possível adicionar ícones em pastas.

mas infelizmente não consegui criar um código que funcionasse

ah, então você pode tentar adicionar um recurso onde possa mostrar um ícone de amostra para as pastas? isso seria bom.

Você pode adicionar uma lista de ícones de arquivos necessários para este plugin. Estou disposto a contribuir com os ícones de arquivos e pastas por enquanto.

I was thinking about that, the plugin is very easy to add icons, you just need to know how to use regex

deadlyjack/Acode#843

@bajrangCoder
Copy link

Try to override sortDir() helper function of Acode same as for file icons, I am also going to try

@sebastianjnuwu
Copy link
Owner

sebastianjnuwu commented Oct 2, 2023

@bajrangCoder Did you manage to make it work? On mine it worked but not the correct way, just in the file browser on the main screen, besides being buggy.

const regex = {
  file: {
    git: /\.gitignore$/i, // file
  },
  dir: {
    git: /\.git$/i, // folder
  }
};

function getType($type, $name) {
  return Object.keys(regex[$type]).find((x) => regex[$type][x].test($name));
};

helpers.sortDir = (list, fileBrowser, mode = 'both') => {
  const dir = [];
  const file = [];
  const sortByName = fileBrowser.sortByName;
  const showHiddenFile = fileBrowser.showHiddenFiles;

  list.forEach((item) => {
    let hidden;

    item.name = item.name || path.basename(item.url || '');
    hidden = item.name[0] === '.';

    if (typeof item.isDirectory !== 'boolean') {
      if (this.isDir(item.type)) item.isDirectory = true;
    }
    if (!item.type) item.type = item.isDirectory ? 'dir': 'file';

    const _type = getType(item.type, item.name);

    if (item.isDirectory) {
      item.icon = `folder_type_${_type}`;
    } else {
      item.icon = `file_type_${_type}`;
    }

    if (!item.url) item.url = item.url || item.uri;
    if ((hidden && showHiddenFile) || !hidden) {

      if (item.isDirectory) {
        dir.push(item);
      } else if (item.isFile) {
        file.push(item);
      }

    }

  });

  if (sortByName) {
    dir.sort(compare);
    file.sort(compare);
  }

  return dir.concat(file);

  function compare(a, b) {
    return a.name.toLowerCase() < b.name.toLowerCase() ? -1: 1;
  }
};

@bajrangCoder
Copy link

I haven't tried yet but I will gonna try .
I am confident it will work, btw let me try first 😅 then i will share my code here

@sebastianjnuwu
Copy link
Owner

I haven't tried yet but I will gonna try . I am confident it will work, btw let me try first 😅 then i will share my code here

Did you have any success? "-"

@Tracsa13
Copy link

Tracsa13 commented Oct 2, 2023

A

@bajrangCoder
Copy link

Hmm, I have tried similar to your code and it's working but only for folder(which is not opened) 😞 but it's working in fileBrowser

I thought need to do something else..

Screenshot_20231003-091620_1

@sebastianjnuwu
Copy link
Owner

Hmm, I have tried similar to your code and it's working but only for folder(which is not opened) 😞 but it's working in fileBrowser

I thought need to do something else..

Screenshot_20231003-091620_1

Mine is the same way, I can't think of a solution, have you tried something else too? I think it's better to wait for a response from @deadlyjack

@bajrangCoder
Copy link

I have researched alot there is no way to add , but there is very difficult approach, like from css target the sidebar folder element with is data-name attribute and then modify its .icon.folder class with different for different folder element

@sebastianjnuwu
Copy link
Owner

sebastianjnuwu commented Oct 10, 2023

I have researched alot there is no way to add , but there is very difficult approach, like from css target the sidebar folder element with is data-name attribute and then modify its .icon.folder class with different for different folder element

I showed you a previous code that worked using setinterval (the only way I could) using pure javascript: deadlyjack/Acode#779 (reply in thread)

I tried using the dom click event but without success

  async check() {

  const list = document.querySelectorAll(".tile");

  list.forEach((e) => {

   const name = e.getAttribute("data-name");
   const type = e.getAttribute("data-type");
  
   const _type = Object.keys(regex).find((x) => regex[x].test(name));
  
   console.log(_type);
  
   if (type === "dir") (e.querySelector(".icon").classList.add(`.folder_type_${_type}`));
   
  });

@Mirza-Glitch
Copy link
Author

Screenshot_20231013-194757.png

This will be fine ? 🤔

@sebastianjnuwu
Copy link
Owner

Captura de tela_20231013-194757.png

Isso vai ficar bem? 🤔

You are a genius

@Mirza-Glitch
Copy link
Author

Mirza-Glitch commented Oct 13, 2023

Captura de tela_20231013-194757.png

Isso vai ficar bem? 🤔

You are a genius

Doing this resulted me to another bug in file browser.

I see there is no other competition for us (except "Acode icons" by legend sabbir), so I'll making a pull request lately next week after solving that bug.

I'm actually contributing to this repo, bcoz it is open source. Hence other developers can see our code and create their own plugin.

I have a request too, can you please remove that "buy me a coffee" or "support me" buttons from this plugin description...
I know they are pretty useless, but I don't feel contributing to this repo after seeing them ( ignore this if you'd like it to be there 😅 )

@sebastianjnuwu
Copy link
Owner

Captura de tela_20231013-194757.png
Isso vai ficar bem? 🤔

Você é um gênio

Fazer isso resultou em outro bug no navegador de arquivos.

Vejo que não há outra competição para nós (exceto "Ícones Acode" da lenda sabbir), então farei uma solicitação de pull na próxima semana, após resolver esse bug.

Na verdade, estou contribuindo para este repositório, porque é de código aberto. Assim, outros desenvolvedores podem ver nosso código e criar seu próprio plugin.

Eu também tenho um pedido, você pode remover os botões "compre-me um café" ou "apoie-me" da descrição deste plugin ... Eu sei que eles são bastante inúteis, mas não me sinto contribuindo para este repositório depois de vê-los (ignore isso se quiser que ele esteja lá 😅)

Okay :( no one offers me a coffee, thank you for your contribution, until you complete this I won't touch the code, so your pull request won't suffer any more

@sebastianjnuwu
Copy link
Owner

@Mirza-Glitch Were you able to resolve the bug?

@Mirza-Glitch
Copy link
Author

Mirza-Glitch commented Oct 15, 2023

@Mirza-Glitch Were you able to resolve the bug?

Yes i was able to resolve the bug, and the code is fully finished. I'll be making a pull request today, Or maybe I'll do it within few minutes 😉

@Mirza-Glitch
Copy link
Author

Mirza-Glitch commented Oct 15, 2023

Added all the necessary folder icons and file icons !!

Little bit of unnecessary explanation here 😁

The Acode material icon plugin code is provided as open-source to help anyone who's looking to create Acode file icons plugin ! 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
Status: Finished
Development

No branches or pull requests

4 participants