allusion-app / allusion Goto Github PK
View Code? Open in Web Editor NEWA free and open source desktop application for managing your visual library
License: GNU General Public License v3.0
A free and open source desktop application for managing your visual library
License: GNU General Public License v3.0
I noticed in #58 the delete function now has a nice layover. However i dont see the delete button no more in the toolbar, also dont see anything about that being removed from the toolbar?
I notice when your in slide view and click on the image, the first image gets selected in from the list. This also causes for a weird glitch when cycling through the image. Instead of showing the next image, its will show the second image from the grid view. Also the inspector will show the wrong image when selecting an image in slide view.
See below screengrab and below that the total images of this range. Notice that each time i click the first image show in the inspector. The soft image glitch is not visible in this screengrab, however you can see that its reset to the first image when something is selected
I noticed that when you delete a search query from either quick search or advanced/extended search, it breaks functionality. Say you search for a tag and then delete it from quick search using the small X, then it doesnt work anymore.
Things is, it doesnt happen consistent. It happened now twice and have not figured out how to replicate it each time.
Like in the mockups
These lines usually produce crashes at some point.
The bug is so annoying because it is sometimes unproducible. The tracebacks that I've got, suggest that the actual problematic line is another one.
The array is at some point filled with undefined objects due to a bug in mobx or somwhere else. I will leave this issue as a reminder.
It would be nice to sort images in the main view based on when they were added to the library, created, modified, or based on their name, size, etc.
Different keyboards require different shortcuts
Also add more documentation in comments
I think when selecting images, the function "replace query" should disabled. When you perform this action while having images selected in the content area it results in a crash 100%.
This is the output
Cannot read property 'path' of undefined at Array.forEach (<anonymous>)
Here is a blogpost of someone who had the same issue, and compared several libraries like Brick.js for React but eventually made something by themselves: https://hackernoon.com/masonry-in-react-a-performance-hell-fb779f5fcebd
We could try out the one they developed, but we also should compare the performance with alternatives ourselves
I was looking at the branch sorting and after that i suddenly got many errors about imports using double quotes instead of single quote in all blueprintjs files??? After a restart that was gone.
But now i get a missing blueprintjs/core link, not sure what happened there though?
The purpose of the following list is to keep track of tasks to be worked on by the design team. This includes tweaks on the UI as well as other project related tasks such as the website or the documentation. Change and extend the list as needed.
Design Todo List
Instead of renaming
Log messages are not shown or stored anywhere in the released version.
A library like this stores all messages in a log file:
https://www.npmjs.com/package/electron-log
When a tag is added to the file, every file with this tag is removed from the list. The biggest problem is that I cannot add the files again since they already exist in the database. Even though they are fetched they cannot be displayed and mbox keeps throwing exceptions.
We currently consider having three layouts: Grid, masonry and a list view
Edit: And a Present/Slideshow view
I see that when using date as search query it has wrong function method. Should date show something before and after?
I think current ones are a bit confusing in this context. But i just noticed Adobe Bridge, for instance, uses this same principle. Should we keep this method or think of more meaning methods?
I just tried the branch #77 Drag-drop-import and i noticed when dragging a tag i also get the menu. I just wanted to check if this is a known issue.
We talked about perhaps adding a background tint or outline color to items for active state. This is the function like in a browser when the users switch input by hitting the tab key. In browser a highlight border appears.
This issue kind arose when we discussed the preview window issue appeard in issue #67. However im not sure we should use this. Because currently hitting tab doesnt do really much. You need to hit tab many times when eventually something will happen. For instance when we have the select function active in the toolbar and we hit tab 1 time, nothing actually happens. After hitting tab many times suddenly we see some movement in the inspector window and eventually the tag panel gets highlighted. Than after many more presses the tag hierarchy on left starts to move.
Currently i dont see any function for this tab method for switching input. Perhaps not everything is added to some sort of tab index.
Also im not sure how we can style it properly. In the current layout there are a couple items which have the active state, so they are highlighted. Perhaps i need to check BluePrintJS again and see how its properly done.
EDIT
I had a quick look at Blueprintjs, it looks like they add aria for this. https://blueprintjs.com/docs/#core/components/tabs
Im not 100% convinced we need this. I mean it sort of represents a browser feel. I taught we were going more for a desktop experience.
Ive attached a screenshot and also tried a screengrab to show the current issue
This issue is also for collecting all issues related to finishing the first Alpha version. For reference see the document here. Note that not every point listed is part of this issue as that requires more work and time.
When you want to drag a tag to the top in the tree node and the list is long, this cant be done. The issue perhaps due to "Add Tag" is always added to the bottom of the list.
A workaround could be, when a tag collection is selected and a tag is added, this tag is added to the selected tag collection. When no selection is made perhaps a move function could help.
Im not sure why dragging doesnt scroll the actually. In Chrome this does work and since this uses Chrome as a core i would expect the same behavior.
It does work when you drag an image from the content area around. So it seems the custom drag action is preventing this behavior.
React Hooks are stable since the release of React 16.8 and mobx-react-lite depends on hooks.
I noticed the new zoom in/out functions in the file menu system. However they dont always react properly for me on OSX. Also cmd + doesnt zoom on my end, i need to press cmd shift + in order to get it working. However cmd - does work. Sometimes it doesn do anything and also the menu items dont respond? Cant figure out whats wrong there though.
By dragging the borders
While I was looking at some guide I discovered the toLocaleString method on Date. It is pretty neat since it takes care of padding and can detect the locale of my system. There is even the more efficient Int.DateTimeFormat type for formatting many dates.
The code would replace formatDate in the FileInfo/ImageInfo component.
// Setting undefined will look up the system locale
const formatter= new Intl.DateTimeFormat(undefined, {
timeZone: 'UTC',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
...
const date = new Date(Date.UTC(2019, 11, 3, 3, 0, 0));
console.log(formatter.format(date));
// Output on German System: 03.11.2019, 03:00
However, I find the comma pretty ugly which is why this could be changed a little bit.
// see above code...
const formatDateTime = (d: Date) => {
return formatter.formatToParts(d).map(({type, value}) => {
if (type === 'literal' && value === ', ') {
return ' ';
}
return value;
}).reduce((string, part) => string + part);
};
console.log(formatDateTime(date));
// Output on German System: 03.11.2019 03:00
I noticed today testing dual display setup, that the preview window opens quite narrow. Its looks like the code also add the second screen in the width, not sure why because code has primDisplay? But perhaps its something else, because if the screen was also used for the width, than the window should be wider actually. I think a different approach needs to be done. Perhaps width should be done like widthScale = verticalScale something like this. not sure if this is possible. At home on a single display i dont get this narrow screen. There my display is 1440x900 Retina, the resolution is 2880x1800 actual pixels.
My displays are screen 1= 2560x1440 and screen 2 =1920x1080.
The order of tags is currently controlled by the way they are defined in the database. It would be nice to order them manually using drag & drop.
Related to #3 since ordering folders in the hierarchy should also be possible
I noticed that some lighter Hue's will show white text. It basically should show dark text perhaps when the slider is moved over the top part of the color picker part. But perhaps that will cause issues with darker hues like red, purple, dark blue. Basically, the left part of the hue slider should show dark text and the right part should show white.
Here you see an example of the left part of the hue slider. These lighter hue will show white text
Could be either done through drag & drop or by selecting files and then clicking on a tag to assign it to them
In the toolbar, the icon delete is disabled when nothing is selecting in the content area. How the button still runs the function when its clicked. Perhaps its still in development, but i look at the code and it should not do that. My guess is that how the menu item is built. Basically, its because the button has a span inside which contains a SVG icon. I noticed when the icon is deleted the button is really disabled when no selection is made.
In the Blueprintjs manual/code it shows a ::before or ::after for icons. But i guess this is because we have custom icons maybe?
But on this page the buttons are build like we have, but there a disabled button is really disabled.
But for tags when its disabled it does work, so i guess something in the function is correct? When i look at the HTML code it does show 'disabled' properly.
Perhaps its because the function which checks if something is selected or not is still being run even while the button is disabled.
Right now the user can press enter and have a new empty tag. I've made some changes but I wanted to push #8 before. Also I'm unsure if I should alert as notification.
@action
addTag(tagName: string) {
if (tagName && tagName.length > 0) {
const tag = new ClientTag(this, tagName);
this.tagList.push(tag);
this.backend.createTag(tag.id, tag.name, tag.description);
} else {
alert('Tag name cannot be empty!');
}
}
I noticed when you have made a selection using the select button in the tool buttons. When you close the preview window using space it also deselect the images, than on the next press an empty preview window opens and on the third press they all get selected again and will show.
Not sure this is a real bug or anything that could be worked around. Using ESC wont show this behavior. Its just due to space also will active/deactive a bool menu item. Im not sure why they get selected again while it looks like the button isnt highlighted. Perhaps this is a BluePrint thing.
I jsut noticed in the latest master branch than sometimes when using the arrow buttons at the top the image seems to be stuck. I believe it happens when you use overview, highlight an image, then return to big view. Then the arrow buttons tend show some kind of glitch. You can scroll through the images using the arrow buttons. Using left and right buttons still work.
I think this is caused by the highlight function, this was added so that after returning from overview and an image was highlighted. That image will become the active viewed image. My guess the arrow buttons looks at some kind of index and isnt updated properly.
Writing tests would be useful to avoid issues like #14 but it does introduce some additional work.
At the start of projects, testing is often a hassle since many features are being added and changed. I think it would be a good practice though to at least get familiar with how it works, since you can learn how to write code that is more easily tested later on.
Jest is a popular testing framework for JavaScript, and also has some guidelines for how to test React components.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.