expand arrow

frontend/src/metabase/icon_paths.js

@@ -70,6 +70,7 @@ export var ICON_PATHS = {
     emojisymbols: 'M15.915,6.8426232 L13.8540602,4.78168347 C10.8078936,1.73551684 5.86858639,1.73495294 2.82246208,4.78107725 C-0.217463984,7.82100332 -0.223390824,12.7662163 2.82306829,15.8126754 L15.6919527,28.6815598 L15.915,28.4585125 L16.1380473,28.6815598 L29.0069316,15.8126754 C32.0533907,12.7662163 32.0474639,7.82100332 29.0075378,4.78107725 C25.9614135,1.73495294 21.0221063,1.73551684 17.9759397,4.78168347 L15.915,6.8426232 Z',
     emojitravel: 'M21.5273864,25.0150018 L21.5273864,1.91741484 C21.5273864,0.0857778237 20.049926,-1.38499821 18.2273864,-1.38499821 C16.4085552,-1.38499821 14.9273864,0.0935424793 14.9273864,1.91741484 L14.9273864,25.0150018 L11.6273864,28.3150018 L24.8273864,28.3150018 L21.5273864,25.0150018 Z M1.72738636,18.4150018 L14.9273864,5.21500179 L14.9273864,15.7750018 L1.72738636,23.6950018 L1.72738636,18.4150018 Z M34.7273864,18.4150018 L21.5273864,5.21500179 L21.5273864,15.7750018 L34.7273864,23.6950018 L34.7273864,18.4150018 Z',
     expand: 'M29,13.6720571 L29,8.26132482e-16 L15.3279429,8.64083276e-16 L20.3471502,5.01920738 L15.0015892,10.3647684 L18.6368207,14 L23.9823818,8.65443894 L29,13.6720571 Z M0.00158917013,15.3279429 L0.00158917013,29 L13.6736463,29 L8.65443894,23.9807926 L14,18.6352316 L10.3647684,15 L5.01920738,20.3455611 L0.00158917013,15.3279429 Z',
+    expandarrow: 'M16.429 28.429L.429 5.57h32z',
     explore: 'M16.4796545,16.298957 L16.4802727,23.0580389 L16.4802727,23.0580389 C17.3528782,23.2731238 18,24.0609902 18,25 C18,26.1045695 17.1045695,27 16,27 C14.8954305,27 14,26.1045695 14,25 C14,24.0751922 14.6276951,23.2969904 15.4802906,23.0681896 L15.4796772,16.3617812 L15.4796772,16.3617812 L9.42693239,19.2936488 C9.54250354,19.9090101 9.36818637,20.5691625 8.90013616,21.0538426 C8.13283771,21.8484034 6.86670062,21.8705039 6.07213982,21.1032055 C5.27757902,20.335907 5.25547851,19.06977 6.02277696,18.2752092 C6.79007541,17.4806484 8.0562125,17.4585478 8.8507733,18.2258463 C8.90464955,18.277874 8.95497425,18.3321952 9.00174214,18.3885073 L14.8957415,15.5335339 L8.95698016,12.663638 C8.54316409,13.1288103 7.91883307,13.3945629 7.25239963,13.3245179 C6.15388108,13.2090589 5.35695382,12.2249357 5.47241277,11.1264172 C5.58787172,10.0278986 6.57199493,9.23097136 7.67051349,9.34643031 C8.76903204,9.46188927 9.5659593,10.4460125 9.45050035,11.544531 C9.44231425,11.6224166 9.42976147,11.6987861 9.41311084,11.7734218 L15.4795257,14.705006 L15.4789062,7.93143834 C14.6270158,7.70216703 14,6.9243072 14,6 C14,4.8954305 14.8954305,4 16,4 C17.1045695,4 18,4.8954305 18,6 C18,6.93950562 17.3521946,7.72770818 16.4788902,7.94230133 L16.4795143,14.7663758 L22.5940736,11.8045661 C22.4397082,11.1620316 22.6068068,10.4567329 23.0998638,9.94615736 C23.8671623,9.15159656 25.1332994,9.12949606 25.9278602,9.8967945 C26.722421,10.664093 26.7445215,11.93023 25.977223,12.7247908 C25.2099246,13.5193516 23.9437875,13.5414522 23.1492267,12.7741537 C23.120046,12.7459743 23.0919072,12.717122 23.0648111,12.687645 L17.1917924,15.5324558 L23.0283963,18.3529842 C23.4420438,17.8775358 24.073269,17.604607 24.7476004,17.6754821 C25.8461189,17.7909411 26.6430462,18.7750643 26.5275872,19.8735828 C26.4121283,20.9721014 25.4280051,21.7690286 24.3294865,21.6535697 C23.230968,21.5381107 22.4340407,20.5539875 22.5494996,19.455469 C22.5569037,19.3850239 22.56788,19.315819 22.5822296,19.2480155 L16.4796545,16.298957 Z M16.0651172,6.99791382 C16.5870517,6.96436642 17,6.53040783 17,6 C17,5.44771525 16.5522847,5 16,5 C15.4477153,5 15,5.44771525 15,6 C15,6.53446591 15.4192913,6.9710011 15.9468816,6.99861337 L16.0651172,6.99791382 L16.0651172,6.99791382 Z M16,26 C16.5522847,26 17,25.5522847 17,25 C17,24.4477153 16.5522847,24 16,24 C15.4477153,24 15,24.4477153 15,25 C15,25.5522847 15.4477153,26 16,26 Z M6.56266251,20.102897 C6.80476821,20.5992873 7.40343746,20.8054256 7.89982771,20.5633199 C8.39621795,20.3212142 8.60235631,19.722545 8.36025061,19.2261547 C8.11814491,18.7297645 7.51947566,18.5236261 7.02308541,18.7657318 C6.52669517,19.0078375 6.32055681,19.6065068 6.56266251,20.102897 Z M23.6397494,11.7738453 C23.8818551,12.2702355 24.4805243,12.4763739 24.9769146,12.2342682 C25.4733048,11.9921625 25.6794432,11.3934932 25.4373375,10.897103 C25.1952318,10.4007127 24.5965625,10.1945744 24.1001723,10.4366801 C23.603782,10.6787858 23.3976437,11.277455 23.6397494,11.7738453 Z M25.4373375,20.102897 C25.6794432,19.6065068 25.4733048,19.0078375 24.9769146,18.7657318 C24.4805243,18.5236261 23.8818551,18.7297645 23.6397494,19.2261547 C23.3976437,19.722545 23.603782,20.3212142 24.1001723,20.5633199 C24.5965625,20.8054256 25.1952318,20.5992873 25.4373375,20.102897 Z M8.36025061,11.7738453 C8.60235631,11.277455 8.39621795,10.6787858 7.89982771,10.4366801 C7.40343746,10.1945744 6.80476821,10.4007127 6.56266251,10.897103 C6.32055681,11.3934932 6.52669517,11.9921625 7.02308541,12.2342682 C7.51947566,12.4763739 8.11814491,12.2702355 8.36025061,11.7738453 Z',
     external: 'M13.7780693,4.44451732 L5.1588494,4.44451732 C2.32615959,4.44451732 0,6.75504816 0,9.60367661 L0,25.1192379 C0,27.9699171 2.30950226,30.2783972 5.1588494,30.2783972 L18.9527718,30.2783972 C21.7854617,30.2783972 24.1116212,27.9678664 24.1116212,25.1192379 L24.1116212,19.9448453 L20.6671039,19.9448453 L20.6671039,25.1192379 C20.6671039,26.0662085 19.882332,26.8338799 18.9527718,26.8338799 L5.1588494,26.8338799 C4.21204994,26.8338799 3.44451732,26.0677556 3.44451732,25.1192379 L3.44451732,9.60367661 C3.44451732,8.656706 4.22928927,7.88903464 5.1588494,7.88903464 L13.7780693,7.88903464 L13.7780693,4.44451732 L13.7780693,4.44451732 Z M30.9990919,14.455325 L30.9990919,1 L17.5437669,1 L22.4834088,5.93964193 L17.2225866,11.2004641 L20.8001918,14.7780693 L26.061014,9.51724709 L30.9990919,14.455325 L30.9990919,14.455325 L30.9990919,14.455325 Z',
     eye: 'M30.622 18.49c-.549.769-1.46 1.86-2.737 3.273-1.276 1.414-2.564 2.614-3.866 3.602-2.297 1.757-4.963 2.635-8 2.635-3.062 0-5.741-.878-8.038-2.635-1.302-.988-2.59-2.188-3.866-3.602-1.276-1.413-2.188-2.504-2.737-3.272-.549-.769-.9-1.277-1.053-1.524-.433-.63-.433-1.276 0-1.934.128-.247.472-.755 1.034-1.524.561-.768 1.48-1.852 2.756-3.252 1.276-1.4 2.564-2.593 3.866-3.581C10.303 4.892 12.982 4 16.019 4c3.011 0 5.678.892 8 2.676 1.302.988 2.59 2.182 3.866 3.581 1.276 1.4 2.195 2.484 2.756 3.252.562.769.906 1.277 1.034 1.524.433.63.433 1.276 0 1.934-.153.247-.504.755-1.053 1.524zm-1.516-3.214c-.248.376-.248 1.089.034 1.499l-.11-.16-.088-.17a21.93 21.93 0 0 0-.784-1.121c-.483-.66-1.338-1.67-2.546-2.995-1.154-1.266-2.306-2.333-3.466-3.214-1.781-1.368-3.788-2.04-6.127-2.04-2.365 0-4.385.673-6.179 2.05-1.146.87-2.298 1.938-3.452 3.204-1.208 1.325-2.063 2.334-2.546 2.995a21.93 21.93 0 0 0-.784 1.12l-.075.145-.09.135c.249-.376.249-1.089-.033-1.499l.08.122c.105.17.432.644.941 1.356.466.653 1.313 1.666 2.517 3 1.152 1.275 2.3 2.346 3.451 3.22 1.752 1.339 3.773 2.001 6.17 2.001 2.37 0 4.379-.661 6.14-2.008 1.143-.867 2.291-1.938 3.443-3.214 1.204-1.333 2.05-2.346 2.517-2.999.509-.712.836-1.186.942-1.356l.045-.071zm-17.353 5.663C10.584 19.709 10 18.237 10 16.522c0-1.744.584-3.224 1.753-4.439 1.168-1.215 2.59-1.822 4.268-1.822 1.65 0 3.058.607 4.226 1.822C21.416 13.298 22 14.778 22 16.522c0 1.715-.584 3.187-1.753 4.417-1.168 1.229-2.577 1.844-4.226 1.844-1.677 0-3.1-.615-4.268-1.844zm6.265-2.12c.624-.655.906-1.368.906-2.297 0-.957-.281-1.67-.893-2.307-.592-.616-1.203-.879-2.01-.879-.84 0-1.462.266-2.052.88-.612.636-.893 1.35-.893 2.306 0 .929.282 1.642.906 2.298.59.62 1.207.887 2.039.887.8 0 1.405-.264 1.997-.887z',

frontend/src/metabase/questions/containers/QuestionIndex.jsx

 import React, { Component, PropTypes } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router";
+import { Motion, spring, presets } from "react-motion";
 
 // import ActionGroup from "metabase/components/ActionGroup";
 import Icon from "metabase/components/Icon";
@@ -68,14 +69,24 @@ export default class QuestionIndex extends Component {
                 <div className="mb2">
                     <CollectionButtons collections={collections} />
                 </div>
-                <div className="flex align-center mt4">
-                    {/* TODO: proper arrow icon */}
-                    <Icon
-                        className="p2"
-                        name={questionsExpanded ? "chevrondown" : "chevronright"}
-                        onClick={() => this.setState({ questionsExpanded: !questionsExpanded })}
-                    />
-                    <h2>Everything Else</h2>
+                <div
+                    className="inline-block mt4 mb2 cursor-pointer text-brand-hover"
+                    onClick={() => this.setState({ questionsExpanded: !questionsExpanded })}
+                >
+                    <div className="flex align-center">
+                        <Motion defaultStyle={{ deg: 0 }} style={{ deg: questionsExpanded ? spring(0, presets.gentle) : spring(270, presets.gentle) }}>
+                            { motionStyle =>
+                                <Icon
+                                    className="ml1 mr1"
+                                    name="expandarrow"
+                                    style={{
+                                        transform: `rotate(${motionStyle.deg}deg)`
+                                    }}
+                                />
+                            }
+                        </Motion>
+                        <h2>Everything Else</h2>
+                    </div>`
                 </div>
                 { questionsExpanded &&
                     <div className="">