UI Design sync between Kompakkt and Semantic Kompakkt #40

lozanaross · 2024-05-14T10:01:35Z

@Grizzly127 to coordinate work with @vmalieske and @NadNo12 that ensures Kompakkt and Semantic Kompakkt use nearly same UI design apart from Wikibase-specific components.

Use existing Google doc and Figma files to track the pages that need UI updates.

Grizzly127 · 2024-05-15T14:11:13Z

Updates for the Explore page:

this is the Explore page for kompakkt:

this for semantic-kompakkt right now:

the "sort by" is missing for semantic kompakkt
remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt
add the New Object and for now for kompakkt also the New Collections button to the navigation bar
the New object button for semantic kompakkt should be blue as well
change the fontsize from the button to 14
if possible change also the search options to font size 14
in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections)
align the search options with the logo at the navigation bar
gap between buttons, history button and "Profile"/"Logout": 8px
(Sorry, my Figma file doesn't show the filter arrow correctly right now, but it stays the same)

@vmalieske @NadNo12

lozanaross · 2024-05-15T14:35:29Z

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate evertything in comments here, or is the google doc already a bit outdated?

vmalieske · 2024-05-26T12:49:26Z

add the New Object and for now for kompakkt also the New Collections button to the navigation bar

When the user is not logged in, there are buttons for Login and Registration. Should these also be removed (since Login and Registration are already in the Navbar)?

- remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt --> VE: Removed login and registration button from actionbar, removed actionbar from home-page - add the New Object and for now for kompakkt also the New Collections button to the navigation bar - change the fontsize from the button to 14 - if possible change also the search options to font size 14 - in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections) - align the search options with the logo at the navigation bar - gap between buttons, history button and "Profile"/"Logout": 8px

vmalieske · 2024-05-26T13:55:17Z

This points are done:

remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt
--> VE: Removed login and registration button from actionbar, removed actionbar from home-page
add the New Object and for now for kompakkt also the New Collections button to the navigation bar
change the fontsize from the button to 14
if possible change also the search options to font size 14
in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections)
align the search options with the logo at the navigation bar
gap between buttons, history button and "Profile"/"Logout": 8px

Changes are within the pull request with the angular-material-upgrade.

Grizzly127 · 2024-05-27T08:19:14Z

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

okay, yes I can do that. For me it's easier to have both next to each other to synchronize it best, but I can split it afterwards, so it's easier for @vmalieske to work on it.

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate everything in comments here, or is the google doc already a bit outdated?

Yes, unfortunately it is outdated now. I can still use it as an orientation and to know which pages to look at, but most of it is outdated and was already somehow updated. At least for the Repo, I didn't look into the viewer yet. But that also means, that there is a lot of work done already.

Grizzly127 · 2024-05-27T08:27:42Z

add the New Object and for now for kompakkt also the New Collections button to the navigation bar

When the user is not logged in, there are buttons for Login and Registration. Should these also be removed (since Login and Registration are already in the Navbar)?

Yes, @vmalieske I would remove them, you're right we already have it in the Navbar.

Grizzly127 · 2024-05-27T11:18:01Z

object options kompakkt

current options:

change the trash bin color to E91E63
make sure the other parameter are correct; font: Open Sans, size: 14px
object title same font and same size. (In kompakkt it was smaller than in semantic kompakkt.) both should also be 14px

@lozanaross @vmalieske

Grizzly127 · 2024-05-27T11:32:40Z

Login and Register at the start page of kompakkt
With the new Navigationbar the Login and Register options and the history button here on the start page of kompakkt should also be removed

@vmalieske

Grizzly127 · 2024-05-27T11:56:07Z

Login and Register

Register

The font for the "Cancel" and "Create new account" is wrong, change it to Open Sans
The "Cancel" button is orange, it should be pink: E91E63.
Same with the accent color of the input fields

Login

Login is mostly synchronized, but the "Cancel" button here is black. I think we should use the same on like in the Registration.
Also use pink as the accent color: E91E63.

@lozanaross
Question: I'm not sure with the colors anymore. Did we say we are using pink here and orange for semantic kompakkt or did we say we are using the same color for both?

@vmalieske

lozanaross · 2024-05-28T08:23:18Z

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

okay, yes I can do that. For me it's easier to have both next to each other to synchronize it best, but I can split it afterwards, so it's easier for @vmalieske to work on it.

This will work - thanks!

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate everything in comments here, or is the google doc already a bit outdated?

Yes, unfortunately it is outdated now. I can still use it as an orientation and to know which pages to look at, but most of it is outdated and was already somehow updated. At least for the Repo, I didn't look into the viewer yet. But that also means, that there is a lot of work done already.

OK, that's good news then.

lozanaross · 2024-05-28T08:25:08Z

@lozanaross Question: I'm not sure with the colors anymore. Did we say we are using pink here and orange for semantic kompakkt or did we say we are using the same color for both?

I think we agreed that we'll use same color for both (so pink) when it comes to functional elements. Maybe we can discuss further how to use orange in SK in a way that only concerns the Wikibase metadata that doesn't exist in Kompakkt anyway. But that's a separate task.

@HeyItsBATMAN can you assign this whole issue to @vmalieske so she gets notifications without need to be tagged in every comment.

Object options: - make sure the icons are size 24x24 - font: Open Sans, size: 14 - trash bin color: E91E63 - the title of the object should also be the same font and font size. Fix licence size

Login and Register - Remove Login and Register from actiobar - The font for the "Cancel" and "Create new account" is wrong, change it to Open Sans - The "Cancel" button is orange, it should be pink: E91E63. - Same with the accent color of the input fields - Colors in Login-Dialog

Grizzly127 · 2024-06-06T15:54:20Z

object view option bar

Since we changed the navigation bar, the "History", "New Object" and "New Collection" button can be removed here.
Move everything to the right to make it the same like in semantic kompakkt.
We are using an "Annotate" button in semantic kompakkt, so replace the Annotate icon with the button.
change the color to blue for the "Annotate" and the "Publish" button. Colorcode: 00AFE7
make sure the font of the buttons is Open Sans and size 14px.
I'm not sure about this icon: , it says "Use this object in a collection", I think it means to use it in an already existing collection. Is that option also possible in the "New Collection" button or can we integrate that there or should we keep the icon here? @lozanaross
The three icons under the picture description also are integrated in the option bar now to make it similar to semantic kompakkt.
Align the navigation bar and the option bar (both with 24px gap from the right)
gap between the icons: 16px, the rest stays 8px.

new:

vmalieske · 2024-06-10T06:34:31Z

To point 3 (Annotate-Button): How should the disabled button look like? At the moment, it is just grey:

And should there be a tooltip for that button? At the moment, there is a tooltip when disabled (You are not allowed to annotate right now) and no tooltip when enabled.

Grizzly127 · 2024-06-12T13:37:20Z

Upload process

Change the color of the "Reset" button here in kompakkt to the pink color
And in previous versions sometimes there was a wrong font used (Helvetica Neue I think), I am not sure about the current font, it is not clear to me right now. But make sure for the buttons and for the text that Open Sans is used.

in kompakkt you can also see the annotation icon here, since you can't annotate here, we should remove it

The matadata formula looks very different, but I think this also belongs to the discussion of #42 first.

something is wrong here at kompakkt at the Finlize site for the settings:

- gap between the icons: 16px, the rest stays 8px. - Since we changed the navigation bar, the "History", "New Object" and "New Collection" button can be removed here. - Move everything to the right to make it the same like in semantic kompakkt. - change the color to blue for the "Annotate" and the "Publish" button. Colorcode: 00AFE7 - make sure the font of the buttons is Open Sans and size 14px. - We are using an "Annotate" button in semantic kompakkt, so replace the Annotate icon with the button. - The three icons under the picture description also are integrated in the option bar now to make it similar to semantic kompakkt. - Align the navigation bar and the option bar (both with 24px gap from the right)

lozanaross · 2024-06-17T14:36:09Z

Thanks for summarising the next set of issues here @Grizzly127

Regarding your question:

I'm not sure about this icon: image , it says "Use this object in a collection", I think it means to use it in an already existing collection. Is that option also possible in the "New Collection" button or can we integrate that there or should we keep the icon here? @lozanaross

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Also I just noticed I don't think we have an issue dedicated to the institutional page, only to its mobile version, maybe worth making.

lozanaross · 2024-06-17T14:41:06Z

To point 3 (Annotate-Button): How should the disabled button look like? At the moment, it is just grey:

And should there be a tooltip for that button? At the moment, there is a tooltip when disabled (You are not allowed to annotate right now) and no tooltip when enabled.

Thanks for the question @vmalieske - I think we don't need a tooltip when the button is active, it's self-explanatory. But I wonder why would we show it disabled. I think if the user doesn't have privileges to edit an object, the button should simply not be there? And it could appear when the user does have the rights.

Or what do you think @HeyItsBATMAN @ZetOE @Grizzly127

Alternatively, if the annotate button is showed grey, we should align the tooltip across both versions - currently in SK, it says: "Only the object owner is allowed to annotate this object." I don't think this is great, but neither is the Kompakkt version, we need some text to indicate that you can't annotate right now, but maybe you could if you add to collection. So perhaps we change the text in both versions to: "Add object to collection to be able to annotate"

HeyItsBATMAN · 2024-06-17T17:47:52Z

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated.

So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

Grizzly127 · 2024-06-18T10:45:05Z

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

vmalieske · 2024-06-19T11:25:08Z

@HeyItsBATMAN Could you have a look at the last commit? Just the code of actionbar. I had to rewrite the metadata-functionality (switch the icons from detail-page to actionbar) and want to be sure that it's okay.

vmalieske · 2024-06-19T11:45:27Z

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

And then another small option-window for the existing collections?

lozanaross · 2024-06-19T12:51:49Z

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

@Grizzly127 do you think we should move some buttons to the left? now all buttons are bundled on the right and maybe it's becoming a bit heavy (visually) how about if we move Publish & Annotate to the left (and then these buttons are not visible anyway when another user (not the object owner) opens an object.

And maybe the [+] button is after the edit button, because then Add, Embed, etc, are always visible, whereas Edit disappears when you're not logged in, or when you're not the owner.

lozanaross · 2024-06-19T12:59:01Z

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated.

So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

Maybe we can keep the Annotate button when an object is already inside a collection - @Grizzly127 do you want to work on a mockup of how this would look? it could just be the same button, but maybe there's also a special prompt once a user adds something in a collection in order to highlight the possibility for annotation a bit more.

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

Yes, I think the owner / uploader of an object should always see the Annotate button.

vmalieske · 2024-06-20T14:56:24Z

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

That could be looked like this:

vmalieske · 2024-06-20T15:18:49Z

All design changes up to this point are in the pull request (forgot to mention the issue here).
Except the Annotate-issue, there I will wait for the mockup, right?

Grizzly127 · 2024-06-21T15:18:43Z

@Grizzly127 do you think we should move some buttons to the left? now all buttons are bundled on the right and maybe it's becoming a bit heavy (visually) how about if we move Publish & Annotate to the left (and then these buttons are not visible anyway when another user (not the object owner) opens an object.

And maybe the [+] button is after the edit button, because then Add, Embed, etc, are always visible, whereas Edit disappears when you're not logged in, or when you're not the owner.

Yes, we can change the edit and the [+] button, that makes sense. This is how it would look like to have the Publish and annotate on the left , but I think for me it was also okay to have all the functions in one place on the right.

@lozanaross

Grizzly127 · 2024-06-21T15:22:20Z

That could be looked like this:

For me this would be good for now to see the names of the collection where you can add it too, yes!:)
I would just say the option is called: "add to existing collection"

@vmalieske @lozanaross

Grizzly127 · 2024-06-21T15:25:40Z

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated.
So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

Maybe we can keep the Annotate button when an object is already inside a collection - @Grizzly127 do you want to work on a mockup of how this would look? it could just be the same button, but maybe there's also a special prompt once a user adds something in a collection in order to highlight the possibility for annotation a bit more.

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

Yes, I think the owner / uploader of an object should always see the Annotate button.

I don't know exactly what you mean here. Should I do a mock-up without the Annotate-button or a different kind of Annotate-button? Can you explain this issue again, please?

@HeyItsBATMAN @lozanaross

lozanaross · 2024-07-16T15:47:54Z

Yes, we can change the edit and the [+] button, that makes sense. This is how it would look like to have the Publish and annotate on the left , but I think for me it was also okay to have all the functions in one place on the right.

Thanks @Grizzly127 - agreed - Publish + Annotate buttons look not too bad on the left, but they can also stay in one place on the right. Please proceed with whichever version you prefer.

lozanaross · 2024-07-16T15:48:33Z

For me this would be good for now to see the names of the collection where you can add it too, yes!:) I would just say the option is called: "add to existing collection"

@Grizzly127 @vmalieske Yes, I also agree

lozanaross · 2024-07-16T15:49:56Z

I don't know exactly what you mean here. Should I do a mock-up without the Annotate-button or a different kind of Annotate-button? Can you explain this issue again, please?

@vmalieske @Grizzly127 @HeyItsBATMAN

As discussed today, let's keep Annotate button always visible for owners of objects and when the object is already inside a collection. When the object is not in a collection and the user is not the owner, they should see a grey button with a tooltip over the button that says: "To be able to annotate, add this object to one of your collections."

Grizzly127 · 2024-07-23T10:23:31Z

Thanks @Grizzly127 - agreed - Publish + Annotate buttons look not too bad on the left, but they can also stay in one place on the right. Please proceed with whichever version you prefer.

Since the amount of buttons on the right, change sometimes when you are able to edit or not. Maybe it's better to put the Publish and Annotate button on the left

As discussed today, let's keep Annotate button always visible for owners of objects and when the object is already inside a collection. When the object is not in a collection and the user is not the owner, they should see a grey button with a tooltip over the button that says: "To be able to annotate, add this object to one of your collections."

I'm not sure about the size of the tooltip, what do you think?

@vmalieske @lozanaross

Grizzly127 · 2024-07-23T10:55:31Z

Visibility Settings

These are the current settings for the visibility of an object in kompakkt

Change the order of "Submit" and "Cancel" button
Change the colors of the buttons
make the you in "Only you can see this object" bold.

In semantic kompakkt only the buttons need to be changed, then it is already the same.
What do you think about making it look cleaner already?
For example:

@vmalieske @lozanaross

First changes from Kompakkt#40

@15

* Broken state, with the following migration steps: ```bash npm i --lockfile-version 3 --frozen-lockfile ng update @angular/{cdk,cli,core,material}@15 ng update @angular/{cdk,cli,core,material}@16 ng update @angular/{cdk,cli,core,material}@17 ng generate @angular/material:mdc-migration ng update @angular/material@17 ncu -u ``` ▸ Remove Browserslist configuration files that matches the Angular CLI default configuration. Migration completed (No changes made). ▸ Remove exported `@angular/platform-server` `renderModule` method. The `renderModule` method is now exported by the Angular CLI. Migration completed (No changes made). ▸ Remove no longer needed require calls in Karma builder main file. Migration completed (No changes made). ▸ Update TypeScript compiler `target` and set `useDefineForClassFields`. These changes are for IDE purposes as TypeScript compiler options `target` and `useDefineForClassFields` are set to `ES2022` and `false` respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. UPDATE tsconfig.json (1550 bytes) Migration completed (1 file modified). ▸ Remove options from 'angular.json' that are no longer supported by the official builders. Migration completed (No changes made). ** Executing migrations of package '@angular/cdk' ** ▸ Updates the Angular CDK to v15. ✓ Updated Angular CDK to version 15 Migration completed (No changes made). ** Executing migrations of package '@angular/core' ** ▸ In Angular version 15, the deprecated `relativeLinkResolution` config parameter of the Router is removed. This migration removes all `relativeLinkResolution` fields from the Router config objects. UPDATE src/app/app-routing.module.ts (2163 bytes) Migration completed (1 file modified). ▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive. This migration replaces all `RouterLinkWithHref` references with `RouterLink`. Migration completed (No changes made). ** Executing migrations of package '@angular/material' ** ▸ Updates the Angular Material to v15. ✓ Updated Angular Material to version 15 ** Executing migrations of package '@angular/cli' ** ▸ Remove 'defaultProject' option from workspace configuration. The project to use will be determined from the current working directory. Migration completed (No changes made). ▸ Replace removed 'defaultCollection' option in workspace configuration with 'schematicCollections'. Migration completed (No changes made). ▸ Update the '@angular-devkit/build-angular:server' builder configuration to disable 'buildOptimizer' for non optimized builds. Migration completed (No changes made). ** Executing migrations of package '@angular/cdk' ** ▸ Updates the Angular CDK to v16. ✓ Updated Angular CDK to version 16 Migration completed (No changes made). ** Executing migrations of package '@angular/core' ** ▸ In Angular version 15.2, the guard and resolver interfaces (CanActivate, Resolve, etc) were deprecated. This migration removes imports and 'implements' clauses that contain them. UPDATE src/app/guards/authenticated.guard.ts (417 bytes) UPDATE src/app/resolvers/profile-page-resolver.ts (684 bytes) Migration completed (2 files modified). ▸ As of Angular v16, the `moduleId` property of `@Component` is deprecated as it no longer has any effect. Migration completed (No changes made). ** Executing migrations of package '@angular/material' ** ▸ Updates the Angular Material to v16. ✓ Updated Angular Material to version 16 Migration completed (No changes made). ** Executing migrations of package '@angular/cli' ** ▸ Replace usages of '@nguniversal/builders' with '@angular-devkit/build-angular'. Migration completed (No changes made). ▸ Replace usages of '@nguniversal/' packages with '@angular/ssr'. Migration completed (No changes made). ▸ Replace deprecated options in 'angular.json'. UPDATE angular.json (3643 bytes) Migration completed (1 file modified). ** Executing migrations of package '@angular/cdk' ** ▸ Updates the Angular CDK to v17. ✓ Updated Angular CDK to version 17 Migration completed (No changes made). ** Executing migrations of package '@angular/core' ** ▸ Angular v17 introduces a new control flow syntax that uses the @ and } characters. This migration replaces the existing usages with their corresponding HTML entities. UPDATE src/app/pages/static-pages/contact/contact.component.html (2021 bytes) UPDATE src/app/pages/static-pages/privacy/privacy.component.html (13002 bytes) UPDATE src/app/pages/static-pages/consortium/consortium.component.html (1491 bytes) Migration completed (3 files modified). ▸ Updates `TransferState`, `makeStateKey`, `StateKey` imports from `@angular/platform-browser` to `@angular/core`. Migration completed (No changes made). ▸ CompilerOption.useJit and CompilerOption.missingTranslation are unused under Ivy. This migration removes their usage Migration completed (No changes made). ** Executing migrations of package '@angular/material' ** ▸ Updates Angular Material to v17. Cannot update to Angular Material v17 because the project is using the legacy Material components that have been deleted. While Angular Material v16 is compatible with Angular v17, it is recommended to switch away from the legacy components as soon as possible because they no longer receive bug fixes, accessibility improvements and new features. Read more about migrating away from legacy components: https://material.angular.io/guide/mdc-migration Files in the project using legacy Material components: - /src/app/app.module.ts - /src/app/components/actionbar/actionbar.component.ts - /src/app/components/auth-dialog/auth-dialog.component.ts - /src/app/components/grid-element/grid-element.component.ts - /src/app/components/metadata/entity/entity.component.ts - /src/app/components/metadata/institution/institution.component.ts - /src/app/components/metadata/person/person.component.ts - /src/app/components/navigation/navbar/navbar.component.ts - /src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts - /src/app/dialogs/edit-entity-dialog/edit-entity-dialog.component.ts - /src/app/dialogs/entity-rights-dialog/entity-rights-dialog.component.ts - /src/app/dialogs/entity-settings-dialog/entity-settings-dialog.component.ts - /src/app/dialogs/explore-compilation-dialog/explore-compilation-dialog.component.ts - /src/app/dialogs/explore-entity/explore-entity-dialog.component.ts - /src/app/dialogs/forgot-password-dialog/forgot-password-dialog.component.ts - /src/app/dialogs/forgot-username-dialog/forgot-username-dialog.component.ts - /src/app/dialogs/group-member-dialog/group-member-dialog.component.ts - /src/app/dialogs/password-protected-dialog/password-protected-dialog.component.ts - /src/app/dialogs/register-dialog/register-dialog.component.ts - /src/app/dialogs/reset-password-dialog/reset-password-dialog.component.ts - /src/app/dialogs/upload-application-dialog/upload-application-dialog.component.ts - /src/app/pages/admin-page/admin-page.component.ts - /src/app/pages/collaborate/collaborate.component.ts - /src/app/pages/explore/explore.component.ts - /src/app/pages/profile-page/profile-page.component.ts - /src/app/services/dialog-helper.service.ts - /src/app/services/progress-bar.service.ts - /src/app/services/query-action.service.ts - /src/app/services/snackbar.service.ts - /src/app/wizards/add-compilation/add-compilation-wizard.component.ts - /src/app/wizards/add-entity/add-entity-wizard.component.ts - /src/app/wizards/add-group-wizard/add-group-wizard.component.ts UPDATE package.json (2569 bytes) ✔ Packages installed successfully. Migration completed (1 file modified). !!!After running 'ng generate @angular/material:mdc-migration'!!! ** Executing migrations of package '@angular/material' ** ▸ Updates Angular Material to v17. ✓ Updated Angular Material to version 17 Migration completed (No changes made). * Broken state, but compiles, with the following changes: - downgraded bson to 4.7.2 - moved from angular "browser"-builder to "application"-builder - used newer syntax to define angular material theme - adjusted some style imports * Update to Angular 17.3, migrate to standalone components & new control flow syntax * Run Control Flow Migration: `ng g @angular/core:control-flow` * Run Standalone Migration: `ng generate @angular/core:standalone` * Update `tsconfig.json` and `angular.json` to match more closely to Angular 17 examples * Update browserlist and move it to `package.json` * Remove `src/common` folder and instead include `kompakkt-common` as a github dependency * Compiling, but broken Angular Material * Fix Angular Material Styles * Fix AM Styles Part 2 - Add fixes for Angular Material issues with explore entity/compilation styles - Delete own comments * Style Changes #40 - remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt --> VE: Removed login and registration button from actionbar, removed actionbar from home-page - add the New Object and for now for kompakkt also the New Collections button to the navigation bar - change the fontsize from the button to 14 - if possible change also the search options to font size 14 - in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections) - align the search options with the logo at the navigation bar - gap between buttons, history button and "Profile"/"Logout": 8px * UI Design #40 Object options: - make sure the icons are size 24x24 - font: Open Sans, size: 14 - trash bin color: E91E63 - the title of the object should also be the same font and font size. Fix licence size * UI Design #40 Login and Register - Remove Login and Register from actiobar - The font for the "Cancel" and "Create new account" is wrong, change it to Open Sans - The "Cancel" button is orange, it should be pink: E91E63. - Same with the accent color of the input fields - Colors in Login-Dialog * UI Design: object view bar #40 - gap between the icons: 16px, the rest stays 8px. - Since we changed the navigation bar, the "History", "New Object" and "New Collection" button can be removed here. - Move everything to the right to make it the same like in semantic kompakkt. - change the color to blue for the "Annotate" and the "Publish" button. Colorcode: 00AFE7 - make sure the font of the buttons is Open Sans and size 14px. - We are using an "Annotate" button in semantic kompakkt, so replace the Annotate icon with the button. - The three icons under the picture description also are integrated in the option bar now to make it similar to semantic kompakkt. - Align the navigation bar and the option bar (both with 24px gap from the right) * UI Design: Upload Process + Object view Upload Process: - Change the color of the "Reset" button here in kompakkt to the pink color, right font for whole overlay - fix text in finalize-settings Object view: - icon for collection-choice - nested menu for existing collections * Change text of actionbar * Update to Angular 18.1 --------- Co-authored-by: vmalieske <[email protected]>

HeyItsBATMAN assigned vmalieske May 28, 2024

vmalieske added a commit to vmalieske/Repo that referenced this issue Aug 1, 2024

Update Visibility Settings

94bc835

First changes from Kompakkt#40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Design sync between Kompakkt and Semantic Kompakkt #40

UI Design sync between Kompakkt and Semantic Kompakkt #40

lozanaross commented May 14, 2024

Grizzly127 commented May 15, 2024 •

edited

Loading

lozanaross commented May 15, 2024

vmalieske commented May 26, 2024

vmalieske commented May 26, 2024

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024 •

edited

Loading

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024

lozanaross commented May 28, 2024

lozanaross commented May 28, 2024

Grizzly127 commented Jun 6, 2024 •

edited

Loading

vmalieske commented Jun 10, 2024 •

edited

Loading

Grizzly127 commented Jun 12, 2024

lozanaross commented Jun 17, 2024

lozanaross commented Jun 17, 2024

HeyItsBATMAN commented Jun 17, 2024

Grizzly127 commented Jun 18, 2024

vmalieske commented Jun 19, 2024 •

edited

Loading

vmalieske commented Jun 19, 2024

lozanaross commented Jun 19, 2024 •

edited

Loading

lozanaross commented Jun 19, 2024

vmalieske commented Jun 20, 2024

vmalieske commented Jun 20, 2024

Grizzly127 commented Jun 21, 2024

Grizzly127 commented Jun 21, 2024

Grizzly127 commented Jun 21, 2024

lozanaross commented Jul 16, 2024

lozanaross commented Jul 16, 2024 •

edited

Loading

lozanaross commented Jul 16, 2024 •

edited

Loading

Grizzly127 commented Jul 23, 2024

Grizzly127 commented Jul 23, 2024 •

edited by vmalieske

Loading

UI Design sync between Kompakkt and Semantic Kompakkt #40

UI Design sync between Kompakkt and Semantic Kompakkt #40

Comments

lozanaross commented May 14, 2024

Grizzly127 commented May 15, 2024 • edited Loading

Updates for the Explore page:

lozanaross commented May 15, 2024

vmalieske commented May 26, 2024

vmalieske commented May 26, 2024

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024 • edited Loading

object options kompakkt

Grizzly127 commented May 27, 2024

Grizzly127 commented May 27, 2024

Login and Register

lozanaross commented May 28, 2024

lozanaross commented May 28, 2024

Grizzly127 commented Jun 6, 2024 • edited Loading

object view option bar

vmalieske commented Jun 10, 2024 • edited Loading

Grizzly127 commented Jun 12, 2024

Upload process

lozanaross commented Jun 17, 2024

lozanaross commented Jun 17, 2024

HeyItsBATMAN commented Jun 17, 2024

Grizzly127 commented Jun 18, 2024

vmalieske commented Jun 19, 2024 • edited Loading

vmalieske commented Jun 19, 2024

lozanaross commented Jun 19, 2024 • edited Loading

lozanaross commented Jun 19, 2024

vmalieske commented Jun 20, 2024

vmalieske commented Jun 20, 2024

Grizzly127 commented Jun 21, 2024

Grizzly127 commented Jun 21, 2024

Grizzly127 commented Jun 21, 2024

lozanaross commented Jul 16, 2024

lozanaross commented Jul 16, 2024 • edited Loading

lozanaross commented Jul 16, 2024 • edited Loading

Grizzly127 commented Jul 23, 2024

Grizzly127 commented Jul 23, 2024 • edited by vmalieske Loading

Visibility Settings

Grizzly127 commented May 15, 2024 •

edited

Loading

Grizzly127 commented May 27, 2024 •

edited

Loading

Grizzly127 commented Jun 6, 2024 •

edited

Loading

vmalieske commented Jun 10, 2024 •

edited

Loading

vmalieske commented Jun 19, 2024 •

edited

Loading

lozanaross commented Jun 19, 2024 •

edited

Loading

lozanaross commented Jul 16, 2024 •

edited

Loading

lozanaross commented Jul 16, 2024 •

edited

Loading

Grizzly127 commented Jul 23, 2024 •

edited by vmalieske

Loading