Skip to content

Commit e44e75f

Browse files
Zhengakrantz
Zheng
authored and
akrantz
committed
Simplify the template
Remove office-js-helpers, jquery, and office-ui-fabric-js. Update the HTML and CSS to maintain the same look.
1 parent 0d34895 commit e44e75f

File tree

5 files changed

+73
-209
lines changed

5 files changed

+73
-209
lines changed

‎package-lock.json

Lines changed: 2 additions & 61 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,7 @@
3030
"validate": "office-toolbox validate -m manifest.xml",
3131
"watch": "webpack --mode development --watch"
3232
},
33-
"dependencies": {
34-
"@microsoft/office-js-helpers": "^1.0.1",
35-
"jquery": "^3.1.1",
36-
"office-ui-fabric-js": "^1.3.0"
37-
},
33+
"dependencies": {},
3834
"devDependencies": {
3935
"@types/jquery": "^3.3.22",
4036
"@types/office-js": "0.0.158",

‎src/taskpane/taskpane.css

Lines changed: 52 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,31 @@
33
* See LICENSE in the project root for license information.
44
*/
55

6-
html,
7-
body {
8-
width: 100%;
9-
height: 100%;
10-
margin: 0;
11-
padding: 0;
12-
}
13-
14-
ul,
15-
p,
16-
h1,
17-
h2,
18-
h3,
19-
h4,
20-
h5,
21-
h6 {
22-
margin: 0;
23-
padding: 0;
24-
}
25-
26-
.ms-welcome {
27-
position: relative;
28-
display: -webkit-flex;
29-
display: flex;
30-
-webkit-flex-direction: column;
31-
flex-direction: column;
32-
-webkit-flex-wrap: nowrap;
33-
flex-wrap: nowrap;
34-
min-height: 500px;
35-
min-width: 320px;
36-
overflow: auto;
37-
overflow-x: hidden;
38-
}
39-
40-
.ms-welcome__header {
41-
min-height: 250px;
6+
html,
7+
body {
8+
width: 100%;
9+
height: 100%;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
ul {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
.ms-welcome__header {
4220
padding: 20px;
4321
padding-bottom: 30px;
22+
padding-top: 100px;
4423
display: -webkit-flex;
4524
display: flex;
4625
-webkit-flex-direction: column;
4726
flex-direction: column;
48-
-webkit-flex-wrap: nowrap;
49-
flex-wrap: nowrap;
50-
-webkit-align-items: center;
5127
align-items: center;
52-
-webkit-justify-content: flex-end;
53-
justify-content: flex-end;
54-
}
28+
}
5529

56-
.ms-welcome__header > h1 {
57-
margin-top: 30px;
58-
text-align: center;
59-
}
60-
61-
.ms-welcome__main {
30+
.ms-welcome__main {
6231
display: -webkit-flex;
6332
display: flex;
6433
-webkit-flex-direction: column;
@@ -69,67 +38,43 @@ h6 {
6938
align-items: center;
7039
-webkit-flex: 1 0 0;
7140
flex: 1 0 0;
72-
padding: 30px 20px;
73-
}
74-
75-
.ms-welcome__main > h2 {
76-
width: 100%;
77-
text-align: center;
78-
}
79-
80-
.ms-welcome__features {
81-
list-style-type: none;
82-
margin-top: 30px;
83-
}
84-
85-
.ms-welcome__features.ms-List .ms-ListItem {
86-
padding: 0px;
87-
padding-bottom: 20px;
88-
display: -webkit-flex;
89-
display: flex;
90-
-webkit-flex-direction: row;
91-
flex-direction: row;
92-
-webkit-flex-wrap: nowrap;
93-
flex-wrap: nowrap;
94-
-webkit-align-items: center;
95-
align-items: center;
96-
}
97-
98-
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
99-
font-size: 14pt;
100-
}
101-
102-
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
103-
margin-right: 10px;
104-
}
105-
106-
.ms-welcome__action.ms-Button--hero {
107-
margin-top: 30px;
108-
display: -webkit-flex;
109-
display: flex;
110-
-webkit-flex-direction: row;
111-
flex-direction: row;
112-
-webkit-flex-wrap: nowrap;
113-
flex-wrap: nowrap;
114-
-webkit-justify-content: center;
115-
justify-content: center;
116-
-webkit-align-items: center;
117-
align-items: center;
118-
}
119-
120-
.ms-welcome__action.ms-Button--hero .ms-Button-icon .ms-Icon {
121-
margin-left: 5px;
122-
margin-top: 4px;
123-
border: none;
124-
font-size: 14pt;
41+
padding: 10px 20px;
42+
}
43+
44+
.ms-welcome__main > h2 {
45+
width: 100%;
46+
text-align: center;
47+
}
48+
49+
.ms-welcome__features {
50+
list-style-type: none;
51+
margin-top: 20px;
52+
}
53+
54+
.ms-welcome__features.ms-List .ms-ListItem {
55+
padding-bottom: 20px;
56+
display: -webkit-flex;
57+
display: flex;
58+
}
59+
60+
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
61+
margin-right: 10px;
62+
}
63+
64+
.ms-welcome__action.ms-Button--hero {
65+
margin-top: 30px;
66+
}
67+
68+
.ms-Button.ms-Button--hero .ms-Button-label {
69+
color: #0078d7;
12570
}
12671

127-
.ms-welcome__action.ms-Button--hero:hover .ms-Button-icon .ms-Icon {
128-
border: none;
72+
.ms-Button.ms-Button--hero:hover .ms-Button-label,
73+
.ms-Button.ms-Button--hero:focus .ms-Button-label{
74+
color: #005a9e;
75+
cursor: pointer;
12976
}
13077

131-
@media (min-width: 0) and (max-width: 350px) {
132-
.ms-welcome__features {
133-
width: 100%;
134-
}
78+
b {
79+
font-weight: bold;
13580
}

‎src/taskpane/taskpane.html

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,54 +13,42 @@
1313
<!-- Office JavaScript API -->
1414
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
1515

16-
<!-- LOCAL -->
17-
<link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
18-
<link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.components.css" />
19-
20-
<!-- CDN -->
2116
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
22-
<!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" />-->
23-
<!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" />-->
17+
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
2418

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

29-
<body class="ms-font-m ms-welcome">
30-
<header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
23+
<body class="ms-font-m ms-welcome ms-Fabric">
24+
<header class="ms-welcome__header ms-bgColor-neutralLighter">
3125
<img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
32-
<h1 class="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">Welcome</h1>
26+
<h1 class="ms-font-su">Welcome</h1>
3327
</header>
3428
<section id="sideload-msg" class="ms-welcome__main">
35-
<h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20">Please sideload your add-in to see app body.</h2>
29+
<h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
3630
</section>
3731
<main id="app-body" class="ms-welcome__main" style="display: none;">
38-
<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>
39-
<ul class="ms-List ms-welcome__features ms-u-slideUpIn10">
32+
<h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
33+
<ul class="ms-List ms-welcome__features">
4034
<li class="ms-ListItem">
41-
<i class="ms-Icon ms-Icon--Ribbon"></i>
42-
<span class="ms-font-m ms-fontColor-neutralPrimary">Achieve more with Office integration</span>
35+
<i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i>
36+
<span class="ms-font-m">Achieve more with Office integration</span>
4337
</li>
4438
<li class="ms-ListItem">
45-
<i class="ms-Icon ms-Icon--Unlock"></i>
46-
<span class="ms-font-m ms-fontColor-neutralPrimary">Unlock features and functionality</span>
39+
<i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i>
40+
<span class="ms-font-m">Unlock features and functionality</span>
4741
</li>
4842
<li class="ms-ListItem">
49-
<i class="ms-Icon ms-Icon--Design"></i>
50-
<span class="ms-font-m ms-fontColor-neutralPrimary">Create and visualize like a pro</span>
43+
<i class="ms-Icon ms-Icon--Design ms-font-xl"></i>
44+
<span class="ms-font-m">Create and visualize like a pro</span>
5145
</li>
5246
</ul>
53-
<br />
54-
<br />
5547
<p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p>
56-
<div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20">
48+
<div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
5749
<span class="ms-Button-label">Run</span>
58-
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
5950
</div>
6051
</main>
61-
62-
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
63-
<script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
6452
</body>
6553

6654
</html>

0 commit comments

Comments
 (0)