Search from Popup or ContextMenu 的评价
Search from Popup or ContextMenu 作者: Yoshifumi Fuyuno
Eme 的评价
评分 5 / 5
来自 Eme,5 年前[Version 4.0]
The Css feature is a very good thing to improve this add-on : choose now yourself how the balloon is, make better the interface, and all is very explained even for beginners as i am. This is a plus beside the available 4 inputs, sidebar and window popup show features. And what about badges to make different some similar engines as these from Wikipedia different languages for instance !
1- May I suggest to show the link https://www.w3schools.com/css/default.asp ?
2- my customization for balloon (Could you suggest some examples too?) :
.spc-content,.spc-eFolder{
-webkit-box-shadow: 3px 3px 3px #50808080;
border-radius: 20px 22px 22px 5px;
border-right: 3px solid rgba(180,124,213,0.85) ;
border-bottom: 3px solid rgba(180,124,213,0.85) ;
background: linear-gradient(45deg, rgba(180,124,213,0.92) 0%, rgba(255,255,255,0.8) 100%);
}
3-Badges
I think you'll improve more your example showing how to select one icon too. The css object selection is not so obvious. I tried myself and these are the results for wikipedia, or google video or google page translate :
li[data-name*="(en)"] > * > .icon:before {
.spc-badge;
transform:translate(-5px, 16px);
background:transparent;
content: "en";
letter-spacing: -0px;
font-family: "Times New Roman";
color:black;
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
li[data-name="Google video"] > * > .icon:before {
.spc-badge;
transform:translate(-4px, 16px);
background:transparent;
content: "vid";
letter-spacing: -1px;
font-family: "Times New Roman";
color:rgb(52,123,149);
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
li[data-name="Google Translate (This page)"] > * > .icon:before {
.spc-badge;
transform:translate(-4px, 16px);
background:transparent;
content: "pag";
letter-spacing: -1px;
font-family: "Times New Roman";
color:rgb(0,142,250);
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
4-Tooltip
How boring it is to have the folder tooltip which appears below the subfolder...
5-Automatic balloon disappearing, please
6-Folder
I come back with my suggestion from my old message. I want to convince you again to try it. I strongly believe this reduces folder troubles and get easier icons ordering. I suggested optionaly that the folder icon becomes the last used icon of the sublist and this sublist appears after a time delay set by user. I've just experimented what is very boring with foldering : I wanted to get quickly my copy icon (thanks for its come back), I moved the mouse to get the icon, got to hover the icon below in the list, which was unhappyly a folder : the subfolder appeared and when cursor got the copy icon location, I clicked but below cursor this was not the copy icon as expected but this one from subfolder that have had just appeared...
I've quickly made some css code to present a good compromise solution which can clearly show how this particular icon is a special folder but also still keeping discrete, and how the subfolder can not be invasive still keeping quick and ergonomic. I've used a dotted line which surely should be better if its would be curved to the icon, even just a bit, and dots are bordered or like hole with shadow.
li[data-name="Google Video"] {
border-top: 4px dotted black ;
/*transform:scale(0.9, 0.9);*/
/*transform:translate(0px, -1px);*/
}
.spc-eFolder{transition-delay:0.9s;}
7-When you unselect a folder visibility in option page, the subicons (still checked) are still visible in the balloon
8-I can't activate www.startpage.com engine (post method I suppose) using the add-on add engine menu
###############ANSWER
Thanks a lot, I'm satisfied enough, so far, for now, I use your add-on on default instead of SSS ! But I would like to use more foldering feature that I relegate a bit.
Feel free to use my examples if you want : this is a beginning.
3-What I meant is the fact that data-name*="(en)" needs to become that data-name="Google Translate (This page)" to catch one icon. Both examples are useful anymore. Have you tried my examples? You see that text can be shown as part of the icon without using classic icon+text which uses a lot of space. More, If badge centering is automatic, then this solution needs only text and a color picker for the use for each icon (and even maybe a catching icon accent color algorithm could make it for you). Few things for a lot of assets. For instance, distinguishing bookmarklet same icons for instance. I still think this feature could be set in foreground... I forgot to precise that I use rounded icons.
4-It feels ugly to have tooltip below subfolder. Could you make an example to desactivate tooltip for folders and only for them ? At least if you haven't an another solution to keep tooltip always correctly visible ?
5-I'm not talking about how the balloon is opening but preferably how it could be automaticaly disappears : when cursor is out of the balloon area, a timer could make the balloon to disappear by itself like already it is for subfolder panels.
6-I've tried this new "Show last used engine first" feature, but I'm not convinced. One thing I think important for daily use is that the icon order have to stay the same, so far you can move you cursor quickly to the good icon. Some other add-on reserves a special icon which duplicates the last used icon. But this uses a precious icon space, and you can't think to multiply this special icon for the two or three last used icons. More, I'm wondering if this is so private (may the users should be alerted?).
The folder accident that I told is the common reproach for foldering in this kind of add-on. Probably this is the reason why SSS feels shy to use folders. That's why you present a css example to show subfolder below the folder icon I suppose ; this is fixing a bit indeed.
I still have in my mind that my solution is useful : using an icon which can be clickable and which is the last used from subfolder list. I'm insisting surely, but in the current version, If I want to use openstreetmap and google map, I have to use two icon places. But If I don't use both enough to let them in foreground, so I use a classic folder ; this still use two icons in the main panel. My optional folder solution could be in this case very interesting to list the alternatives to one engine, and this is often this case : wikipedia differents languages, differents traductors, mapping, dictionnary...
My draft css codings (I'm just beginner) want to show basicaly :
-how dots could remember discreetly that this icon could open subfolder : but this may need precisions like moving all the icon line to avoid misalignment due to dots or changing interline space maybe...
- a longer delay (than normal) to make the subfolder to be shown could be acceptable in this special case.
But these lacks catching and execute click events (maybe javascript code?) and duplicating all icons parameters to substitute it to the folder image.
7- About checkboxes. Current behavior could be misleading. For me, for each folder, their subicons are checked visible whereas the folder checkbox is empty. May the folder checkbox be able to react automaticaly as soon as one subicon is checked or not?
8- startpage.com runs now, thanks!
The Css feature is a very good thing to improve this add-on : choose now yourself how the balloon is, make better the interface, and all is very explained even for beginners as i am. This is a plus beside the available 4 inputs, sidebar and window popup show features. And what about badges to make different some similar engines as these from Wikipedia different languages for instance !
1- May I suggest to show the link https://www.w3schools.com/css/default.asp ?
2- my customization for balloon (Could you suggest some examples too?) :
.spc-content,.spc-eFolder{
-webkit-box-shadow: 3px 3px 3px #50808080;
border-radius: 20px 22px 22px 5px;
border-right: 3px solid rgba(180,124,213,0.85) ;
border-bottom: 3px solid rgba(180,124,213,0.85) ;
background: linear-gradient(45deg, rgba(180,124,213,0.92) 0%, rgba(255,255,255,0.8) 100%);
}
3-Badges
I think you'll improve more your example showing how to select one icon too. The css object selection is not so obvious. I tried myself and these are the results for wikipedia, or google video or google page translate :
li[data-name*="(en)"] > * > .icon:before {
.spc-badge;
transform:translate(-5px, 16px);
background:transparent;
content: "en";
letter-spacing: -0px;
font-family: "Times New Roman";
color:black;
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
li[data-name="Google video"] > * > .icon:before {
.spc-badge;
transform:translate(-4px, 16px);
background:transparent;
content: "vid";
letter-spacing: -1px;
font-family: "Times New Roman";
color:rgb(52,123,149);
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
li[data-name="Google Translate (This page)"] > * > .icon:before {
.spc-badge;
transform:translate(-4px, 16px);
background:transparent;
content: "pag";
letter-spacing: -1px;
font-family: "Times New Roman";
color:rgb(0,142,250);
text-shadow:
-1px -1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px 1px 0px #FFFFFF,
1px 1px 0px #FFFFFF;
font-weight: 550;
}
4-Tooltip
How boring it is to have the folder tooltip which appears below the subfolder...
5-Automatic balloon disappearing, please
6-Folder
I come back with my suggestion from my old message. I want to convince you again to try it. I strongly believe this reduces folder troubles and get easier icons ordering. I suggested optionaly that the folder icon becomes the last used icon of the sublist and this sublist appears after a time delay set by user. I've just experimented what is very boring with foldering : I wanted to get quickly my copy icon (thanks for its come back), I moved the mouse to get the icon, got to hover the icon below in the list, which was unhappyly a folder : the subfolder appeared and when cursor got the copy icon location, I clicked but below cursor this was not the copy icon as expected but this one from subfolder that have had just appeared...
I've quickly made some css code to present a good compromise solution which can clearly show how this particular icon is a special folder but also still keeping discrete, and how the subfolder can not be invasive still keeping quick and ergonomic. I've used a dotted line which surely should be better if its would be curved to the icon, even just a bit, and dots are bordered or like hole with shadow.
li[data-name="Google Video"] {
border-top: 4px dotted black ;
/*transform:scale(0.9, 0.9);*/
/*transform:translate(0px, -1px);*/
}
.spc-eFolder{transition-delay:0.9s;}
7-When you unselect a folder visibility in option page, the subicons (still checked) are still visible in the balloon
8-I can't activate www.startpage.com engine (post method I suppose) using the add-on add engine menu
###############ANSWER
Thanks a lot, I'm satisfied enough, so far, for now, I use your add-on on default instead of SSS ! But I would like to use more foldering feature that I relegate a bit.
Feel free to use my examples if you want : this is a beginning.
3-What I meant is the fact that data-name*="(en)" needs to become that data-name="Google Translate (This page)" to catch one icon. Both examples are useful anymore. Have you tried my examples? You see that text can be shown as part of the icon without using classic icon+text which uses a lot of space. More, If badge centering is automatic, then this solution needs only text and a color picker for the use for each icon (and even maybe a catching icon accent color algorithm could make it for you). Few things for a lot of assets. For instance, distinguishing bookmarklet same icons for instance. I still think this feature could be set in foreground... I forgot to precise that I use rounded icons.
4-It feels ugly to have tooltip below subfolder. Could you make an example to desactivate tooltip for folders and only for them ? At least if you haven't an another solution to keep tooltip always correctly visible ?
5-I'm not talking about how the balloon is opening but preferably how it could be automaticaly disappears : when cursor is out of the balloon area, a timer could make the balloon to disappear by itself like already it is for subfolder panels.
6-I've tried this new "Show last used engine first" feature, but I'm not convinced. One thing I think important for daily use is that the icon order have to stay the same, so far you can move you cursor quickly to the good icon. Some other add-on reserves a special icon which duplicates the last used icon. But this uses a precious icon space, and you can't think to multiply this special icon for the two or three last used icons. More, I'm wondering if this is so private (may the users should be alerted?).
The folder accident that I told is the common reproach for foldering in this kind of add-on. Probably this is the reason why SSS feels shy to use folders. That's why you present a css example to show subfolder below the folder icon I suppose ; this is fixing a bit indeed.
I still have in my mind that my solution is useful : using an icon which can be clickable and which is the last used from subfolder list. I'm insisting surely, but in the current version, If I want to use openstreetmap and google map, I have to use two icon places. But If I don't use both enough to let them in foreground, so I use a classic folder ; this still use two icons in the main panel. My optional folder solution could be in this case very interesting to list the alternatives to one engine, and this is often this case : wikipedia differents languages, differents traductors, mapping, dictionnary...
My draft css codings (I'm just beginner) want to show basicaly :
-how dots could remember discreetly that this icon could open subfolder : but this may need precisions like moving all the icon line to avoid misalignment due to dots or changing interline space maybe...
- a longer delay (than normal) to make the subfolder to be shown could be acceptable in this special case.
But these lacks catching and execute click events (maybe javascript code?) and duplicating all icons parameters to substitute it to the folder image.
7- About checkboxes. Current behavior could be misleading. For me, for each folder, their subicons are checked visible whereas the folder checkbox is empty. May the folder checkbox be able to react automaticaly as soon as one subicon is checked or not?
8- startpage.com runs now, thanks!
开发者回应
发布于 5 年前Hi! Eme.
How about Ver.4.0 that accepted your request?
I hope you are satisfied.
-Badges
Common customization can be set collectively by ".spc-badge".
Please refer to the example on the options page.
-Tooltip
You can customize everything in CSS, including where and how it appears.
You can also erase the default ones and make your own.
-Automatic balloon disappearing.
If the automatic display is annoying, you may want to set "Opening behavior" to something other than Auto.
You can also toggle with the Shortcut key.
-Folder
You can use the "Show last used engine first" feature.
It is recommended that you use CSS to display subfolders in exactly the same place as the folder icon.
See the options page for examples that might be helpful.
In addition, all icons can be changed with CSS. (Including folder)
-Folder checkbox on options page
The folder checkbox is a toggle button for the engine directly below (not below).
This is explained in Tooltip.
-post method Search
The process up to now did not work on Microsoft Edge(Chrome), so I changed it, but it seems to no longer work on Firefox 72.
Firefox Nightly (74) did not notice because it works without problems. It looks like a bug in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1344465), but I will fix it.
Thank you for letting me know.
Version 4.0 is designed to allow you to customize almost all of the pop-ups with CSS.
Maybe I could write more CSS examples, but I don't have time. This is the limit.
We are considering creating a wiki that users can edit freely and linking from the options page.
How about Ver.4.0 that accepted your request?
I hope you are satisfied.
-Badges
Common customization can be set collectively by ".spc-badge".
Please refer to the example on the options page.
-Tooltip
You can customize everything in CSS, including where and how it appears.
You can also erase the default ones and make your own.
-Automatic balloon disappearing.
If the automatic display is annoying, you may want to set "Opening behavior" to something other than Auto.
You can also toggle with the Shortcut key.
-Folder
You can use the "Show last used engine first" feature.
It is recommended that you use CSS to display subfolders in exactly the same place as the folder icon.
See the options page for examples that might be helpful.
In addition, all icons can be changed with CSS. (Including folder)
-Folder checkbox on options page
The folder checkbox is a toggle button for the engine directly below (not below).
This is explained in Tooltip.
-post method Search
The process up to now did not work on Microsoft Edge(Chrome), so I changed it, but it seems to no longer work on Firefox 72.
Firefox Nightly (74) did not notice because it works without problems. It looks like a bug in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1344465), but I will fix it.
Thank you for letting me know.
Version 4.0 is designed to allow you to customize almost all of the pop-ups with CSS.
Maybe I could write more CSS examples, but I don't have time. This is the limit.
We are considering creating a wiki that users can edit freely and linking from the options page.