Project template: Fall back to GitLab logo

Use gitlab-svg to provide the icons for rails, spring and express. For the new GitLab pages templates, we are falling back to the GitLab logo.

Project template: Fall back to GitLab logo
Use gitlab-svg to provide the icons for rails, spring and express. For the new GitLab pages templates, we are falling back to the GitLab logo.
d4ad8a5e · Lukas Eipert · 37410a9d · d4ad8a5e · d4ad8a5e · d4ad8a5e
Commit d4ad8a5e authored Feb 06, 2019 by Lukas Eipert
9 changed files
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -115,35 +115,35 @@ const bindEvents = () => {
    const templates = {
      rails: {
        text: 'Ruby on Rails',
-        icon: '.template-option svg.icon-rails',
+        icon: '.template-option .icon-rails',
      },
      express: {
        text: 'NodeJS Express',
-        icon: '.template-option svg.icon-node-express',
+        icon: '.template-option .icon-express',
      },
      spring: {
        text: 'Spring',
-        icon: '.template-option svg.icon-java-spring',
+        icon: '.template-option .icon-spring',
      },
      hugo: {
        text: 'Pages/Hugo',
-        icon: '.template-option svg.icon-pages-hugo',
+        icon: '.template-option .icon-hugo',
      },
      jekyll: {
        text: 'Pages/Jekyll',
-        icon: '.template-option svg.icon-pages-jekyll',
+        icon: '.template-option .icon-jekyll',
      },
      plainhtml: {
        text: 'Pages/Plain HTML',
-        icon: '.template-option svg.icon-pages-plainhtml',
+        icon: '.template-option .icon-plainhtml',
      },
      gitbook: {
        text: 'Pages/GitBook',
-        icon: '.template-option svg.icon-pages-gitbook',
+        icon: '.template-option .icon-gitbook',
      },
      hexo: {
        text: 'Pages/Hexo',
-        icon: '.template-option svg.icon-pages-hexo',
+        icon: '.template-option .icon-hexo',
      },
    };

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -507,12 +507,6 @@
  }
  .template-option {
-    .logo {
-      .btn-template-icon {
-        width: 40px !important;
-      }
-    }
    padding: 16px 0;
    &:not(:first-child) {
@@ -551,9 +545,8 @@
    }
    .selected-icon {
-      svg {
+      img {
        display: none;
-        top: 7px;
        height: 20px;
        width: 20px;
      }

--- a/app/views/projects/project_templates/_built_in_templates.html.haml
+++ b/app/views/projects/project_templates/_built_in_templates.html.haml
 - Gitlab::ProjectTemplate.all.each do |template|
  .template-option.d-flex.align-items-center
-    .logo.append-right-10
+    .logo.append-right-10.px-1
-      = custom_icon(template.logo, size: 40)
+      = image_tag template.logo, size: 32, class: "btn-template-icon icon-#{template.name}"
    .description
      %strong
        = template.title

--- a/app/views/shared/icons/_express.svg
+++ b/app/views/shared/icons/_express.svg
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="32" viewBox="0 0 27 32" class="btn-template-icon icon-node-express"><g fill="none" fill-rule="evenodd"><path d="M-3 0h32v32H-3z"/><path fill="#353535" d="M1.192 16.267c.04 2.065.288 3.982.745 5.75.456 1.767 1.16 3.307 2.115 4.618.953 1.31 2.185 2.343 3.694 3.098 1.51.755 3.357 1.132 5.54 1.132 3.22 0 5.89-.844 8.016-2.532 2.125-1.69 3.446-4.22 3.962-7.597h1.192c-.437 3.575-1.847 6.345-4.23 8.312-2.384 1.966-5.324 2.95-8.82 2.95-2.383.04-4.42-.338-6.107-1.133-1.69-.794-3.07-1.917-4.142-3.367-1.073-1.45-1.867-3.158-2.383-5.124C.258 20.408 0 18.294 0 16.028c0-2.542.377-4.806 1.132-6.792C1.887 7.25 2.88 5.57 4.112 4.2 5.34 2.83 6.77 1.79 8.4 1.074 10.03.358 11.698 0 13.406 0c2.383 0 4.44.457 6.167 1.37 1.728.914 3.138 2.126 4.23 3.635 1.093 1.51 1.887 3.238 2.384 5.184.496 1.945.705 3.97.625 6.077H1.193zm24.43-1.192c0-1.867-.26-3.645-.775-5.333-.516-1.688-1.28-3.168-2.294-4.44-1.013-1.27-2.274-2.273-3.784-3.008-1.51-.735-3.258-1.102-5.244-1.102-1.67 0-3.228.317-4.678.953-1.45.636-2.72 1.56-3.813 2.77-1.092 1.212-1.976 2.672-2.652 4.38-.675 1.708-1.072 3.635-1.19 5.78h24.43z"/></g></svg>
--- a/app/views/shared/icons/_rails.svg
+++ b/app/views/shared/icons/_rails.svg
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 32 20" class="btn-template-icon icon-rails"><g fill="none" fill-rule="evenodd"><path d="M0-6h32v32H0z"/><path fill="#c00" fill-rule="nonzero" d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"/></g></svg>
--- a/app/views/shared/icons/_spring.svg
+++ b/app/views/shared/icons/_spring.svg
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="btn-template-icon icon-java-spring"><g fill="none" fill-rule="evenodd"><path d="M0 0h32v32H0z"/><path fill="#70AD51" d="M5.466 27.993c.586.473 1.446.385 1.918-.202.475-.585.386-1.445-.2-1.92-.585-.474-1.444-.383-1.92.202-.45.555-.392 1.356.115 1.844l-.266-.234C1.972 24.762 0 20.597 0 15.978 0 7.168 7.168 0 15.98 0c4.48 0 8.53 1.857 11.435 4.836.66-.898 1.232-1.902 1.7-3.015 2.036 6.118 3.233 11.26 2.795 15.31-.592 8.274-7.508 14.83-15.93 14.83-3.912 0-7.496-1.416-10.276-3.757l-.238-.21zm23.58-4.982c4.01-5.336 1.775-13.965-.085-19.48-1.657 3.453-5.738 6.094-9.262 6.93-3.303.788-6.226.142-9.283 1.318-6.97 2.68-6.86 10.992-3.02 12.86.002 0 .23.124.227.12 0-.002 5.644-1.122 8.764-2.274 4.56-1.684 9.566-5.835 11.213-10.657-.877 5.015-5.182 9.84-9.507 12.056-2.302 1.182-4.092 1.445-7.88 2.756-.464.158-.828.314-.828.314.96-.16 1.917-.212 1.917-.212 5.393-.255 13.807 1.516 17.745-3.73z"/></g></svg>
--- a/lib/gitlab/project_template.rb
+++ b/lib/gitlab/project_template.rb
@@ -2,14 +2,12 @@
 module Gitlab
  class ProjectTemplate
-    attr_reader :title, :name, :description, :preview
+    attr_reader :title, :name, :description, :preview, :logo
-    def initialize(name, title, description, preview)
+    def initialize(name, title, description, preview, logo = 'illustrations/gitlab_logo.svg')
-      @name, @title, @description, @preview = name, title, description, preview
+      @name, @title, @description, @preview, @logo = name, title, description, preview, logo
    end
-    alias_method :logo, :name
    def file
      archive_path.open
    end
@@ -27,9 +25,9 @@ module Gitlab
    end
    TEMPLATES_TABLE = [
-      ProjectTemplate.new('rails', 'Ruby on Rails', _('Includes an MVC structure, Gemfile, Rakefile, along with many others, to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/rails'),
+      ProjectTemplate.new('rails', 'Ruby on Rails', _('Includes an MVC structure, Gemfile, Rakefile, along with many others, to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/rails', 'illustrations/logos/rails.svg'),
-      ProjectTemplate.new('spring', 'Spring', _('Includes an MVC structure, mvnw and pom.xml to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/spring'),
+      ProjectTemplate.new('spring', 'Spring', _('Includes an MVC structure, mvnw and pom.xml to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/spring', 'illustrations/logos/spring.svg'),
-      ProjectTemplate.new('express', 'NodeJS Express', _('Includes an MVC structure to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/express'),
+      ProjectTemplate.new('express', 'NodeJS Express', _('Includes an MVC structure to help you get started.'), 'https://gitlab.com/gitlab-org/project-templates/express', 'illustrations/logos/express.svg'),
      ProjectTemplate.new('hugo', 'Pages/Hugo', _('Everything you need to create a GitLab Pages site using Hugo.'), 'https://gitlab.com/pages/hugo'),
      ProjectTemplate.new('jekyll', 'Pages/Jekyll', _('Everything you need to create a GitLab Pages site using Jekyll.'), 'https://gitlab.com/pages/jekyll'),
      ProjectTemplate.new('plainhtml', 'Pages/Plain HTML', _('Everything you need to create a GitLab Pages site using plain HTML.'), 'https://gitlab.com/pages/plain-html'),

--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@gitlab/csslab": "^1.8.0",
-    "@gitlab/svgs": "^1.48.0",
+    "@gitlab/svgs": "^1.51.0",
    "@gitlab/ui": "^2.0.2",
    "apollo-boost": "^0.1.20",
    "apollo-client": "^2.4.5",

--- a/yarn.lock
+++ b/yarn.lock
@@ -653,10 +653,10 @@
    eslint-plugin-promise "^4.0.1"
    eslint-plugin-vue "^5.0.0"
-"@gitlab/svgs@^1.48.0":
+"@gitlab/svgs@^1.51.0":
-  version "1.48.0"
+  version "1.51.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.48.0.tgz#7b2e20e357d85aa46e905e6ca51b0b4184ae2794"
+  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.51.0.tgz#1b608f68dfb74284401b1cbdb823440f6e8b0091"
-  integrity sha512-9lRsfqN0W3JxopiXnTzvDY31O465jMTGNKpiOCXy7uAMfwZA6UsRsc7Pp369uKnOLR0duXUGOxOv4NGsK6AeXw==
+  integrity sha512-B1Wdhfy5ZClkHuaaCUUZyOBF8CFxxHqxGGhveRekOowtlMExa3tx+YkqNa5XPsEVMF6Aqnh8evQmmN4b+zrHVQ==
 "@gitlab/ui@^2.0.2":
  version "2.0.2"