docs(ontology): update docs and show hint in ontology-form (DSP-1139)

docs/user-guide/project.md

@@ -66,7 +66,13 @@ Go to your project, select the tab `Data model` and click on button `New data mo
 > - shouldn't begin with a number
 > - shouldn't begin with the letter v and a number
 > - spaces or special characters are not allowed
-> - the term "ontology" is not allowed
+> - may not contain these reserved words:
+>   - knora
+>   - ontology
+>   - salsah
+>   - shared
+>   - simple
+>   - standoff
 > - the unique name can't be changed afterwards
 
 The label is a combination of project's shortname and the unique name. You can replace with any other string.

src/app/project/ontology/ontology-form/ontology-form.component.html

@@ -4,6 +4,7 @@
         <mat-form-field class="large-field ontology-name">
             <input matInput class="ontology-name" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
                 [placeholder]="'Set a unique name *'">
+            <mat-icon matSuffix [matTooltip]="ontologyNameInfo" matTooltipPosition="above" matTooltipClass="multi-line-tooltip">help</mat-icon>
             <mat-hint *ngIf="formErrors.name" class="medium-field">
                 {{ formErrors.name }}
             </mat-hint>

src/app/project/ontology/ontology-form/ontology-form.component.ts

@@ -86,6 +86,16 @@ export class OntologyFormComponent implements OnInit {
         }
     };
 
+    ontologyNameInfo = `
+    The unique name
+        - must be at least 3 characters long
+        - shouldn't begin with a number
+        - shouldn't begin with the letter v and a number
+        - spaces or special characters are not allowed
+        - may not contain these reserved words: knora, ontology, salsah, shared, simple or standoff
+        - can't be changed afterwards
+    `;
+
     error = false;
 
     constructor(

src/assets/style/_elements.scss

@@ -609,6 +609,17 @@ $gc-small: $form-width - $gc-large - 4;
 
 // --------------------------------------
 
+//
+// tooltip configuration
+
+.multi-line-tooltip {
+  white-space: pre-line;
+  line-height: 1.5;
+  font-size: 12px;
+}
+
+// --------------------------------------
+
 //
 // nested mat-menu switch arrow to the left in case the menu position is on the right hand side
 .switch-nested-menu {