src_js/iconolab-bundle/src/components/editor/Canvas.vue
changeset 444 d57f95ee9115
parent 437 0aa597a588c1
child 449 04ac84f80eb3
equal deleted inserted replaced
443:fb9bf3f479f1 444:d57f95ee9115
    58             </svg>
    58             </svg>
    59         </div>
    59         </div>
    60         <div class="controls" v-show="loaded">
    60         <div class="controls" v-show="loaded">
    61             <div class="controls-left">
    61             <div class="controls-left">
    62                 <button @click="toggleReadonly" type="button" class="btn"
    62                 <button @click="toggleReadonly" type="button" class="btn"
    63                     v-bind:class="{ 'active': readonly, 'disabled': !isAuthenticated }">
    63                     v-bind:class="{ 'active': readonly }"
       
    64                     v-show="isAuthenticated">
    64                     <i class="fa fa-eye"></i>
    65                     <i class="fa fa-eye"></i>
    65                 </button>
    66                 </button>
    66                 <button @click="toggleReadonly" type="button" class="btn"
    67                 <button @click="toggleReadonly" type="button" class="btn"
    67                     v-bind:class="{ 'disabled': !isAuthenticated }">
    68                     v-show="isAuthenticated">
    68                     <i v-show="readonly" class="fa fa-toggle-on" style="transform: rotate(180deg)"></i>
    69                     <i v-show="readonly" class="fa fa-toggle-on" style="transform: rotate(180deg)"></i>
    69                     <i v-show="!readonly" class="fa fa-toggle-on"></i>
    70                     <i v-show="!readonly" class="fa fa-toggle-on"></i>
    70                 </button>
    71                 </button>
    71                 <button @click="setMode('rect')" type="button" class="btn"
    72                 <button @click="setMode('rect')" type="button" class="btn"
    72                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'rect', 'disabled': readonly }">
    73                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'rect', 'disabled': readonly }"
       
    74                     v-show="isAuthenticated">
    73                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
    75                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
    74                 </button>
    76                 </button>
    75                 <button @click="setMode('free')" type="button" class="btn"
    77                 <button @click="setMode('free')" type="button" class="btn"
    76                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'free', 'disabled': readonly }">
    78                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'free', 'disabled': readonly }"
       
    79                     v-show="isAuthenticated">
    77                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403    c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069    c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604    c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069    c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3    S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395    c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
    80                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403    c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069    c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604    c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069    c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3    S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395    c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
    78                 </button>
    81                 </button>
       
    82                 <a class="btn" v-bind:href="loginUrl" v-show="!isAuthenticated">
       
    83                     <i class="fa fa-sign-in"></i> <small>Connexion</small>
       
    84                 </a>
    79             </div>
    85             </div>
    80             <zoom-thumbnail
    86             <zoom-thumbnail
    81                 class="controls-center"
    87                 class="controls-center"
    82                 ref="thumbnail"
    88                 ref="thumbnail"
    83                 @change="changeViewBox($event)"
    89                 @change="changeViewBox($event)"
   128                 default: false
   134                 default: false
   129             },
   135             },
   130             annotations: {
   136             annotations: {
   131                 type: Array,
   137                 type: Array,
   132                 default: []
   138                 default: []
   133             }
   139             },
       
   140             loginUrl: String
   134         },
   141         },
   135         components: {
   142         components: {
   136             shapeRect: ShapeRect,
   143             shapeRect: ShapeRect,
   137             shapeFree: ShapeFree,
   144             shapeFree: ShapeFree,
   138             zoomThumbnail: ZoomThumbnail,
   145             zoomThumbnail: ZoomThumbnail,