Project

General

Profile

« Previous | Next » 

Revision 60516

Added by Konstantinos Triantafyllou almost 4 years ago

[Library | Trunk]: 1. Change curator service. 2. Add icons preview

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/connect/curators/curator.service.ts
11 11 
  constructor(private http: HttpClient) {
12 12 
  }
13 13 

  		




  14
  
  
    
  public getCurators(properties: EnvProperties, emails: string): Observable<Curator[]> {


  		




  15
  
  
    
    let url: string = properties.adminToolsAPIURL + '/curator?emails='+emails;


  		




  
  14
  
    
  public getCurators(properties: EnvProperties, communityId: string): Observable<Curator[]> {


  		




  
  15
  
    
    let url: string = properties.adminToolsAPIURL + '/' + communityId + '/curator';


  		




  16
  16
  
    
    return this.http.get<Curator[]>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url);


  		




  17
  17
  
    
  }


  		




  18
  18
  
    

  		




  19
  19
  
    
  public updateCurator(properties: EnvProperties, curator: Curator) {


  		




  20
  20
  
    
    let url: string = properties.adminToolsAPIURL + "curator";


  		




  21
  
  
    
    return this.http.post<Curator>(url, curator, CustomOptions.getAuthOptions());


  		




  
  21
  
    
    return this.http.post<Curator>(url, curator, CustomOptions.registryOptions());


  		




  22
  22
  
    
  }


  		




  23
  23
  
    

  		




  24
  
  
    
  public getCurator(properties: EnvProperties, curatorId: string): Observable<Curator> {


  		




  25
  
  
    
    let url: string = properties.adminToolsAPIURL + 'curator/'+curatorId;


  		




  26
  
  
    
    return this.http.get<Curator>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url);


  		




  
  24
  
    
  public getCurator(properties: EnvProperties): Observable<Curator> {


  		




  
  25
  
    
    let url: string = properties.adminToolsAPIURL + 'curator';


  		




  
  26
  
    
    return this.http.get<Curator>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url, CustomOptions.registryOptions());


  		




  27
  27
  
    
  }


  		




  28
  28
  
    

  		




  29
  29
  
    
}


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/icons/icons.ts
    
  





  50
  50
  
    

  		




  51
  51
  
    
export const remove: Icon = {


  		




  52
  52
  
    
  name: 'remove',


  		




  53
  
  
    
  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>'


  		




  
  53
  
    
  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 9.91 11.01"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8.83,1.85V9.41A1.58,1.58,0,0,1,7.26,11H2.62a1.6,1.6,0,0,1-1.57-1.6V1.85H.28A.26.26,0,0,1,0,1.57.27.27,0,0,1,.28,1.3H2.59v-1A.26.26,0,0,1,2.87,0H7a.28.28,0,0,1,.27.28v1H9.63a.28.28,0,0,1,.28.27.3.3,0,0,1-.28.28Zm-7.23,0V9.41a1,1,0,0,0,1,1.05H7.26a1,1,0,0,0,1-1.05V1.85ZM6.76,1.3V.55H3.15V1.3Z"/><path class="cls-1" d="M3.06,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M6.29,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M4.66,3.73a.3.3,0,0,1,.28-.28.29.29,0,0,1,.28.28V8.58a.29.29,0,0,1-.28.28.3.3,0,0,1-.28-.28Z"/></g></g></svg>'


  		




  54
  54
  
    
}


  		




  55
  55
  
    

  		




  56
  56
  
    
export const preview: Icon = {


  		




  ......




  126
  126
  
    
  name: 'photo',


  		




  127
  127
  
    
  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>'


  		




  128
  128
  
    
}


  		




  
  129
  
    
/** Add new icon under this line to be sure that it will be added on preview */


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/icons/icons-preview/icons-preview.component.ts
    
  





  
  1
  
    
import {Component} from "@angular/core";


  		




  
  2
  
    

  		




  
  3
  
    
@Component({


  		




  
  4
  
    
  selector: 'icons-preview',


  		




  
  5
  
    
  template: `


  		




  
  6
  
    
    <div class="uk-section uk-container uk-container-large" style="font-size: 14px;">


  		




  
  7
  
    
      <h4 class="uk-text-bold">Icons</h4>


  		




  
  8
  
    
      <div class="uk-grid uk-grid-small uk-child-width-1-6" uk-grid>


  		




  
  9
  
    
        <div class="uk-text-center">


  		




  
  10
  
    
          <icon name="arrow_left"></icon>


  		




  
  11
  
    
          <div class="uk-text-bold uk-margin-small-top">arrow_left</div>


  		




  
  12
  
    
        </div>


  		




  
  13
  
    
        <div class="uk-text-center">


  		




  
  14
  
    
          <icon name="arrow_right"></icon>


  		




  
  15
  
    
          <div class="uk-text-bold uk-margin-small-top">arrow_right</div>


  		




  
  16
  
    
        </div>


  		




  
  17
  
    
        <div class="uk-text-center">


  		




  
  18
  
    
          <icon name="arrow_up"></icon>


  		




  
  19
  
    
          <div class="uk-text-bold uk-margin-small-top">arrow_up</div>


  		




  
  20
  
    
        </div>


  		




  
  21
  
    
        <div class="uk-text-center">


  		




  
  22
  
    
          <icon name="arrow_down"></icon>


  		




  
  23
  
    
          <div class="uk-text-bold uk-margin-small-top">arrow_down</div>


  		




  
  24
  
    
        </div>


  		




  
  25
  
    
        <div class="uk-text-center">


  		




  
  26
  
    
          <icon name="book"></icon>


  		




  
  27
  
    
          <div class="uk-text-bold uk-margin-small-top">book</div>


  		




  
  28
  
    
        </div>


  		




  
  29
  
    
        <div class="uk-text-center">


  		




  
  30
  
    
          <icon name="database"></icon>


  		




  
  31
  
    
          <div class="uk-text-bold uk-margin-small-top">database</div>


  		




  
  32
  
    
        </div>


  		




  
  33
  
    
        <div class="uk-text-center">


  		




  
  34
  
    
          <icon name="cog"></icon>


  		




  
  35
  
    
          <div class="uk-text-bold uk-margin-small-top">cog</div>


  		




  
  36
  
    
        </div>


  		




  
  37
  
    
        <div class="uk-text-center">


  		




  
  38
  
    
          <icon name="earth"></icon>


  		




  
  39
  
    
          <div class="uk-text-bold uk-margin-small-top">earth</div>


  		




  
  40
  
    
        </div>


  		




  
  41
  
    
        <div class="uk-text-center">


  		




  
  42
  
    
          <icon name="edit"></icon>


  		




  
  43
  
    
          <div class="uk-text-bold uk-margin-small-top">edit</div>


  		




  
  44
  
    
        </div>


  		




  
  45
  
    
        <div class="uk-text-center">


  		




  
  46
  
    
          <icon name="remove"></icon>


  		




  
  47
  
    
          <div class="uk-text-bold uk-margin-small-top">remove</div>


  		




  
  48
  
    
        </div>


  		




  
  49
  
    
        <div class="uk-text-center">


  		




  
  50
  
    
          <icon name="preview"></icon>


  		




  
  51
  
    
          <div class="uk-text-bold uk-margin-small-top">preview</div>


  		




  
  52
  
    
        </div>


  		




  
  53
  
    
        <div class="uk-text-center">


  		




  
  54
  
    
          <icon name="bullet"></icon>


  		




  
  55
  
    
          <div class="uk-text-bold uk-margin-small-top">bullet</div>


  		




  
  56
  
    
        </div>


  		




  
  57
  
    
        <div class="uk-text-center">


  		




  
  58
  
    
          <icon name="remove_circle"></icon>


  		




  
  59
  
    
          <div class="uk-text-bold uk-margin-small-top">remove_circle</div>


  		




  
  60
  
    
        </div>


  		




  
  61
  
    
        <div class="uk-text-center">


  		




  
  62
  
    
          <icon name="remove_circle_outline"></icon>


  		




  
  63
  
    
          <div class="uk-text-bold uk-margin-small-top">remove_circle_outline</div>


  		




  
  64
  
    
        </div>


  		




  
  65
  
    
        <div class="uk-text-center">


  		




  
  66
  
    
          <icon name="person_add"></icon>


  		




  
  67
  
    
          <div class="uk-text-bold uk-margin-small-top">person_add</div>


  		




  
  68
  
    
        </div>


  		




  
  69
  
    
        <div class="uk-text-center">


  		




  
  70
  
    
          <icon name="cloud_upload"></icon>


  		




  
  71
  
    
          <div class="uk-text-bold uk-margin-small-top">cloud_upload</div>


  		




  
  72
  
    
        </div>


  		




  
  73
  
    
        <div class="uk-text-center">


  		




  
  74
  
    
          <icon name="add"></icon>


  		




  
  75
  
    
          <div class="uk-text-bold uk-margin-small-top">add</div>


  		




  
  76
  
    
        </div>


  		




  
  77
  
    
        <div class="uk-text-center">


  		




  
  78
  
    
          <icon name="group"></icon>


  		




  
  79
  
    
          <div class="uk-text-bold uk-margin-small-top">group</div>


  		




  
  80
  
    
        </div>


  		




  
  81
  
    
        <div class="uk-text-center">


  		




  
  82
  
    
          <icon name="lock"></icon>


  		




  
  83
  
    
          <div class="uk-text-bold uk-margin-small-top">lock</div>


  		




  
  84
  
    
        </div>


  		




  
  85
  
    
        <div class="uk-text-center">


  		




  
  86
  
    
          <icon name="search"></icon>


  		




  
  87
  
    
          <div class="uk-text-bold uk-margin-small-top">search</div>


  		




  
  88
  
    
        </div>


  		




  
  89
  
    
        <div class="uk-text-center">


  		




  
  90
  
    
          <icon name="refresh"></icon>


  		




  
  91
  
    
          <div class="uk-text-bold uk-margin-small-top">refresh</div>


  		




  
  92
  
    
        </div>


  		




  
  93
  
    
        <div class="uk-text-center">


  		




  
  94
  
    
          <icon name="close"></icon>


  		




  
  95
  
    
          <div class="uk-text-bold uk-margin-small-top">close</div>


  		




  
  96
  
    
        </div>


  		




  
  97
  
    
        <div class="uk-text-center">


  		




  
  98
  
    
          <icon name="done"></icon>


  		




  
  99
  
    
          <div class="uk-text-bold uk-margin-small-top">done</div>


  		




  
  100
  
    
        </div>


  		




  
  101
  
    
        <div class="uk-text-center">


  		




  
  102
  
    
          <icon name="mail"></icon>


  		




  
  103
  
    
          <div class="uk-text-bold uk-margin-small-top">mail</div>


  		




  
  104
  
    
        </div>


  		




  
  105
  
    
        <div class="uk-text-center">


  		




  
  106
  
    
          <icon name="photo"></icon>


  		




  
  107
  
    
          <div class="uk-text-bold uk-margin-small-top">photo</div>


  		




  
  108
  
    
        </div>


  		




  
  109
  
    
      </div>


  		




  
  110
  
    
      <div class="uk-margin-medium-top">


  		




  
  111
  
    
        <h4 class="uk-text-bold">Usage</h4>


  		




  
  112
  
    
        <ul class="uk-list">


  		




  
  113
  
    
          <li>1. Import IconsModule</li>


  		




  
  114
  
    
          <li>2. Add this to your module with these icons you will need<br>


  		




  
  115
  
    
            <div class="uk-margin-top">


  		




  
  116
  
    
              <pre><code>constructor(private iconsService: IconsService) {{ "{" }}


  		




  
  117
  
    
   this.iconsService.registerIcons([edit]);


  		




  
  118
  
    
{{ "}" }}</code></pre>


  		




  
  119
  
    
            </div>


  		




  
  120
  
    
          </li>


  		




  
  121
  
    
          <li>3. Use an icon with icon tag. Add parameter ratio to scale this icon. Default size 20x20 (ratio: 1)<br>


  		




  
  122
  
    
            <div class="uk-margin-top">


  		




  
  123
  
    
              <pre><code>{{'<'}}icon name="edit"{{'><'}}/icon{{'>'}}</code></pre>


  		




  
  124
  
    
            </div>


  		




  
  125
  
    
          </li>


  		




  
  126
  
    
          <li>4. Add a color class in parent of icon to give your icon a color.<br>


  		




  
  127
  
    
            <div class="uk-margin-top">


  		




  
  128
  
    
              <pre><code>{{'<'}}div class="uk-text-secondary"{{'>'}}


  		




  
  129
  
    
  {{'<'}}icon name="edit"{{'><'}}/icon{{'>'}}


  		




  
  130
  
    
{{'<'}}/div{{'>'}}</code></pre>


  		




  
  131
  
    
            </div>


  		




  
  132
  
    
          </li>


  		




  
  133
  
    
        </ul>


  		




  
  134
  
    
      </div>


  		




  
  135
  
    
      <div class="uk-margin-medium-top">


  		




  
  136
  
    
        <h4 class="uk-text-bold">Add a new icon</h4>


  		




  
  137
  
    
        <ul class="uk-list">


  		




  
  138
  
    
          <li>1. Go to <a href="https://material.io/resources/icons/?style=baseline">Material Icons</a></li>


  		




  
  139
  
    
          <li>2. Find your icon and download it as svg.</li>


  		




  
  140
  
    
          <li>3. Open svg file with an editor and change width and height to 20</li>


  		




  
  141
  
    
          <li>4. Create an entry on icons file with your new icon.</li>


  		




  
  142
  
    
        </ul>


  		




  
  143
  
    
      </div>


  		




  
  144
  
    
    </div>


  		




  
  145
  
    
  `


  		




  
  146
  
    
})


  		




  
  147
  
    
export class IconsPreviewComponent {


  		




  
  148
  
    

  		




  
  149
  
    
}


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/icons/icons-preview/icons-preview.module.ts
    
  





  
  1
  
    
import {NgModule} from "@angular/core";


  		




  
  2
  
    
import {CommonModule} from "@angular/common";


  		




  
  3
  
    
import {RouterModule} from "@angular/router";


  		




  
  4
  
    
import {IconsPreviewComponent} from "./icons-preview.component";


  		




  
  5
  
    
import {IconsService} from "../icons.service";


  		




  
  6
  
    
import {IconsModule} from "../icons.module";


  		




  
  7
  
    
import {


  		




  
  8
  
    
  add,


  		




  
  9
  
    
  arrow_down,


  		




  
  10
  
    
  arrow_left,


  		




  
  11
  
    
  arrow_right,


  		




  
  12
  
    
  arrow_up,


  		




  
  13
  
    
  book, bullet, close, cloud_upload,


  		




  
  14
  
    
  cog,


  		




  
  15
  
    
  database, done,


  		




  
  16
  
    
  earth,


  		




  
  17
  
    
  edit, group, lock, mail, person_add, photo,


  		




  
  18
  
    
  preview, refresh,


  		




  
  19
  
    
  remove, remove_circle, remove_circle_outline, search


  		




  
  20
  
    
} from "../icons";


  		




  
  21
  
    

  		




  
  22
  
    
@NgModule({


  		




  
  23
  
    
  imports: [CommonModule, RouterModule.forChild([


  		




  
  24
  
    
    {path: '', component: IconsPreviewComponent}


  		




  
  25
  
    
  ]), IconsModule],


  		




  
  26
  
    
  declarations: [IconsPreviewComponent],


  		




  
  27
  
    
  exports: [IconsPreviewComponent]


  		




  
  28
  
    
})


  		




  
  29
  
    
export class IconsPreviewModule {


  		




  
  30
  
    
  constructor(private iconsService: IconsService) {


  		




  
  31
  
    
    this.iconsService.registerIcons([arrow_left, arrow_right, arrow_up, arrow_down, book, database, cog, earth, edit,


  		




  
  32
  
    
      remove, preview, bullet, remove_circle, remove_circle_outline, person_add, cloud_upload, add, group, lock, search,


  		




  
  33
  
    
      refresh, close, done, mail, photo


  		




  
  34
  
    
    ])


  		




  
  35
  
    
  }


  		




  
  36
  
    
}


  		












Also available in:  Unified diff