Creates better visual representation of deprecated (#5)

pixijs · Nov 23, 2017 · ef9be02 · ef9be02
1 parent bcf404a
commit ef9be02
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 15 deletions.
diff --git a/publish.js b/publish.js
@@ -211,6 +211,7 @@ function buildNav(members) {
             nav.push({
                 type: 'namespace',
                 longname: v.longname,
+                deprecated: v.deprecated,
                 name: v.name,
                 members: find({
                     kind: 'member',
@@ -246,6 +247,7 @@ function buildNav(members) {
                 type: 'class',
                 longname: v.longname,
                 name: v.name,
+                deprecated: v.deprecated,
                 members: find({
                     kind: 'member',
                     memberof: v.longname

diff --git a/src/styles/main.less b/src/styles/main.less
@@ -7,6 +7,14 @@
     margin-right: auto;
 }
 
+.status-deprecated {
+    text-decoration: line-through;
+    opacity: 0.4;
+    a, &:hover {
+        text-decoration: none;
+    }
+}
+
 .main {
 
     left:25%;
@@ -82,7 +90,11 @@
         margin-left: 6px;
         &.deprecated {
             background-color: @colorSubtitle;
-            font-size: 0.9em;
+            font-weight: bold;
+            .deprecated-info {
+                font-weight: normal;
+                margin-left: 5px;
+            }
         }
         a {
             color: @colorTextInvert;

diff --git a/tmpl/container.tmpl b/tmpl/container.tmpl
@@ -76,7 +76,7 @@
         <h3 class="subsection-title">Classes</h3>
 
         <dl class="clearfix summary-list list-classes"><?js classes.forEach(function(c) { ?>
-            <dt><?js= self.linkto(c.longname, c.name) ?></dt>
+            <dt class="<?js= c.deprecated ? 'status-deprecated' : ''?>"><?js= self.linkto(c.longname, c.name) ?></dt>
             <?js if (c.summary) { ?><dd><?js= c.summary ?></dd><?js } ?>
         <?js }); ?></dl>
     <?js } ?>
@@ -88,7 +88,7 @@
         <h3 class="subsection-title">Namespaces</h3>
 
         <dl class="clearfix summary-list list-namespaces"><?js namespaces.forEach(function(n) { ?>
-            <dt><a href="namespaces.html#<?js= n.longname ?>"><?js= self.linkto(n.longname, n.name) ?></a></dt>
+            <dt class="<?js= n.deprecated ? 'status-deprecated' : ''?>"><a href="namespaces.html#<?js= n.longname ?>"><?js= self.linkto(n.longname, n.name) ?></a></dt>
 
             <?js if (n.summary) { ?><dd><?js= n.summary ?></dd><?js } ?>
         <?js }); ?></dl>

diff --git a/tmpl/details.tmpl b/tmpl/details.tmpl
@@ -23,13 +23,6 @@ var self = this;
     <dt class="tag-since">Since:</dt>
     <dd class="tag-since"><ul class="dummy"><li><?js= since ?></dd>
     <?js } ?>
-
-    <?js if (data.deprecated) { ?>
-        <dt class="access-signature deprecated">Deprecated</dt><?js
-            if (data.deprecated === true) { ?><dd class="yes-def tag-deprecated"><ul class="dummy"><li>Yes</li></ul></dd><?js }
-            else { ?><dd><ul class="dummy"><li><?js= data.deprecated ?></li><ul></dd><?js }
-        ?>
-    <?js } ?>
 
     <?js if (data.author && author.length) {?>
     <dt class="tag-author">Author:</dt>

diff --git a/tmpl/members.tmpl b/tmpl/members.tmpl
@@ -16,7 +16,17 @@ if (data.type && data.type.names) {
     <div class="nameContainer">
         <h4 class="name" id="<?js= id ?>">
             <a class="share-icon" href="#<?js= id ?>"><span class="glyphicon glyphicon-link"></span></a>
-            <?js= (data.scope === 'static' ? longname : name)  + typeSignature + data.attribs ?>
+            <span class="<?js= data.deprecated ? 'status-deprecated' : '' ?>"><?js= (data.scope === 'static' ? longname : name) ?></span>
+            <?js= typeSignature ?>
+            <?js if (data.deprecated) { ?>
+                <span class="access-signature deprecated">Deprecated<?js
+                    if (typeof data.deprecated === 'string') { ?>
+                    : <span class="deprecated-info"><?js= data.deprecated ?></span>
+                    <?js }
+                ?>
+                </span>
+            <?js } ?>
+            <?js= data.attribs ?>
             <?js if (data.inherited || data.inherits) { ?>
                 <span class="access-signature inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
             <?js } ?>

diff --git a/tmpl/method.tmpl b/tmpl/method.tmpl
@@ -6,7 +6,19 @@ var self = this;
     <div class="nameContainer">
         <h4 class="name" id="<?js= id ?>">
             <a class="share-icon" href="#<?js= id ?>"><span class="glyphicon glyphicon-link"></span></a>
-            <?js=  (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) + (kind !== 'event' ? data.signature : '') + data.attribs ?>
+            <span class="<?js= data.deprecated ? 'status-deprecated' : '' ?>">
+                <?js= (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) ?>
+            </span>
+            <?js= (kind !== 'event' ? data.signature : '') ?>
+            <?js if (data.deprecated) { ?>
+                <span class="access-signature deprecated">Deprecated<?js
+                    if (typeof data.deprecated === 'string') { ?>
+                    : <span class="deprecated-info"><?js= data.deprecated ?></span>
+                    <?js }
+                ?>
+                </span>
+            <?js } ?>
+            <?js= data.attribs ?>
             <?js if (data.inherited || data.inherits) { ?>
                 <span class="access-signature inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
             <?js } ?>

diff --git a/tmpl/navigation.tmpl b/tmpl/navigation.tmpl
@@ -14,7 +14,7 @@ var self = this;
     this.nav.forEach(function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
-            <span class="title <?js if (item.type === 'namespace') { ?>namespace<?js } ?>">
+            <span class="title <?js if (item.type === 'namespace') { ?>namespace<?js } ?> <?js if (item.deprecated) { ?>status-deprecated<?js } ?>">
                 <?js if (item.type === 'namespace') { ?>
                 <span class="namespaceTag">
                     <span class="glyphicon glyphicon-folder-open"></span>
@@ -30,7 +30,7 @@ var self = this;
             <?js
                 item.members.forEach(function (v) {
             ?>
-                <li class="<?js if (!v.inherited && !v.inherits) { ?>parent<?js } ?>" data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, v.name) ?></li>
+                <li class="<?js if (!v.inherited && !v.inherits) { ?>parent<?js } ?> <?js if (v.deprecated) { ?>status-deprecated<?js } ?>" data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, v.name) ?></li>
             <?js
                 });
             }
@@ -73,7 +73,7 @@ var self = this;
 
                 item.methods.forEach(function (v) {
             ?>
-                <li class="<?js if (!v.inherited && !v.inherits) { ?>parent<?js } ?>" data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, v.name) ?></li>
+                <li class="<?js if (!v.inherited && !v.inherits) { ?>parent<?js } ?>  <?js if (v.deprecated) { ?>status-deprecated<?js } ?>" data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, v.name) ?></li>
             <?js
                 });
             }