rename css class

gywn · gywn · commit a2f6359e7b0d · 2018-08-17T17:45:33.000+02:00
diff --git a/html/view.html b/html/view.html
@@ -5,7 +5,7 @@
   <link rel="shortcut icon" href="images/icon-16.png">
 </head>
 <body>
-  <div id="linkStack">
+  <div id="link-stack">
   </div>
 </body>
 </html>
diff --git a/src/Line.tsx b/src/Line.tsx
@@ -62,7 +62,7 @@ export class Line extends React.Component<LineProps> {
               <div className="line">
                 {removeLink}
                 {mainLink}
-                <span className="sourceConn">
+                <span className="source-connector">
                   <Icon type="arrow-left" />
                 </span>
                 {sourceLink}
diff --git a/src/Link.tsx b/src/Link.tsx
@@ -21,13 +21,13 @@ export class Link extends React.Component<LinkProps> {
         target="_blank"
         title={title}
       >
-        <div className="faviconWrapper">
+        <div className="favicon-wrapper">
           <img
             className="favicon"
             src={"https://www.google.com/s2/favicons?domain=" + hostname}
           />
         </div>
-        <span className="linkText">{title}</span>
+        <span className="link-text">{title}</span>
       </a>
     );
   }
diff --git a/src/LinkStack.tsx b/src/LinkStack.tsx
@@ -13,22 +13,22 @@ export class LinkStack extends React.Component {
       <Consumer>
         {(model: ViewModel | null) =>
           model ? (
-            <div className="linkStackContent">
+            <div className="content">
               <div
                 className={
-                  "syncIndicator" +
+                  "sync-indicator" +
                   (model.state.unsyncedUpdate ? "" : " hidden")
                 }
               />
               <TitleBar />
               {model.state.graph.ids.length > 0 ? (
-                <div className="innerLinkStack">
+                <div className="inner-link-stack">
                   {model.state.graph.ids.map(id => (
                     <Line key={id} id={id} />
                   ))}
                 </div>
               ) : (
-                <div className="innerLinkStackInfo">
+                <div className="inner-link-stack-info">
                   {helpMessages[texts.lang]}
                 </div>
               )}
diff --git a/src/RootSelector.tsx b/src/RootSelector.tsx
@@ -36,7 +36,7 @@ export class RootSelector extends React.Component<
               <p>
                 {model.state.bookmarkTreeSelection ? (
                   <Cascader
-                    className="rootSelector"
+                    className="root-selector"
                     options={model.state.bookmarkTreeSelection.tree}
                     defaultValue={model.state.bookmarkTreeSelection.path}
                     changeOnSelect
diff --git a/src/TitleBar.tsx b/src/TitleBar.tsx
@@ -24,10 +24,10 @@ export class TitleBar extends React.Component {
           if (!model) return;
           this.model = model;
           return (
-            <div className="titleBar">
+            <div className="title-bar">
               {this.model.state.id ? (
                 [
-                  <span className="rootTitle">{model.state.name}</span>,
+                  <span className="root-title">{model.state.name}</span>,
                   <Divider type="vertical" />,
                   <Tooltip
                     title={texts.changeBookmarkFolder}
@@ -45,10 +45,10 @@ export class TitleBar extends React.Component {
                 </a>
               )}
               <RootSelector />
-              <span className="elasticSpace" />
+              <span className="elastic-space" />
               {this.model.state.graph.ids.length > 0
                 ? [
-                    <a className="secondaryLink" onClick={this.onClickShowHelp}>
+                    <a className="secondary-link" onClick={this.onClickShowHelp}>
                       {texts.help + " "}
                       <Icon type="question-circle-o" />
                     </a>,
diff --git a/src/keyboardShortcut.tsx b/src/keyboardShortcut.tsx
@@ -4,7 +4,7 @@ import Tag from "antd/lib/tag";
 import * as React from "react";
 
 export const defaultShortcut = (
-  <span className="keyboardCombination">
+  <span className="keyboard-combi">
     <Tag>Alt</Tag> + <Tag>Shift</Tag> + <Tag>2</Tag>
   </span>
 );
diff --git a/src/view.tsx b/src/view.tsx
@@ -30,7 +30,7 @@ window.onload = async () => {
           </div>
         ]}
       </Provider>,
-      document.getElementById("linkStack")
+      document.getElementById("link-stack")
     );
     document.title = texts.extTitle(state.graph.ids.length);
   });
diff --git a/style/view.less b/style/view.less
@@ -21,11 +21,11 @@
   flex-shrink: 0;
 }
 
-.secondaryLink {
+.secondary-link {
   color: @text-color-secondary;
 }
 
-#linkStack {
+#link-stack {
   display: flex;
   flex-direction: column;
   padding: @large-gap;
@@ -44,7 +44,7 @@
     }
   }
 
-  .linkStackContent {
+  .content {
     position: relative;
     margin-bottom: @large-gap;
     padding-bottom: @large-gap;
@@ -60,7 +60,7 @@
       }
     }
 
-    .syncIndicator {
+    .sync-indicator {
       position: absolute;
       top: @text-height;
       right: @text-height;
@@ -76,7 +76,7 @@
       }
     }
 
-    .titleBar {
+    .title-bar {
       display: flex;
       margin-bottom: @large-gap;
       padding: 16px @large-gap;
@@ -85,18 +85,18 @@
       justify-content: space-between;
       align-items: center;
 
-      .rootTitle {
+      .root-title {
         font-weight: 500;
         font-size: @font-size-lg;
         line-height: @font-size-lg;
       }
 
-      .elasticSpace {
+      .elastic-space {
         flex-grow: 1;
       }
     }
 
-    .innerLinkStack {
+    .inner-link-stack {
       overflow: hidden;
       margin: 0 @large-gap;
 
@@ -134,7 +134,7 @@
             max-width: 200px;
           }
 
-          .faviconWrapper {
+          .favicon-wrapper {
             display: flex;
             margin-right: @border-width;
             width: @content-height;
@@ -146,7 +146,7 @@
             justify-content: center;
           }
 
-          .linkText {
+          .link-text {
             overflow: hidden;
             padding: (@content-height - @text-height) / 2;
             color: white;
@@ -157,7 +157,7 @@
           }
         }
 
-        .sourceConn, .remove {
+        .source-connector, .remove {
           padding: (@content-height - @text-height) / 2;
           width: @block-height;
           height: @block-height;
@@ -183,7 +183,7 @@
       }
     }
 
-    .innerLinkStackInfo {
+    .inner-link-stack-info {
       margin: 0 auto;
       padding: 0 @large-gap;
       max-width: 520px;  // Ant Design Modal's default width
@@ -206,7 +206,7 @@
   }
 }
 
-.rootSelector {
+.root-selector {
   width: 100%;
 }
 
@@ -218,6 +218,6 @@ span.process {
   color: @processing-color;
 }
 
-span.keyboardCombination > .@{tag-prefix-cls} {
+span.keyboard-combi > .@{tag-prefix-cls} {
   margin-right: 0;
 }

Original file line number	Diff line number	Diff line change
`@@ -21,11 +21,11 @@`
`21`	`21`	`flex-shrink: 0;`
`22`	`22`	`}`
`23`	`23`
`24`		`-.secondaryLink {`
	`24`	`+.secondary-link {`
`25`	`25`	`color: @text-color-secondary;`
`26`	`26`	`}`
`27`	`27`
`28`		`-#linkStack {`
	`28`	`+#link-stack {`
`29`	`29`	`display: flex;`
`30`	`30`	`flex-direction: column;`
`31`	`31`	`padding: @large-gap;`
`@@ -44,7 +44,7 @@`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
`47`		`- .linkStackContent {`
	`47`	`+ .content {`
`48`	`48`	`position: relative;`
`49`	`49`	`margin-bottom: @large-gap;`
`50`	`50`	`padding-bottom: @large-gap;`
`@@ -60,7 +60,7 @@`
`60`	`60`	`}`
`61`	`61`	`}`
`62`	`62`
`63`		`- .syncIndicator {`
	`63`	`+ .sync-indicator {`
`64`	`64`	`position: absolute;`
`65`	`65`	`top: @text-height;`
`66`	`66`	`right: @text-height;`
`@@ -76,7 +76,7 @@`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
`79`		`- .titleBar {`
	`79`	`+ .title-bar {`
`80`	`80`	`display: flex;`
`81`	`81`	`margin-bottom: @large-gap;`
`82`	`82`	`padding: 16px @large-gap;`
`@@ -85,18 +85,18 @@`
`85`	`85`	`justify-content: space-between;`
`86`	`86`	`align-items: center;`
`87`	`87`
`88`		`- .rootTitle {`
	`88`	`+ .root-title {`
`89`	`89`	`font-weight: 500;`
`90`	`90`	`font-size: @font-size-lg;`
`91`	`91`	`line-height: @font-size-lg;`
`92`	`92`	`}`
`93`	`93`
`94`		`- .elasticSpace {`
	`94`	`+ .elastic-space {`
`95`	`95`	`flex-grow: 1;`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`
`99`		`- .innerLinkStack {`
	`99`	`+ .inner-link-stack {`
`100`	`100`	`overflow: hidden;`
`101`	`101`	`margin: 0 @large-gap;`
`102`	`102`
`@@ -134,7 +134,7 @@`
`134`	`134`	`max-width: 200px;`
`135`	`135`	`}`
`136`	`136`
`137`		`- .faviconWrapper {`
	`137`	`+ .favicon-wrapper {`
`138`	`138`	`display: flex;`
`139`	`139`	`margin-right: @border-width;`
`140`	`140`	`width: @content-height;`
`@@ -146,7 +146,7 @@`
`146`	`146`	`justify-content: center;`
`147`	`147`	`}`
`148`	`148`
`149`		`- .linkText {`
	`149`	`+ .link-text {`
`150`	`150`	`overflow: hidden;`
`151`	`151`	`padding: (@content-height - @text-height) / 2;`
`152`	`152`	`color: white;`
`@@ -157,7 +157,7 @@`
`157`	`157`	`}`
`158`	`158`	`}`
`159`	`159`
`160`		`- .sourceConn, .remove {`
	`160`	`+ .source-connector, .remove {`
`161`	`161`	`padding: (@content-height - @text-height) / 2;`
`162`	`162`	`width: @block-height;`
`163`	`163`	`height: @block-height;`
`@@ -183,7 +183,7 @@`
`183`	`183`	`}`
`184`	`184`	`}`
`185`	`185`
`186`		`- .innerLinkStackInfo {`
	`186`	`+ .inner-link-stack-info {`
`187`	`187`	`margin: 0 auto;`
`188`	`188`	`padding: 0 @large-gap;`
`189`	`189`	`max-width: 520px; // Ant Design Modal's default width`
`@@ -206,7 +206,7 @@`
`206`	`206`	`}`
`207`	`207`	`}`
`208`	`208`
`209`		`-.rootSelector {`
	`209`	`+.root-selector {`
`210`	`210`	`width: 100%;`
`211`	`211`	`}`
`212`	`212`
`@@ -218,6 +218,6 @@ span.process {`
`218`	`218`	`color: @processing-color;`
`219`	`219`	`}`
`220`	`220`
`221`		`-span.keyboardCombination > .@{tag-prefix-cls} {`
	`221`	`+span.keyboard-combi > .@{tag-prefix-cls} {`
`222`	`222`	`margin-right: 0;`
`223`	`223`	`}`