Comments (12)
Thanks for details explanation @skjnldsv 💙
from nextcloud-vue.
But shouldn't we first get rid of icon-classes and URLs in JS/HTTP API and then remove such props from the components?
Otherwise, we don't control if the icon is passed correctly in meaning of a11y and the dark mode.
from nextcloud-vue.
I think, we should keep it. And I'd even return the icon prop to some components like NcButton.
We have some JS API, where an icon class name is provided, and some HTTP API that provides URLs. For example, Files, contact menu.
Developers still can provide an icon to the icon slot, but in this case it is more complex to control that it is defined correctly (e.g. a11y attrs, invert on dark) and to keep consistentcy.
If we decide to keep only the icon slot, then I'd first try to migrate all the apps.
I'm not sure we need the icon prop for SVG (do we use it anywhere?). But iconPath could be useful as done in NcIconAvgWrapper, IMO
from nextcloud-vue.
My personal opinion on this topic:
URLs are returned by our core API so we need this we should support relative and absolut URLs, otherwise all users would have to use icon slot with custom handling.
But I think we do not need the icon classes anymore but should encourage all to use SVGs or SVG paths.
So I am not sure if we should support icon prop for URLs and SVG-paths or just URLs and add an icon-path prop.
I am a bit in favor of only one prop as URLs are somewhat easy to distinguish from SVG paths.
from nextcloud-vue.
- Do we still want to support icon classes using the icon prop
icon classes are deprecated since NC20.
At one point it will be removed entirely ™
- Do we still want to support URLs in the icon prop
- Do we want to keep the icon prop at all?
No and no. Icon URLs are also very problematic for dark mode
The only reason to have urls is for php APIs.
I would be ok to keep those, but we need to make sure it's dark mode compatible.
from nextcloud-vue.
The only reason to have urls is for php APIs.
And we are not going to get rid of using URLs in HTTP API, right? I guess, rendering pure SVG may not be pleasant for apps, like native notifications for example.
from nextcloud-vue.
And we are not going to get rid of using URLs in HTTP API, right?
Well, we've had that icon API discussion thousands of times in the past.
Now that svg can be rendered inline in most places, it helps tremendously.
The only issue about using inline svg in APIs is that you cannot cache it add it can use a fair amount of extra bandwith if used too much.
We thought about having a dedicated component fetching URLs and caching, we thought about having a library of icons and using a reference only... plenty of ideas...
In the end, and it's my two cents, I think the inline svg covers all of our needs.
Flexible, can be imported from an svg file from a php API, is dark-mode compatible.
While it could indeed, theoretically, add a bit more bandwidth to our page loading, this would be async and I think our php APIs are not used that often to actually have such a big impact.
TL;DR, let's also move towards dropping URLs too ? 👉👈
from nextcloud-vue.
The places where I still found images are APIs where other apps might register responses (like activites etc) and your frontend code does not know which SVG to use.
I am not sure how this could be handled, but as non of that APIs is deprecated we will have to handle URLs for at least 3+ years.
from nextcloud-vue.
@susnux you can pass svg as string straight away from the php API
Especially with activity, I think that would work well 👀
from nextcloud-vue.
can pass svg as string
@skjnldsv but that would increase the api response quite a lot. Especially because it can not be cached.
from nextcloud-vue.
@susnux which is alright, like said above:
While it could indeed, theoretically, add a bit more bandwidth to our page loading, this would be async and I think our php APIs are not used that often to actually have such a big impact.
We can try to measure that, but I do not think this would be such a crazy difference.
from nextcloud-vue.
Btw for those discussions we usually have https://github.com/nextcloud/standards/issues for this.
Create a discussion, take a vote, decide and move from there
from nextcloud-vue.
Related Issues (20)
- NcSelect: User select - no Email addresses possible HOT 1
- [NcDialog] Cannot read properties of undefined (reading 'mounted') HOT 4
- NcCheckboxRadioSwitch: Allow external label HOT 3
- [NcActions] doesn't fully support changing type during open state
- [NcAppSidebar] add `open` state HOT 3
- `npm link @nextcloud/vue` hangs - can't follow setup steps further HOT 2
- Update docs about build:module
- Link/mention picker should not pop up when typing inside a word HOT 2
- [NcRichContenteditable] Pressing ESC not only closes the link picker but also unfocuses the input HOT 4
- Three dots menu button on task details sidebar always looks selected
- Check widget errors HOT 1
- NcAppNavigation in mobile state blocks interacting with dialogs HOT 4
- User status broken on safari HOT 2
- NcDialog, NcReferenceWidget generate Vue warnings for the vueuse/core methods HOT 4
- NcReferenceWidget generates warnings on destroy
- Mention picker is shown when a mention-chip is in front of it
- NcCounterBubble just keeps counting up HOT 2
- [NcSelect] has a visible border on hidden input in disabled state from server styles
- RichText causes errors on WebKit | Invalid regex
- [NcAppSidebar] `v-show` doesn't work on sidebar anymore because of Fragment HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextcloud-vue.