New creation project wizard

Create project wizard layout

Adding is_private attribute on create projects

WIP wizard create project

Wizard create WIP

Wizard create public projects

Add restrictions to create project

Layout for common platforms

remove more info button until UX issue gets resolved

Add to changelog

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Redesign 'Admin > Project > Modules' panel.
 - Add badge to project owners
 - Limit of user per project.
+- Redesign of the create project wizard
 
 ### Misc
 - Lots of small and not so small bugfixes.

app/coffee/modules/base/navurls.coffee

@@ -59,7 +59,7 @@ module.service("$tgNavUrls", NavigationUrlsService)
 ## Navigation Urls Directive
 #############################################################################
 
-NavigationUrlsDirective = ($navurls, $auth, $q, $location) ->
+NavigationUrlsDirective = ($navurls, $auth, $q, $location, lightboxService) ->
     # Example:
     # link(tg-nav="project-backlog:project='sss',")
 
@@ -157,9 +157,11 @@ NavigationUrlsDirective = ($navurls, $auth, $q, $location) ->
                             when 2
                                 window.open fullUrl
 
+                        lightboxService.closeAll()
+
         $scope.$on "$destroy", ->
             $el.off()
 
     return {link: link}
 
-module.directive("tgNav", ["$tgNavUrls", "$tgAuth", "$q", "$tgLocation", NavigationUrlsDirective])
+module.directive("tgNav", ["$tgNavUrls", "$tgAuth", "$q", "$tgLocation", "lightboxService", NavigationUrlsDirective])

app/coffee/modules/projects/create-project-restriction.directive.coffee

@@ -0,0 +1,8 @@
+module = angular.module("taigaProject")
+
+createProjectRestrictionDirective = () ->
+    return {
+        templateUrl: "project/wizard-restrictions.html"
+    }
+
+module.directive('tgCreateProjectRestriction', [createProjectRestrictionDirective])

app/coffee/modules/projects/lightboxes.coffee

@@ -29,12 +29,16 @@ debounce = @.taiga.debounce
 
 module = angular.module("taigaProject")
 
-CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $projectUrl, $loading, lightboxService, $cacheFactory, $translate, currentUserService) ->
+CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $projectUrl, $loading, lightboxService, $cacheFactory, $translate, currentUserService, $auth) ->
     link = ($scope, $el, attrs) ->
         $scope.data = {}
         $scope.templates = []
         currentLoading = null
 
+        $auth.refresh()
+        $scope.canCreatePrivateProjects = currentUserService.canCreatePrivateProjects()
+        $scope.canCreatePublicProjects = currentUserService.canCreatePublicProjects()
+
         form = $el.find("form").checksley({"onlyOneErrorElement": true})
 
         onSuccessSubmit = (response) ->
@@ -58,10 +62,6 @@ CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $project
             selectors = []
             for error_field in _.keys(response)
                 selectors.push("[name=#{error_field}]")
-            $el.find(".active").removeClass("active")
-            error_step = $el.find(selectors.join(",")).first().parents(".wizard-step")
-            error_step.addClass("active")
-            $el.find('.progress-bar').removeClass().addClass('progress-bar').addClass(error_step.data("step"))
 
         submit = (event) =>
             event.preventDefault()
@@ -77,7 +77,9 @@ CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $project
             promise.then(onSuccessSubmit, onErrorSubmit)
 
         openLightbox = ->
-            $scope.data = {}
+            $scope.data = {
+                is_private: false
+            }
 
             if !$scope.templates.length
                 $rs.projects.templates().then (result) =>
@@ -86,40 +88,7 @@ CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $project
             else
                 $scope.data.creation_template = _.head(_.filter($scope.templates, (x) -> x.slug == "scrum")).id
 
-            $el.find(".active").removeClass("active")
-            $el.find(".create-step1").addClass("active")
-
             lightboxService.open($el)
-            timeout 600, ->
-                $el.find(".progress-bar").addClass('step1')
-
-        $el.on "click", ".button-next", (event) ->
-            event.preventDefault()
-
-            current = $el.find(".active")
-
-            valid = true
-            for field in form.fields
-                if current.find("[name=#{field.element.attr('name')}]").length
-                    valid = field.validate() != false and valid
-
-            if not valid
-                return
-
-            next = current.next()
-            current.toggleClass('active')
-            next.toggleClass('active')
-            step = next.data('step')
-            $el.find('.progress-bar').removeClass().addClass('progress-bar').addClass(step)
-
-        $el.on "click", ".button-prev", (event) ->
-            event.preventDefault()
-            current = $el.find(".active")
-            prev = current.prev()
-            current.toggleClass('active')
-            prev.toggleClass('active')
-            step = prev.data('step')
-            $el.find('.progress-bar').removeClass().addClass('progress-bar').addClass(step)
 
         submitButton = $el.find(".submit-button")
 
@@ -145,7 +114,7 @@ CreateProject = ($rootscope, $repo, $confirm, $location, $navurls, $rs, $project
 
 module.directive("tgLbCreateProject", ["$rootScope", "$tgRepo", "$tgConfirm",
     "$location", "$tgNavUrls", "$tgResources", "$projectUrl", "$tgLoading",
-    "lightboxService", "$cacheFactory", "$translate", "tgCurrentUserService", CreateProject])
+    "lightboxService", "$cacheFactory", "$translate", "tgCurrentUserService", "$tgAuth", CreateProject])
 
 
 #############################################################################

app/locales/taiga/locale-en.json

@@ -470,9 +470,9 @@
             "CHANGE_LOGO": "Change logo",
             "ACTION_USE_DEFAULT_LOGO": "Use default image",
             "MAX_PRIVATE_PROJECTS": "You've reached the maximum number of private projects",
-            "MAX_PRIVATE_PROJECTS_MEMBERS": "The project exceeds the maximun members number in private projects",
+            "MAX_PRIVATE_PROJECTS_MEMBERS": "The project exceeds the maximum members number in private projects",
             "MAX_PUBLIC_PROJECTS": "You've reached the maximum number of public projects",
-            "MAX_PUBLIC_PROJECTS_MEMBERS": "The project exceeds the maximun members number in public projects"
+            "MAX_PUBLIC_PROJECTS_MEMBERS": "The project exceeds the maximum members number in public projects"
         },
         "REPORTS": {
             "TITLE": "Reports",
@@ -1324,12 +1324,18 @@
         }
     },
     "WIZARD": {
-        "SECTION_TITLE_CHOOSE_TEMPLATE": "Choose a template",
-        "CHOOSE_TEMPLATE_TEXT": "Which template would fit better in your project?",
         "SECTION_TITLE_CREATE_PROJECT": "Create Project",
         "CREATE_PROJECT_TEXT": "Fresh and clean. So exciting!",
-        "PROGRESS_TEMPLATE_SELECTION": "Template selection",
+        "CHOOSE_TEMPLATE": "Which template would fit better in your project?",
-        "PROGRESS_NAME_DESCRIPTION": "Name and description"
+        "CHOOSE_TEMPLATE_TITLE": "More info about project templates",
+        "CHOOSE_TEMPLATE_INFO": "More info",
+        "PROJECT_DETAILS": "Project Details",
+        "PUBLIC_PROJECT": "Public Project",
+        "PRIVATE_PROJECT": "Private Project",
+        "CREATE_PROJECT": "Create project",
+        "MAX_PRIVATE_PROJECTS": "You've reached the maximum number of private projects",
+        "MAX_PUBLIC_PROJECTS": "You've reached the maximum number of public projects",
+        "CHANGE_PLANS": "change plans"
     },
     "WIKI": {
         "PAGE_TITLE": "{{wikiPageName}} - Wiki - {{projectName}}",

app/modules/projects/projects.service.coffee

@@ -57,7 +57,7 @@ class ProjectsService extends taiga.Service
 
     newProject: ->
         @lightboxFactory.create("tg-lb-create-project", {
-            "class": "wizard-create-project"
+            "class": "wizard-create-project lightbox"
         })
 
     bulkUpdateProjectsOrder: (sortData) ->

app/modules/projects/projects.service.spec.coffee

@@ -79,7 +79,7 @@ describe "tgProjectsService", ->
         projectsService.newProject()
 
         expect(mocks.lightboxFactory.create).to.have.been.calledWith("tg-lb-create-project", {
-            "class": "wizard-create-project"
+            "class": "wizard-create-project lightbox"
         })
 
     it "bulkUpdateProjectsOrder and then fetch projects again", () ->

app/partials/project/wizard-create-project.jade

@@ -1,77 +1,94 @@
+svg.close.icon.icon-close(title="{{'COMMON.CLOSE' | translate}}")
+    use(xlink:href="#icon-close")
 form
-    section.wizard-step.create-step1(data-step="step1")
+    header
-        div.title
+        h1.title(translate="WIZARD.SECTION_TITLE_CREATE_PROJECT")
-            h1(translate="WIZARD.SECTION_TITLE_CHOOSE_TEMPLATE")
+        .subtitle(
-            p(translate="WIZARD.CHOOSE_TEMPLATE_TEXT")
+            translate="WIZARD.CREATE_PROJECT_TEXT"
-        div.template-wrapper
+            role="presentation"
-            div.template-inner
+        )
-                fieldset(ng-repeat="template in templates")
+    section.template-option
-                    input(
+        .template-selector-title
-                        type="radio"
+            legend(translate="WIZARD.CHOOSE_TEMPLATE")
-                        name="template"
+            // UX issue
-                        id="template-{{ template.id }}"
+            //- a.more-info(
-                        ng-value='template.id'
+            //-     href=""
-                        ng-model="data.creation_template"
+            //-     title="{{ 'WIZARD.CHOOSE_TEMPLATE_TITLE' | translate }}"
-                        data-required="true"
+            //-     translate="WIZARD.CHOOSE_TEMPLATE_INFO"
-                    )
+            //- )
-                    label.backlog(for="template-{{ template.id }}")
+        .template-selector
-                        svg.icon(ng-class="'icon-'+template.slug")
+            fieldset(ng-repeat="template in templates")
-                            use(xlink:href="{{'#icon-' + template.slug }}")
+                input(
-                        h2 {{ template.name }}
+                    type="radio"
-                    p {{ template.description }}
+                    name="template"
-
+                    id="template-{{ template.id }}"
-        fieldset
+                    ng-value='template.id'
-            a.button-next.button-green(
+                    ng-model="data.creation_template"
-                href="#"
+                    data-required="true"
-                title="{{'PAGINATION.NEXT' | translate}}"
+                )
-                translate="PAGINATION.NEXT"
+                label.template-label(for="template-{{ template.id }}")
-            )
+                    svg.icon(ng-class="'icon-'+template.slug")
-
+                        use(xlink:href="{{'#icon-' + template.slug }}")
-    section.wizard-step.create-step2.active(data-step="step2")
+                    span.template-name {{ template.name }}
-        div.title
+        .template-data
-            h1(translate="WIZARD.SECTION_TITLE_CREATE_PROJECT")
+            legend(translate="WIZARD.PROJECT_DETAILS")
-            p(translate="WIZARD.CREATE_PROJECT_TEXT")
+            fieldset
-        div.template-wrapper
+                input(
-            div.template-inner
+                    type="text"
-                fieldset
+                    name="name"
-                    input(
+                    ng-model="data.name"
-                        type="text"
+                    data-required="true"
-                        name="name"
+                    placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
-                        ng-model="data.name"
+                    maxlength="45"
-                        data-required="true"
+                    aria-hidden="true"
-                        placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+                )
-                        maxlength="45"
+            fieldset
-                    )
+                textarea(
-                fieldset
+                    name="description"
-                    textarea(
+                    ng-model="data.description"
-                        name="description"
+                    data-required="true"
-                        ng-model="data.description"
+                    ng-attr-placeholder="{{'COMMON.FIELDS.DESCRIPTION' | translate}}"
-                        data-required="true"
+                )
-                        ng-attr-placeholder="{{'COMMON.FIELDS.DESCRIPTION' | translate}}"
+        .template-privacity
-                    )
+            fieldset
-                fieldset.wizard-action
+                input(
-                    div
+                    type="radio"
-                        a.button-prev.button.button-gray(
+                    name="is_private"
-                            href="#"
+                    id="template-public"
-                            title="{{'PAGINATION.PREVIOUS' | translate}}"
+                    data-required="true"
-                            translate="PAGINATION.PREVIOUS"
+                    aria-hidden="true"
-                        )
+                    ng-value="false"
-                        button.button-green.submit-button(
+                    ng-model="data.is_private"
-                            type="submit"
+                    required
-                            title="{{'COMMON.CREATE' | translate}}"
+                    ng-disabled="!canCreatePublicProjects.valid"
-                            translate="COMMON.CREATE"
+                    ng-checked="canCreatePublicProjects.valid"
-                        )
+                )
-
+                label.template-privacity(for="template-public")
-                    button.hidden(type="submit")
+                    svg.icon.icon-discover
-
+                        use(xlink:href="#icon-discover")
-div.progress-bar
+                    span(translate="WIZARD.PUBLIC_PROJECT")
-    div.progress-state
+            fieldset
-        span(translate="WIZARD.PROGRESS_TEMPLATE_SELECTION")
+                input(
-        span(translate="WIZARD.PROGRESS_NAME_DESCRIPTION")
+                    type="radio"
-        // span Final touches
+                    name="is_private"
-    div.progress-bar-wrapper
+                    id="template-private"
-        div.bar
+                    data-required="true"
-
+                    ng-value="true"
-a.close(href="#" title="{{'COMMON.CLOSE' | translate}}")
+                    ng-model="data.is_private"
-    svg.icon.icon-delete
+                    aria-hidden="true"
-        use(xlink:href="#icon-delete")
+                    required
+                    ng-disabled="!canCreatePrivateProjects.valid"
+                    ng-checked="!canCreatePublicProjects.valid"
+                )
+                label.template-privacity(for="template-private")
+                    svg.icon.icon-lock
+                        use(xlink:href="#icon-lock")
+                    span(translate="WIZARD.PRIVATE_PROJECT")
+        
+        tg-create-project-restriction
+        
+        button.button-green.submit-button(
+            translate="WIZARD.CREATE_PROJECT"
+            title="{{'WIZARD.CREATE_PROJECT' | translate}}"
+            ng-click=""
+        )

app/partials/project/wizard-restrictions.jade

@@ -0,0 +1,9 @@
+div.create-warning(ng-if="!canCreatePrivateProjects.valid && canCreatePrivateProjects.reason == 'max_private_projects'")
+    svg.icon.icon-exclamation
+        use(xlink:href="#icon-exclamation")
+    span {{ 'WIZARD.MAX_PRIVATE_PROJECTS' | translate }}
+    
+div.create-warning(ng-if="!canCreatePublicProjects.valid && canCreatePublicProjects.reason == 'max_public_projects'")
+    svg.icon.icon-exclamation
+        use(xlink:href="#icon-exclamation")
+    span {{ 'WIZARD.MAX_PUBLIC_PROJECTS' | translate }}

app/styles/modules/common/wizard.scss

@@ -1,73 +1,109 @@
 .wizard-create-project {
     @extend %lightbox;
-    @extend %background-taiga;
-    background-size: cover;
-    color: $white;
-    text-align: center;
-    form {
-        width: 500px;
-    }
-    .title {
-        width: 100%;
-    }
-    h1,
-    p {
-        color: $white;
-    }
-    h1 {
-        line-height: 1.5rem;
-    }
-    p {
-        @extend %small;
-        opacity: .8;
-    }
-    input,
-    textarea,
-    select {
-        background: rgba($white, .7);
-        @include placeholder {
-            color: $grayer;
-        }
-    }
     .close {
-        color: $white;
+        @include svg-size(2rem);
-        &:hover {
+    }
-            color: $red-light;
+    form {
+        width: 700px;
+    }
+    header {
+        margin-bottom: 3rem;
+        .title {
+            margin-bottom: 0;
+        }
+        .subtitle {
+            @extend %small;
+            color: $gray-light;
+            text-align: center;
         }
     }
-    .wizard-step {
+    .more-info {
-        animation: formSlide .4s ease-in-out;
+        @extend %small;
-        animation-direction: alternate-reverse;
+        color: $primary;
-        display: none;
-        &.active {
-            animation: formSlide .4s ease-in-out;
-            &.create-step2,
-            &.create-step3,
-            &.create-step1 {
-                display: block;
-            }
-        }
     }
-    .wizard-action {
+    .template-selector-title {
-        div {
+        display: flex;
-            display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+    .template-selector {
+        display: flex;
+        margin-bottom: 1rem;
+        input {
+            display: none;
         }
-        a {
+        fieldset {
-            color: $white;
-            display: inline-block;
-            flex-basis: 40%;
-            flex-grow: 1;
             &:first-child {
                 margin-right: .5rem;
             }
         }
     }
-    .create-step1 {
+    input {
-        .template-inner {
+        &:checked+label {
-            display: flex;
+            background: $primary-light;
+            color: $white;
+            transition: background .2s ease-in;
+            &:hover {
+                background: $primary-light;
+            }
         }
+        +label {
+            background: rgba($whitish, .7);
+            cursor: pointer;
+            display: block;
+            padding: 2rem 1rem;
+            text-align: center;
+            transition: background .2s ease-in;
+            &:hover {
+                background: rgba($primary-light, .3);
+                transition: background .2s ease-in;
+            }
+            .icon {
+                @include svg-size(1.4rem);
+                fill: currentColor;
+                margin-right: 1rem;
+                vertical-align: text-top;
+            }
+            .template-name {
+                @extend %large;
+                text-transform: uppercase;
+            }
+        }
+    }
+    input[disabled]+label {
+        background: lighten($whitish, 5%);
+        box-shadow: none;
+        color: lighten($gray-light, 20%);
+        cursor: not-allowed;
+        opacity: .65;
+        &:hover {
+            background: lighten($whitish, 5%);
+            color: lighten($gray-light, 20%);
+        }
+    }
+    .template-data {
+        legend {
+            display: block;
+            margin-bottom: .5rem;
+        }
+        input,
+        textarea {
+            background: none;
+            border: 1px solid $whitish;
+            color: $gray-light;
+            @include placeholder {
+                color: darken($whitish, 20%);
+            }
+        }
+        textarea {
+            height: 7rem;
+            min-height: 7rem;
+        }
+    }
+    .template-privacity {
+        display: flex;
         fieldset {
-            flex-grow: 1;
+            margin-bottom: 0;
             &:first-child {
                 margin-right: .5rem;
             }
@@ -75,105 +111,37 @@
         input {
             display: none;
         }
-        input:checked {
+        label {
-            +label {
+            display: block;
-                background: rgba($primary-light, .7);
+            text-align: center;
-                transition: background .3s ease-in;
+            text-transform: uppercase;
-            }
+
         }
         input+label {
-            background: rgba($whitish, .7);
-            cursor: pointer;
-            display: block;
-            margin-bottom: 1rem;
             padding: 1rem;
-            text-align: center;
-            transition: background .3s ease-in;
-            &:hover {
-                background: rgba($primary, .7);
-                transition: background .3s ease-in;
-            }
-            .icon {
-                @include svg-size(3rem);
-                fill: currentColor;
-            }
         }
-        h2 {
+        svg {
-            color: $white;
+            @include svg-size(.7rem);
-            margin: 0;
-            margin-top: .5rem;
-            text-transform: uppercase;
-        }
-        p {
-            text-align: center;
         }
     }
-    .progress-bar {
+    .create-warning {
-        bottom: 0;
+        @extend %small;
-        height: .5rem;
+        padding: 1rem;
-        left: 0;
+        text-align: center;
-        position: absolute;
+        .icon-exclamation {
-        width: 100%;
+            fill: $red-light;
-    }
+            margin-right: .5rem;
-    .step1 {
+            vertical-align: middle;
-        .bar {
-            transition: width .6s ease-in-out;
-            width: 25%;
         }
-        .progress-state {
+        a {
-            span:nth-child(1) {
+            color: $primary;
-                color: rgba($white, 1);
-                transition: color .3s ease-in-out;
-                transition-delay: .6s;
-            }
-        }
-    }
-    .step2 {
-        .bar {
-            transition: width .6s ease-in-out;
-            // width: 50%;
-            width: 75%;
-        }
-        .progress-state {
-            span:nth-child(1),
-            span:nth-child(2) {
-                color: rgba($white, 1);
-                transition: color .3s ease-in-out;
-                transition-delay: .6s;
-            }
-        }
-    }
-
-    .progress-state {
-        position: absolute;
-        width: 100%;
-        span {
-            color: rgba($white, .5);
             display: inline-block;
-            margin-left: -100px;
+            margin-left: .25rem;
-            position: absolute;
-            text-align: center;
-            top: -2rem;
-            transition: all 1s ease-in;
-            width: 200px;
-            &:nth-child(1) {
-                left: 25%;
-            }
-            &:nth-child(2) {
-                left: 75%;
-            }
         }
     }
-    .progress-bar-wrapper {
+    .button-green {
-        background: rgba($white, .3);
+        display: block;
-        height: .5rem;
+        margin: 1rem 5rem;
-    }
+        width: calc(100% - 10rem);
-    .bar {
-        background: rgba($primary-light, .9);
-        height: .5rem;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 0;
     }
 }

app/svg/sprite.svg

@@ -413,10 +413,10 @@
                 fill="#9dce0a"
                 d="M512.053 24.761l-130.433 173.609-213.936-30.392 30.427 214.125-173.349 130.201 173.349 130.2-30.427 214.123 214.747-30.506 130.064 173.118 129.997-173.027 214.355 30.451-30.588-215.258 172.981-129.922-172.497-129.561 30.458-214.345-214.912 30.53-130.235-173.346z"></path>
         </symbol>
-        <symbol id="icon-team-question" viewBox="0 0 1024 1024">
+        <symbol id="icon-exclamation" viewBox="0 0 1024 1024">
-            <title>team-question</title>
+            <title>Exclamation</title>
             <path
-                d="M165 91.5c-33 0-60 28.7-60 64 0 35.2 27 64 60 64s60-28.8 60-64c0-35.3-27-64-60-64zm0 16.2c24.8 0 44.8 21.3 44.8 47.8 0 26.5-20 47.8-44.8 47.8-25 0-45-21.3-45-47.8 0-26.5 20-47.8 45-47.8zm-77.8 13.5c-29.2 0-53 25.5-53 56.7 0 31 23.8 56.5 53 56.5 16 0 27.5-4.5 37.3-16.6-21.8-9.7-34-36-34-62.5 0-12 3-23.3 8.5-33-3.8-.8-7.7-1.3-11.8-1.3zM165 229.7c-53.3 0-95.8 50.8-96 112.5v8h192v-8c-.2-61.7-42.8-112.5-96-112.5zm-78.7 13.6c-3.4 0-5.8.3-5.8.3-47.2 0-78 45-78.3 99.5v7.3h52.2v-8c0-41.3 15.2-78.6 43.7-98.2-3.8-.6-8.2-.8-11.7-.7zM165 246c42 0 76.8 38.2 80.5 88h-161c3.6-49.8 38.6-88 80.5-88zM339.3 49.7C307 49.7 281 76 281 108.2c0 32.2 26 58.4 58.3 58.4s58.5-26.2 58.5-58.4c0-32.3-26.2-58.5-58.5-58.5zm0 7.3c28.3 0 51.2 23 51.2 51.2 0 28.3-23 51-51.2 51-28.3 0-51-22.7-51-51S311 57 339.2 57zm-.2 11.8c-7 0-14 1.7-20.5 5l3 7c3.5-1.6 6.5-2.7 9-3.3 2.7-.7 5.4-1 8-1 4.4 0 7.6 1 10 3 2.2 1.8 3.3 4.5 3.3 8 0 3-.6 5.4-1.8 7.4-1.2 2-4.2 5-9 9-3.3 2.8-5.7 5.6-7 8.2-1.2 2.6-1.8 6-1.8 10v2.8h6.7v-1.7c0-3.3.5-6 1.6-8 1-2 3.5-4.4 7-7.3 4.4-4 7.2-6.6 8.5-8.3 1.4-1.8 2.4-3.6 3-5.5.8-2 1-4.2 1-6.7 0-6-1.7-10.6-5.4-13.8-3.7-3.3-8.8-5-15.5-5zm-6.8 62.5V148h7.3v-16.7h-7.3z"></path>
+                d="M512 0c-282.394 0-512 229.606-512 512s229.606 512 512 512 512-229.606 512-512-229.606-512-512-512zM512 64c247.803 0 448 200.197 448 448s-200.197 448-448 448-448-200.197-448-448 200.197-448 448-448zM275.256 230.001l-45.256 45.251 236.744 236.749-236.744 236.744 45.256 45.256 236.744-236.744 236.744 236.744 45.256-45.256-236.744-236.744 236.744-236.749-45.253-45.251-236.749 236.744z"></path>
         </symbol>
         <symbol id="icon-blocked-project" viewBox="0 0 1024 1024">
             <title>Blocked Project</title>