Commit d7e0d885 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Refactor member signature styles. 

Use signature class for base styles and combine other classes
with it for additional styles.

Move the colors definition to mixin so it can be shared between
toolbar and class overview page.
parent 8b4a28f8

lib/jsduck/renderer.rb

+8 −8
Original line number Diff line number Diff line
@@ -202,7 +202,7 @@ module JsDuck 
      name = m[:name]

      before = ""

      if m[:tagname] == :method && m[:name] == "constructor"

        before = "<strong class='constructor-signature'>new</strong>"

        before = "<strong class='new-keyword'>new</strong>"

        name = @cls[:name]

      end
@@ -218,19 +218,19 @@ module JsDuck 


      after = ""

      if m[:protected]

        after += "<strong class='protected-signature'>protected</strong>"

        after += "<strong class='protected signature'>protected</strong>"

      end

      if m[:static]

        after += "<strong class='static-signature'>static</strong>"

        after += "<strong class='static signature'>static</strong>"

      end

      if m[:deprecated]

        after += "<strong class='deprecated-signature'>deprecated</strong>"

        after += "<strong class='deprecated signature'>deprecated</strong>"

      end

      if m[:required]

        after += "<strong class='required-signature'>required</strong>"

        after += "<strong class='required signature'>required</strong>"

      end

      if m[:template]

        after += "<strong class='template-signature'>template</strong>"

        after += "<strong class='template signature'>template</strong>"

      end



      uri = "#!/api/#{m[:owner]}-#{m[:id]}"
@@ -258,7 +258,7 @@ module JsDuck 
      if m[:deprecated]

        v = m[:deprecated][:version] ? "since " + m[:deprecated][:version] : ""

        doc << [

          "<div class='deprecated'>",

          "<div class='signature-box deprecated'>",

          "<p>This #{m[:tagname]} has been <strong>deprecated</strong> #{v}</p>",

          m[:deprecated][:text],

          "</div>",
@@ -267,7 +267,7 @@ module JsDuck 


      if m[:template]

        doc << [

          "<div class='template'>",

          "<div class='signature-box template'>",

          "<p>This is a template method. A hook into the functionality of this class.",

          "Feel free to override it in child classes.</p>",

          "</div>",

template/app/view/HoverMenu.js

+1 −1
Original line number Diff line number Diff line
@@ -50,7 +50,7 @@ Ext.define('Docs.view.HoverMenu', { 
                    var url = values.url || values.cls;

                    var label = values.label || values.cls;

                    var tags = Ext.Array.map(['static', 'protected', 'deprecated', 'template', 'required'], function(tag) {

                        return values[tag] ? '<span class="'+tag+'">'+tag+'</span>' : '';

                        return values[tag] ? '<span class="signature '+tag+'">'+tag+'</span>' : '';

                    }).join(' ');

                    return Ext.String.format('<a href="#!/api/{0}" rel="{0}" class="docClass">{1} {2}</a>', url, label, tags);

                }

template/resources/sass/_class_overview.scss

+16 −26
Original line number Diff line number Diff line
@@ -41,23 +41,16 @@ 
    background-color: #fee;

    padding: 10px 50px;

    text-align: center; }

  .deprecated-signature, .protected-signature, .static-signature, .required-signature, .template-signature {

  .signature {

    font-weight: bold;

    text-transform: uppercase;

    color: white;

    font-size: 0.7em;

    @include border-radius(2px);

    margin-left: 5px;

    padding: 0 3px; }

  .deprecated-signature {

    background-color: #aa0000; }

  .protected-signature, .template-signature {

    background-color: #aaa; }

  .static-signature {

    background-color: $docs-text-color; }

  .required-signature {

    background-color: $docs-text-color; }

  .constructor-signature {

    padding: 0 3px;

    @include signature-colors; }

  .new-keyword {

    margin-left: 0;

    margin-right: 3px;

    color: $docs-link-color; }
@@ -152,22 +145,19 @@ 
      font-weight: bold; }

    .title {

      padding-bottom: 3px; }

    .template {

    .signature-box {

      border: 1px solid #999;

      @include border-radius(5px);

      background-color: #eee;

      padding: 10px 50px;

      text-align: center; }

    .deprecated {

      border: 1px solid #999;

      @include border-radius(5px);

      text-align: center;

      &.template {

        background-color: #eee; }

      &.deprecated {

        color: #600;

        background-color: #fee;

      padding: 10px 50px;

      text-align: center;

        strong {

          text-transform: uppercase;

          color: white;

          @include border-radius(2px);

          padding: 0 3px;

        background-color: #aa0000; } } } }
 
          background-color: #aa0000; } } } } }

template/resources/sass/_hover_menu.scss

+3 −11
Original line number Diff line number Diff line
@@ -49,23 +49,15 @@ 
      top: 3px;

      &:hover {

        @include opacity(1); } }

    span.protected,

    span.template,

    span.deprecated,

    span.required,

    span.static {

    span.signature {

      font-size: 0.6em;

      text-transform: uppercase;

      font-weight: bold;

      padding: 0 0.5em;

      @include border-radius(2px);

      color: white;

      background: #aaa; }

    span.deprecated {

      background-color: #a00; }

    span.required,

    span.static {

      background-color: $docs-text-color; } } }

      background: #aaa;

      @include signature-colors; } } }



.hover-menu a {

  font-family: Helvetica, Arial, clean, sans-serif;

template/resources/sass/_mixins.scss

+10 −0
Original line number Diff line number Diff line
@@ -139,3 +139,13 @@ 
  line-height: 16px;

  margin-bottom: 4px; }



// Shared colors for member signatures in toolbar menu and class api body

@mixin signature-colors {

  &.deprecated {

    background-color: #aa0000; }

  &.protected, &.template {

    background-color: #aaa; }

  &.static {

    background-color: $docs-text-color; }

  &.required {

    background-color: $docs-text-color; } }