-
Notifications
You must be signed in to change notification settings - Fork 44
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
web: Improve Patterns selector UI #1123
Conversation
For a better information layout and to reflect auto selection.
@@ -386,6 +403,18 @@ ul[data-type="agama/list"][role="grid"] { | |||
} | |||
} | |||
|
|||
ul[data-items-type="agama/patterns"] { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NOTE: this change reveals that this part, the core/Selector styles, can be simplified / improved. Let's wait a bit until selectors are more defined (we're working in new storage selectors that might have impact in such simplification if finally we get rid of storage/device-utils/DeviceSelector.
After a few months of work, it is time to merge the `architecture_2024` branch into `master`. It is still a work-in-progress, but all the efforts should be go now against that branch. ## Pull requests * #1061 * #1064 * #1073 * #1074 * #1080 * #1089 * #1091 * #1092 * #1094 * #1095 * #1099 * #1100 * #1102 * #1103 * #1112 * #1114 * #1116 * #1117 * #1119 * #1120 * #1123 * #1126 * #1129 * #1130 * #1131 * #1132 * #1133 * #1134 * #1136 * #1139 * #1140 * #1143 * #1146 ## Other commits * 8efa41f * 9e2dec0
Prepare for releasing Agama 8. It includes the following pull requests: * #884 * #886 * #914 * #918 * #956 * #957 * #958 * #959 * #960 * #961 * #962 * #963 * #964 * #965 * #966 * #969 * #970 * #976 * #977 * #978 * #979 * #980 * #981 * #983 * #984 * #985 * #986 * #988 * #991 * #992 * #995 * #996 * #997 * #999 * #1003 * #1004 * #1006 * #1007 * #1008 * #1009 * #1010 * #1011 * #1012 * #1014 * #1015 * #1016 * #1017 * #1020 * #1022 * #1023 * #1024 * #1025 * #1027 * #1028 * #1029 * #1030 * #1031 * #1032 * #1033 * #1034 * #1035 * #1036 * #1038 * #1039 * #1041 * #1042 * #1043 * #1045 * #1046 * #1047 * #1048 * #1052 * #1054 * #1056 * #1057 * #1060 * #1061 * #1062 * #1063 * #1064 * #1066 * #1067 * #1068 * #1069 * #1071 * #1072 * #1073 * #1074 * #1075 * #1079 * #1080 * #1081 * #1082 * #1085 * #1086 * #1087 * #1088 * #1089 * #1090 * #1091 * #1092 * #1093 * #1094 * #1095 * #1096 * #1097 * #1098 * #1099 * #1100 * #1102 * #1103 * #1104 * #1105 * #1106 * #1109 * #1110 * #1111 * #1112 * #1114 * #1116 * #1117 * #1118 * #1119 * #1120 * #1121 * #1122 * #1123 * #1125 * #1126 * #1127 * #1128 * #1129 * #1130 * #1131 * #1132 * #1133 * #1134 * #1135 * #1136 * #1138 * #1139 * #1140 * #1141 * #1142 * #1143 * #1144 * #1145 * #1146 * #1147 * #1148 * #1149 * #1151 * #1152 * #1153 * #1154 * #1155 * #1156 * #1157 * #1158 * #1160 * #1161 * #1162 * #1163 * #1164 * #1165 * #1166 * #1167 * #1168 * #1169 * #1170 * #1171 * #1172 * #1173 * #1174 * #1175 * #1177 * #1178 * #1180 * #1181 * #1182 * #1183 * #1184 * #1185 * #1187 * #1188 * #1189 * #1190 * #1191 * #1192 * #1193 * #1194 * #1195 * #1196 * #1198 * #1199 * #1200 * #1201 * #1203 * #1204 * #1205 * #1206 * #1207 * #1208 * #1209 * #1210 * #1211 * #1212 * #1213 * #1214 * #1215 * #1216 * #1217 * #1219 * #1220 * #1221 * #1222 * #1223 * #1224 * #1225 * #1226 * #1227 * #1229
In #1112, the Patterns selector was changed to be more consistent with the rest of the UI selection dialogs. However, the core/Selector component used under the hood wasn't ready to handle auto selection. A partial adaptation was made by allowing overriding how it behaves when an option is clicked (see 61b0c0f), but the UI part is being addressed here by
Using a different accent-color for the checkbox.
After a few attemps, @imobachgs and me decided to go for a white accent color by now since it was the less out of line. We tested using the primary color (too dark, a bit confusing), only the border (quite confusing), using a dotted bottom border (it does not provide too much information nowadays, honestly), a solid square (weird). In any case, this is just an starting point, we can improve these details later, when we have time for playing a bit and/or giving love to the whole UI radio/checkbox.
Explicitly adding the "auto selected" text below the checkbox, since a just a different checkbox style (whatever we choose) is not enough for letting the user know that it has been auto selected pattern in a quick way. And no, a tooltip is not a good solution for this use case: it is hidden until the user focus or hover the widget.
The "auto selected" text might looks a bit longer, but honestly "auto" does not provide too much value there: auto what? Maybe we can put it in another place (as a label in the bottom right corner of the item. or in the top left. Whatever. In any case, please accept this change as it is unless you find a very strong stopper. As said above, we can (and should) improve this later, when we can invest the deserved time for this kind of things. And, IMHO, the improvement should start in the back-end by allowing the user to get back to the auto selected state. As it is now is ok (I guess) for YaST user, but it quite confusing. Of course, I know that it isn't something trivial.