Skip to content

Commit

Permalink
Simplify the template
Browse files Browse the repository at this point in the history 
Remove office-js-helpers, jquery, and office-ui-fabric-js.
Update the HTML and CSS to maintain the same look.
  • Loading branch information
@akrantz
Zheng authored and akrantz committed Mar 21, 2019
1 parent 0d34895 commit e44e75f
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 209 deletions.
63 changes: 2 additions & 61 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 1 addition & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,7 @@
"validate": "office-toolbox validate -m manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"@microsoft/office-js-helpers": "^1.0.1",
"jquery": "^3.1.1",
"office-ui-fabric-js": "^1.3.0"
},
"dependencies": {},
"devDependencies": {
"@types/jquery": "^3.3.22",
"@types/office-js": "0.0.158",
Expand Down
159 changes: 52 additions & 107 deletions src/taskpane/taskpane.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,31 @@
* See LICENSE in the project root for license information.
*/

html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}

.ms-welcome {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 500px;
min-width: 320px;
overflow: auto;
overflow-x: hidden;
}

.ms-welcome__header {
min-height: 250px;
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

ul {
margin: 0;
padding: 0;
}

.ms-welcome__header {
padding: 20px;
padding-bottom: 30px;
padding-top: 100px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
}

.ms-welcome__header > h1 {
margin-top: 30px;
text-align: center;
}

.ms-welcome__main {
.ms-welcome__main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
Expand All @@ -69,67 +38,43 @@ h6 {
align-items: center;
-webkit-flex: 1 0 0;
flex: 1 0 0;
padding: 30px 20px;
}

.ms-welcome__main > h2 {
width: 100%;
text-align: center;
}

.ms-welcome__features {
list-style-type: none;
margin-top: 30px;
}

.ms-welcome__features.ms-List .ms-ListItem {
padding: 0px;
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
}

.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
font-size: 14pt;
}

.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
margin-right: 10px;
}

.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

.ms-welcome__action.ms-Button--hero .ms-Button-icon .ms-Icon {
margin-left: 5px;
margin-top: 4px;
border: none;
font-size: 14pt;
padding: 10px 20px;
}

.ms-welcome__main > h2 {
width: 100%;
text-align: center;
}

.ms-welcome__features {
list-style-type: none;
margin-top: 20px;
}

.ms-welcome__features.ms-List .ms-ListItem {
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
}

.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
margin-right: 10px;
}

.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
}

.ms-Button.ms-Button--hero .ms-Button-label {
color: #0078d7;
}

.ms-welcome__action.ms-Button--hero:hover .ms-Button-icon .ms-Icon {
border: none;
.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
color: #005a9e;
cursor: pointer;
}

@media (min-width: 0) and (max-width: 350px) {
.ms-welcome__features {
width: 100%;
}
b {
font-weight: bold;
}
40 changes: 14 additions & 26 deletions src/taskpane/taskpane.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,54 +13,42 @@
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

<!-- LOCAL -->
<link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
<link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.components.css" />

<!-- CDN -->
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" />-->
<!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" />-->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

<!-- Template styles -->
<link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome">
<header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
<body class="ms-font-m ms-welcome ms-Fabric">
<header class="ms-welcome__header ms-bgColor-neutralLighter">
<img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
<h1 class="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">Welcome</h1>
<h1 class="ms-font-su">Welcome</h1>
</header>
<section id="sideload-msg" class="ms-welcome__main">
<h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20">Please sideload your add-in to see app body.</h2>
<h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
</section>
<main id="app-body" class="ms-welcome__main" style="display: none;">
<h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20"> Discover what Office Add-ins can do for you today! </h2>
<ul class="ms-List ms-welcome__features ms-u-slideUpIn10">
<h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
<ul class="ms-List ms-welcome__features">
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Ribbon"></i>
<span class="ms-font-m ms-fontColor-neutralPrimary">Achieve more with Office integration</span>
<i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i>
<span class="ms-font-m">Achieve more with Office integration</span>
</li>
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Unlock"></i>
<span class="ms-font-m ms-fontColor-neutralPrimary">Unlock features and functionality</span>
<i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i>
<span class="ms-font-m">Unlock features and functionality</span>
</li>
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Design"></i>
<span class="ms-font-m ms-fontColor-neutralPrimary">Create and visualize like a pro</span>
<i class="ms-Icon ms-Icon--Design ms-font-xl"></i>
<span class="ms-font-m">Create and visualize like a pro</span>
</li>
</ul>
<br />
<br />
<p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p>
<div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20">
<div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
<span class="ms-Button-label">Run</span>
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
</div>
</main>

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
</body>

</html>
Loading

0 comments on commit e44e75f

Please sign in to comment.