[refactor] redesign user interface #33

Closed
opened 2026-01-19 18:31:58 +00:00 by michael · 8 comments
Owner

Originally created by @abhijithvijayan on GitHub.

Screenshot from 2019-11-22 23-58-21

  • Access Settings / History On Right Click On Firefox
  • Option to Set Custom URL (User Specific)
  • Option to Disable Auto Shortening
  • Show Link to Dashboard
  • Right Click on Links Showing Shorten Options
Originally created by @abhijithvijayan on GitHub. ![Screenshot from 2019-11-22 23-58-21](https://user-images.githubusercontent.com/34790378/69450843-10632a80-0d84-11ea-8ca7-920e815438cd.png) - [ ] Access Settings / History On Right Click On Firefox - [x] Option to Set Custom URL (User Specific) - [x] Option to Disable Auto Shortening - [x] Show Link to Dashboard - [ ] Right Click on Links Showing Shorten Options
Author
Owner

@abhijithvijayan commented on GitHub:

@poeti8 any updates on this?

@abhijithvijayan commented on GitHub: @poeti8 any updates on this?
Author
Owner

@poeti8 commented on GitHub:

In future I'm going to add a ability to allow multiple custom domains for each user. So the extension would need to allow the user to select custom domain.

@poeti8 commented on GitHub: In future I'm going to add a ability to allow multiple custom domains for each user. So the extension would need to allow the user to select custom domain.
Author
Owner

@poeti8 commented on GitHub:

Here's is what I came up with quickly as I'm working on API v2, feel free to adjust spacing, font-size and etc.

Domain should be a dropdown of user domains (kutt.it should be default). Domains can be fetched via /settings, can be fetched every time or we can save it and have a refresh button along side settings to refresh data.

image
@poeti8 commented on GitHub: Here's is what I came up with quickly as I'm working on API v2, feel free to adjust spacing, font-size and etc. Domain should be a dropdown of user domains (kutt.it should be default). Domains can be fetched via `/settings`, can be fetched every time or we can save it and have a refresh button along side settings to refresh data. <img width="509" alt="image" src="https://user-images.githubusercontent.com/23660003/72454586-5f529c80-37d6-11ea-878f-61282b45f066.png">
Author
Owner

@abhijithvijayan commented on GitHub:

Features like custom url shortenining requires much more validation(should throw error if already taken and all). This is not good for the minimal UI the extension has.

The purpose of this extension is to shorten on click so disabling autoshortening doesn't seem like a good choice.

Maybe if that feature is added, the custom url shortening could be implemented easily

@abhijithvijayan commented on GitHub: Features like custom url shortenining requires much more validation(should throw error if already taken and all). This is not good for the minimal UI the extension has. The purpose of this extension is to shorten on click so disabling autoshortening doesn't seem like a good choice. Maybe if that feature is added, the custom url shortening could be implemented easily
Author
Owner

@abhijithvijayan commented on GitHub:

@poet I co do that. But I need some UI Ideas and also recommendations on implementing this feature.

The UX must be better than those available in the store with such features as well.

Also, I will maybe rewrite it using react.

@abhijithvijayan commented on GitHub: @poet I co do that. But I need some UI Ideas and also recommendations on implementing this feature. The UX must be better than those available in the store with such features as well. Also, I will maybe rewrite it using react.
Author
Owner

@poeti8 commented on GitHub:

image

I just made a quick reference, please make sure the styles and colors for the kutt.it link and the copy icon and animations match the one in the Kutt.it website.

@poeti8 commented on GitHub: <img width="766" alt="image" src="https://user-images.githubusercontent.com/23660003/74172829-29be9900-4c46-11ea-962b-e81840e2fbae.png"> I just made a quick reference, please make sure the styles and colors for the kutt.it link and the copy icon and animations match the one in the Kutt.it website.
Author
Owner

@poeti8 commented on GitHub:

I'd rather to keep it simple, going back and forth between pages is not a good UX in my

Please make sure everything matches the design, except copy icon and link style, which as I said replicate the one in kutt.it:

image

By the way, feel free to ping me on telegram @poeti8 so we can chat about this

@poeti8 commented on GitHub: I'd rather to keep it simple, going back and forth between pages is not a good UX in my Please make sure everything matches the design, except copy icon and link style, which as I said replicate the one in kutt.it: <img width="300" alt="image" src="https://user-images.githubusercontent.com/23660003/74217113-d5ee9700-4cbb-11ea-9902-80563ef7cf8e.png"> By the way, feel free to ping me on telegram [@poeti8](https://t.me/poeti8) so we can chat about this
Author
Owner

@abhijithvijayan commented on GitHub:

@poeti8

I have started working on this and was wondering if you could help with the UI.

Just the design is enough for now.

I was wondering what the next screen after user clicks on it is to look like.

I was thinking having the qr code/copy buttons and maybe a back button or something.

Please do attach the designs you are looking for.

@abhijithvijayan commented on GitHub: @poeti8 I have started working on this and was wondering if you could help with the UI. Just the design is enough for now. I was wondering what the next screen after user clicks on it is to look like. I was thinking having the qr code/copy buttons and maybe a back button or something. Please do attach the designs you are looking for.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: thedevs-network/kutt-extension#33